码迷，mamicode.com
首页 > 其他好文 > 详细

一步一步带你实现ListView动画展开布局， ExpandableLayout实现

时间：2016-05-06 14:48:05      阅读：205      评论：0      收藏：0      [点我收藏+]

标签：

做项目的时候，需要一种listview,点击item的时候在item的下方展开一个菜单，于是在gituhub上找到了源码： ExpandableLayout,地址： https://github.com/traex/ExpandableLayout

这个项目实现的效果如下：
技术分享
上一篇我已经讲解了这个项目的原理，有兴趣的同学可以点击这里看源码解析：
http://blog.csdn.net/u010335298/article/details/51193565

今天我们主要是从开发者的角度一步一步的实现一个类似的效果。


点击listview的item显示和隐藏菜单的实现

也许你会想，这不是很简单吗？设置listview的item的点击事件控制view的显示隐藏就可以了。真的可以吗？我们来试试。

我们先定义adapter使用的xml , expandable_layout_item_layout.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView android:id="@+id/item_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:textColor="@color/gray_333333"
        android:textStyle="bold"
        android:paddingLeft="20dp"
        android:background="@color/gray_light"/>

    <FrameLayout android:id="@+id/menu_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone">
        <TextView android:id="@+id/menu_tv"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:textColor="@color/gray_333333"
            android:textStyle="bold"
            android:paddingLeft="20dp"
            android:background="@color/green_light" />
    </FrameLayout>


</LinearLayout>

可以看到我们从上而下分别展示了item_layout和menu_layout,menu_layout不可见
接下来实现我们的adapter,ExpandableLayoutAdapter

package com.example.myapp.adapter;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.example.myapp.R;
import com.example.myapp.util.Methods;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by zyr
 * DATE: 15-11-26
 * Time: 下午2:52
 * Email: yanru.zhang@renren-inc.com
 */
public class ExpandableLayoutAdapter extends BaseAdapter{
    public List<String> arrayList = new ArrayList<String>();
    private Context context;

    public ExpandableLayoutAdapter(Context context){
        this.context = context;
    }
    public ExpandableLayoutAdapter(Context context, List<String> arrayList){
        this.context = context;
        this.arrayList = new ArrayList<String>(arrayList);
    }

    public void setData(List<String> array){
        if(array ==null){
            return;
        }
        arrayList = new ArrayList<String>(array);
        notifyDataSetChanged();
    }
    @Override
    public int getCount() {
        return arrayList.size();
    }

    @Override
    public Object getItem(int position) {
        return arrayList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;
        if(convertView ==null){
            convertView = LayoutInflater.from(context).inflate(R.layout.expandable_layout_item_layout,null);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder)convertView.getTag();
        }

        viewHolder.itemTv.setText(arrayList.get(position));
        viewHolder.menuTv.setText("menu " + position + "!!!!") ;
        viewHolder.itemTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(viewHolder.menuLy.getVisibility() == View.GONE){
                    viewHolder.menuLy.setVisibility(View.VISIBLE);
                }else{
                    viewHolder.menuLy.setVisibility(View.GONE);
                }
            }
        });

        return convertView;
    }

    class ViewHolder{
        View rootView;
        TextView itemTv;
        TextView menuTv;
        FrameLayout menuLy;
        public ViewHolder(View view){
            rootView = view;
            itemTv = (TextView)view.findViewById(R.id.item_layout);
            menuTv = (TextView) view.findViewById(R.id.menu_tv);
            menuLy = (FrameLayout) view.findViewById(R.id.menu_layout);
        }
    }
}

在getView中，我们给item设置了点击事件，判断menu的可见性来设置menu是否可见，如果menu可见，点击item就让menu不可见；如果menu不可见，点击item就让menu可见。

好了，我们给listview设置上adapter

  listView = (ListView) findViewById(R.id.lv);

        for(int i=0;i<30;i++){
            strings.add("zyr" + i);
        }

        adapter = new ExpandableLayoutAdapter(this,strings);

        listView.setAdapter(adapter);

看一下运行效果。
技术分享
看了效果之后，我们会发现两个问题：
1.点开和关闭menu没有动画
2.应该只有一个menu是打开状态的。这里显然不符合。
3.滚动的时候保存打开或者关闭的状态。
接下来，我们来优化一下。


优化一，添加打开关闭动画。

先写一个打开的动画函数：

public void show(final View v ,int height){
        v.setVisibility(View.VISIBLE);
        ValueAnimator animator = ValueAnimator.ofInt(0,height);
        animator.setDuration(500);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (Integer) animation.getAnimatedValue();
                v.getLayoutParams().height = value;
                v.setLayoutParams(v.getLayoutParams());
            }
        });
        animator.start();
    }

这里，我们用到的是属性动画，不了解属性动画的可以先看看属性动画。这个动画实现的是在500毫秒内，改变动画的值，从0到height,改变的时候，设置动画的值为view的layout params的height。

同理，我们实现隐藏的动画。

public void dismiss(final View v ,int height){

        ValueAnimator animator = ValueAnimator.ofInt(height,0);
        animator.setDuration(500);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (Integer) animation.getAnimatedValue();
                if (value == 0) {
                    v.setVisibility(View.GONE);
                }
                v.getLayoutParams().height = value;
                v.setLayoutParams(v.getLayoutParams());
            }
        });
        animator.start();
    }

在getView的时候，点击item调用show和hide

 @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;
        if(convertView ==null){
            convertView = LayoutInflater.from(context).inflate(R.layout.expandable_layout_item_layout,null);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder)convertView.getTag();
        }

        viewHolder.itemTv.setText(arrayList.get(position));
        viewHolder.menuTv.setText("menu " + position + "!!!!") ;
        viewHolder.menuLy.measure(0, 0);
        final int height = viewHolder.menuLy.getMeasuredHeight();
        viewHolder.itemTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (viewHolder.menuLy.getVisibility() == View.GONE) {
                    show(viewHolder.menuLy, height);
                } else {
                    dismiss(viewHolder.menuLy, height);
                }
            }
        });

        return convertView;
    }

来看效果。
技术分享
动画的效果不错。接下来，我们来进行第二个优化。


优化二，只有一个item的menu处于打开状态。

思路，点击item的时候，先关闭所有打开的menu,再根据点击之前这个item的menu的状态决定要打开还是关闭menu。
这里，我们发现如果在MainActivity中设置listView.setOnItemClickListener(… …)，这样ListView独立实现这个功能，所以我们把这些操作都在list view中进行。


定义ExpandableLayoutItem作为listview的item.

我们把之前在adapter设置的打开关闭的动画都放在这个CustomExpandableLayoutItem.

package com.example.myapp.view;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;

import com.example.myapp.R;

/**
 * Created by zyr
 * DATE: 16-4-19
 * Time: 下午6:33
 * Email: yanru.zhang@renren-inc.com
 */
public class CustomExpandableLayoutItem extends RelativeLayout{

    private Context mContext;

    private int menuViewId, itemViewId;

    private View menuView, itemView;

    private FrameLayout menuLayout, itemLayout;

    private boolean isAnimating = false;

    private boolean isOpen = false;

    private int menuLayoutHeight;

    private static final int DURATION = 500;

    public CustomExpandableLayoutItem(Context context) {
        this(context, null);
    }

    public CustomExpandableLayoutItem(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomExpandableLayoutItem(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomExpandableLayoutItem);
        for(int i=0;i<typedArray.length();i++){
            int attr = typedArray.getIndex(i);
            switch (attr){
                case R.styleable.CustomExpandableLayoutItem_itemLayout:
                    itemViewId = typedArray.getResourceId(R.styleable.CustomExpandableLayoutItem_itemLayout,0);
                    break;
                case R.styleable.CustomExpandableLayoutItem_menuLayout:
                    menuViewId = typedArray.getResourceId(R.styleable.CustomExpandableLayoutItem_menuLayout,0);
                    break;
            }
        }
        typedArray.recycle();
//        Log.d("zyr", "itemViewId :" + itemViewId + "     menuViewId :" + menuViewId);
        getItemView();
        getMenuView();
//        Log.d("zyr", "itemView :" + (itemView == null) + "     menuView :" + (menuView == null));
        init();
    }

    private void init() {
        View rootView = LayoutInflater.from(mContext).inflate(R.layout.expandable_layout_root_view, this);
        itemLayout = (FrameLayout)rootView.findViewById(R.id.expandable_header_layout);
        menuLayout = (FrameLayout)rootView.findViewById(R.id.expandable_content_layout);
        if(itemView !=null){
            itemLayout.addView(itemView);
        }
        if(menuView !=null){
            menuLayout.addView(menuView);
        }
        menuLayout.measure(0, 0);
        menuLayoutHeight = menuLayout.getMeasuredHeight();
        menuLayout.setVisibility(GONE);
    }

    public void hide() {
        if(isAnimating || !isOpen){
            return;
        }

        ValueAnimator valueAnimator = ValueAnimator.ofInt(menuLayoutHeight,0);
        valueAnimator.setDuration(DURATION);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (Integer) animation.getAnimatedValue();
                if (value == 0) {
                    menuLayout.setVisibility(GONE);
                    isOpen = false;
                }
                menuLayout.getLayoutParams().height = value;
                menuLayout.setLayoutParams(menuLayout.getLayoutParams());
            }
        });
        valueAnimator.start();
    }

    public void show() {
        if(isAnimating){
            return;
        }

        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, menuLayoutHeight);
        valueAnimator.setDuration(DURATION);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (Integer) animation.getAnimatedValue();
                if (value == 0) {
                    menuLayout.setVisibility(VISIBLE);
                }
                if (value == menuLayoutHeight) {
                    isOpen = true;
                }
                menuLayout.getLayoutParams().height = value;
                menuLayout.setLayoutParams(menuLayout.getLayoutParams());
            }
        });
        valueAnimator.start();
    }

    public void showRightNow(){
        if(menuLayout.getLayoutParams().height == menuLayoutHeight){
            return;
        }
        menuLayout.setVisibility(VISIBLE);
        menuLayout.getLayoutParams().height = menuLayoutHeight;
        menuLayout.setLayoutParams(menuLayout.getLayoutParams());
        isOpen = true;
        invalidate();
    }

    public void hideRightNow(){
        if(menuLayout.getLayoutParams().height == 0){
            return;
        }
        menuLayout.setVisibility(GONE);
        menuLayout.getLayoutParams().height = 0;
        menuLayout.setLayoutParams(menuLayout.getLayoutParams());
        isOpen = false;
        invalidate();
    }

    public View getMenuView() {
        if(menuView == null){
            if(menuViewId !=0){
                menuView = View.inflate(mContext, menuViewId,null);
            }
        }
        return menuView;
    }

    public View getItemView() {
        if(itemView == null){
            if(itemViewId !=0){
                itemView = View.inflate(mContext, itemViewId,null);
            }
        }
        return itemView;
    }

    public boolean isOpen() {
        return isOpen;
    }
}

attrl.xml

   <declare-styleable name="CustomExpandableLayoutItem">
        <attr name="itemLayout" format="reference"/>
        <attr name="menuLayout" format="reference"/>
    </declare-styleable>

定义adapter,ExpandableLayoutAdapter2

package com.example.myapp.adapter;

import android.animation.ValueAnimator;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.example.myapp.R;
import com.example.myapp.view.CustomExpandableLayoutItem;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by zyr
 * DATE: 15-11-26
 * Time: 下午2:52
 * Email: yanru.zhang@renren-inc.com
 */
public class ExpandableLayoutAdapter2 extends BaseAdapter{
    public List<String> arrayList = new ArrayList<String>();
    private Context context;

    public ExpandableLayoutAdapter2(Context context){
        this.context = context;
    }
    public ExpandableLayoutAdapter2(Context context, List<String> arrayList){
        this.context = context;
        this.arrayList = new ArrayList<String>(arrayList);
    }

    public void setData(List<String> array){
        if(array ==null){
            return;
        }
        arrayList = new ArrayList<String>(array);
        notifyDataSetChanged();
    }
    @Override
    public int getCount() {
        return arrayList.size();
    }

    @Override
    public Object getItem(int position) {
        return arrayList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;
        if(convertView ==null){
            convertView = LayoutInflater.from(context).inflate(R.layout.expandable_layout_item_layout2,null);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder)convertView.getTag();
        }

        viewHolder.itemTv.setText("item " + position);
        viewHolder.menuTv.setText("menu" + position + "...");

        return convertView;
    }

    class ViewHolder{
        CustomExpandableLayoutItem expandableLayoutItem;
        View itemView;
        View menuView;
        TextView itemTv;
        TextView menuTv;
        public ViewHolder(View view){
            expandableLayoutItem = (CustomExpandableLayoutItem) view.findViewById(R.id.custom_expandable_layout);
            itemView = expandableLayoutItem.getItemView();
            menuView = expandableLayoutItem.getMenuView();
            itemTv = (TextView) itemView.findViewById(R.id.item_tv);
            menuTv = (TextView) menuView.findViewById(R.id.menu_tv);
        }
    }
}

adapter使用的expandable_layout_item_layout2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.example.myapp.view.CustomExpandableLayoutItem
        android:id="@+id/custom_expandable_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemLayout="@layout/custom_expandable_item_view"
        app:menuLayout="@layout/custom_expandable_menu_view">

    </com.example.myapp.view.CustomExpandableLayoutItem>
</RelativeLayout>

custom_expandable_item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView android:id="@+id/item_tv"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/gray_light"
        android:textColor="@color/gray_333333"
        android:textSize="20sp"
        android:text="header"
        android:gravity="center"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray_333333"/>
</LinearLayout>

custom_expandable_menu_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView android:id="@+id/menu_tv"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/green_light"
        android:textColor="@color/gray_333333"
        android:textSize="20sp"
        android:text="content"
        android:gravity="center"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray_333333"/>
</LinearLayout>

MainActivity

listView = (CustomExpandableListView) findViewById(R.id.lv);

        for(int i=0;i<30;i++){
            strings.add("zyr" + i);
        }

        adapter = new ExpandableLayoutAdapter2(this,strings);

        listView.setAdapter(adapter);

好了,到这里实现的和我们优化一完成的时候的效果是一样的…. ….

技术分享

到这里,我们才开始优化二的开始… …


只有一个item处于打开状态。

在这里，我们需要自定义listview

public class CustomExpandableListView extends ListView implements AdapterView.OnItemClickListener,AbsListView.OnScrollListener{

可以看到，我们继承ListView,实现了onItemClick和onScroll,页就是说我们要在onItemClick和onScroll做一些事情。

@Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //get click view
        if(getChildAt(position - getFirstVisiblePosition()) instanceof CustomExpandableLayoutItem){
            CustomExpandableLayoutItem expandableLayout = (CustomExpandableLayoutItem) getChildAt(position - getFirstVisiblePosition());
            if(expandableLayout.isOpen()){
                expandableLayout.hide();
                currentOpenId = -1;
            }else{
                //close all menu
                for(int i=getFirstVisiblePosition();i<=getLastVisiblePosition();i++){
                    CustomExpandableLayoutItem item = (CustomExpandableLayoutItem) getChildAt(i - getFirstVisiblePosition());
                    item.hide();
                }
                expandableLayout.show();
                currentOpenId = position;
            }
        }
    }

我们在onItemClick的时候，得到点击的item,如果item是打开状态，就关闭menu;否则，遍历所有的可见的item,关闭打开的item,之后，打开点击item的menu.

  @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.scrollState = scrollState;
    }

在onScrollStateChanged的时候，记录scrollState,

 public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if(scrollState == SCROLL_STATE_IDLE){
            return;
        }
        Log.d("zyr","--------firstVisibleItem :" + firstVisibleItem);
        if(currentOpenId >= firstVisibleItem && currentOpenId <= firstVisibleItem+visibleItemCount){
            CustomExpandableLayoutItem expandableLayout = (CustomExpandableLayoutItem) getChildAt(currentOpenId - getFirstVisiblePosition());
            if(expandableLayout!=null && !expandableLayout.isOpen()){
                expandableLayout.showRightNow();
                Log.d("zyr", "--------show :" + currentOpenId);
            }
        }else{
            for(int i=firstVisibleItem;i<firstVisibleItem+visibleItemCount;i++){
                CustomExpandableLayoutItem expandableLayout = (CustomExpandableLayoutItem) getChildAt(i-firstVisibleItem);
                if(expandableLayout!=null && expandableLayout.isOpen()){
                    expandableLayout.hideRightNow();
                    Log.d("zyr", "--------hide :" + i);
                }
            }
        }
        invalidate();
    }

在滚动的时候，如果是scrollState是滚动状态，做一些事情。
1.如果menu的item在可见item当中（currentOpenId >= firstVisibleItem && currentOpenId <= firstVisibleItem+visibleItemCount），直接使menu打开。
2.否则，遍历所有可见的item,如果其menu打开，使关闭。
效果。
技术分享

一步一步带你实现ListView动画展开布局， ExpandableLayout实现

标签：

原文地址：http://blog.csdn.net/u010335298/article/details/51212275
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！