Android—ListView Item 展开动画效果

最新推荐文章于 2025-06-09 11:34:18 发布

ghd2000

最新推荐文章于 2025-06-09 11:34:18 发布

阅读量1.9w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android expandablelistview listview 动画

本文链接：https://blog.youkuaiyun.com/ghd2000/article/details/47663227

Android 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Android中实现ListView Item的展开动画效果，类似ExpandableListView。通过Adapter控制子View的显示隐藏，并使用自定义动画实现展开动画。详细代码包括XML布局和Java实现。由于篇幅限制，动画效果请参见提供的GitHub链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android—ListView Item 展开动画效果

最近在做一个关于ListView item的展开效果，类似于 “粮仓” App
的商店页面，点击Item，展开显示子View，类似于ExpandableListView。如图：

这里写图片描述

其实原理大家都能够猜的到，就是在Adapter里控制子View的显示与隐藏，其实这个东西看起来挺简单的，做起来，还真是费了一点功夫，其中还遇到不少知识点。其实写程序还得多思考，拿来主义固然是好，但是我们也要充分的理解每一行代码的含义，这样才能慢慢的积累更多的知识。好了不废话了，上代码。

activity_list_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jiaowenzheng.app.activity.ListViewActivity">


    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</RelativeLayout>

group_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#ff202428"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/children_image"
        android:layout_width="fill_parent"
        android:layout_height="200.5dip"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/child_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"/> >
</LinearLayout>

children_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black">

    <TextView
        android:id="@+id/child_text"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="17.099976dip"
        android:layout_marginRight="15.5dip"
        android:drawableRight="@drawable/ic_array_pressed"
        android:gravity="center_vertical"
        android:text="喜欢"
        android:textColor="#ffb3b3b3"
        android:textSize="16.099976sp" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="1.0dip"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white" />
</RelativeLayout>

ListViewActivity.java

package com.jiaowenzheng.app.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.widget.AdapterView;
import android.widget.ListView;

import com.jiaowenzheng.app.ListItem;
import com.jiaowenzheng.app.R;
import com.jiaowenzheng.app.adapter.ListItemAdapter;
import com.jiaowenzheng.app.animation.ViewExpandAnimation;

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

/**
 * @author  jiaowenzheng
 */
public class ListViewActivity extends AppCompatActivity {

    private ListView mListView;

    private List<ListItem> mList;

    private ListItemAdapter mListAdapter;

    private ListItemAdapter.ViewHolder mLastViewTag = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view);

        init();
    }


    public void init(){

        mListView = (ListView) findViewById(R.id.list_view);
        mList = new ArrayList<ListItem>();

        List<String> tempArray1 = new ArrayList<String>();
        tempArray1.add("第一条");
        tempArray1.add("第二条");

        List<String> tempArray2 = new ArrayList<String>();
        tempArray2.add("第一条");
        tempArray2.add("第二条");
        tempArray2.add("第三条");

        List<String> tempArray3 = new ArrayList<String>();
        tempArray3.add("第一条");
        tempArray3.add("第二条");
        tempArray3.add("第三条");
        tempArray3.add("第四条");

        for (int i = 0;i < 10;i++){
            ListItem item = new ListItem();
            item.setDrawableId(R.drawable.banner1);
            if(i == 0){
                item.setChildrenList(tempArray1);
            }else if( i == 1){
                item.setChildrenList(tempArray2);
            }else if(i == 3){
                item.setChildrenList(tempArray3);
            }else{
                item.setChildrenList(tempArray1);
            }

            mList.add(item);
        }

        mListAdapter = new ListItemAdapter(this,mList);
        mListView.setAdapter(mListAdapter);


        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {
                mListAdapter.setPosition(position);

                //将上一个展开的view 收缩
                if (mLastViewTag != null) {
                    View previousView = parent.findViewWithTag(mLastViewTag);
                    if (previousView != null) {
                        View childrenView = previousView.findViewById(R.id.child_layout);
                        if (childrenView != null
                                && (childrenView.getVisibility() != View.GONE)) {
                            childrenView.startAnimation(new ViewExpandAnimation(
                                    childrenView));
                        }
                    }
                }

                //记录当前item的Tag
                mLastViewTag = (ListItemAdapter.ViewHolder) view.getTag();

                //展开当前点击的item
                View childrenLayout = view.findViewById(R.id.child_layout);
                ViewExpandAnimation expandAnimation = new ViewExpandAnimation(childrenLayout);

                expandAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        //item展开结束后，将当前item平滑滚动到顶部
                        mListView.smoothScrollToPositionFromTop(position, 1, 300);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });

                childrenLayout.startAnimation(expandAnimation);
            }
        });
    }

}

ListItemAdapter.java

package com.jiaowenzheng.app.adapter;

import android.content.Context;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.jiaowenzheng.app.ListItem;
import com.jiaowenzheng.app.R;

import java.util.List;

/**
 * Created by wenzheng on 2015/8/13.
 */
public class ListItemAdapter extends BaseAdapter {

    private List<ListItem> mList;
    private Context mContext;

    private int mPosition = -1;
    private DisplayMetrics mDisplayMetrics;
    private LayoutInflater mInflater;

    public ListItemAdapter(Context context, List<ListItem> mList) {
        this.mList = mList;
        this.mContext = context;
        this.mDisplayMetrics = mContext.getResources().getDisplayMetrics();
        this.mInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {
            holder = new ViewHolder();
            convertView = mInflater.inflate(R.layout.group_item,null);
            holder.childrenLayout = (LinearLayout) convertView.findViewById(R.id.child_layout);
            holder.groupImg = (ImageView) convertView.findViewById(R.id.children_image);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        ListItem item = mList.get(position);
        holder.groupImg.setImageResource(item.getDrawableId());

        if (holder.childrenLayout.getChildCount() > 0) {
            holder.childrenLayout.removeAllViews();
        }

        //动态加载子view布局
        int size = item.getChildrenList().size();
        for (int i = 0; i < size; i++) {
            View childrenView = mInflater.inflate(R.layout.child_item, null);
            TextView name = (TextView) childrenView.findViewById(R.id.child_text);
            name.setText(item.getChildrenList().get(i));
            holder.childrenLayout.addView(childrenView);
        }

        //这里很重要，计算当前要展开view的高度
        LinearLayout childrenLayout = (LinearLayout) convertView.findViewById(R.id.child_layout);
        int widthSpec = View.MeasureSpec.makeMeasureSpec((int) (mDisplayMetrics.widthPixels -
                10 * mDisplayMetrics.density), View.MeasureSpec.EXACTLY);
        childrenLayout.measure(widthSpec, 0);
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) childrenLayout.getLayoutParams();

        if(mPosition == position) {
            params.bottomMargin = 0;
            childrenLayout.setVisibility(View.VISIBLE);
        } else {
            params.bottomMargin = -childrenLayout.getMeasuredHeight();
            childrenLayout.setVisibility(View.GONE);
        }

        return convertView;
    }


    public void setPosition(int position) {
        mPosition = position;
    }

    public  static class ViewHolder {
        ImageView groupImg;
        LinearLayout childrenLayout;
    }
}

ViewExpandAnimation.java

package com.jiaowenzheng.app.animation;

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout.LayoutParams;

/**
 * Created by wenzheng on 2015/8/13.
 */

public class ViewExpandAnimation extends Animation {

    private View mAnimationView = null;
    private LayoutParams mViewLayoutParams = null;
    private int mStart = 0;
    private int mEnd = 0;

    public ViewExpandAnimation(View view){
        animationSettings(view, 500);
    }

    public ViewExpandAnimation(View view, int duration){
        animationSettings(view, duration);
    }

    private void animationSettings(View view, int duration){
        setDuration(duration);
        mAnimationView = view;
        mViewLayoutParams = (LayoutParams) view.getLayoutParams();
        mStart = mViewLayoutParams.bottomMargin;
        mEnd = (mStart == 0 ? (0 - view.getHeight()) : 0);
        view.setVisibility(View.VISIBLE);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        if(interpolatedTime < 1.0f){
            mViewLayoutParams.bottomMargin = mStart + (int) ((mEnd - mStart) * interpolatedTime);
            // invalidate
            mAnimationView.requestLayout();
        }else{
            mViewLayoutParams.bottomMargin = mEnd;
            mAnimationView.requestLayout();
            if(mEnd != 0){
                mAnimationView.setVisibility(View.GONE);
            }
        }
    }

}

ListItem.java

package com.jiaowenzheng.app;

import java.util.List;

/**
 * Created by wenzheng on 2015/8/13.
 */
public class ListItem {

    private int drawableId;
    private List<String> childrenList;

    public int getDrawableId() {
        return drawableId;
    }

    public void setDrawableId(int drawableId) {
        this.drawableId = drawableId;
    }

    public List<String> getChildrenList() {
        return childrenList;
    }

    public void setChildrenList(List<String> childrenList) {
        this.childrenList = childrenList;
    }
}