Android—ListView Item 展开动画效果
最近在做一个关于ListView item的展开效果，类似于 “粮仓” App
的商店页面，点击Item，展开显示子View，类似于ExpandableListView。如图：
activity_list_view.xml其实原理大家都能够猜的到，就是在Adapter里控制子View的显示与隐藏，其实这个东西看起来挺简单的，做起来，还真是费了一点功夫，其中还遇到不少知识点。其实写程序还得多思考，拿来主义固然是好，但是我们也要充分的理解每一行代码的含义，这样才能慢慢的积累更多的知识。好了不废话了，上代码。
<RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/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"><ListViewandroid: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="/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="/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;@Overrideprotected 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() {@Overridepublic 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的TagmLastViewTag = (ListItemAdapter.ViewHolder) view.getTag();//展开当前点击的itemView childrenLayout = view.findViewById(R.id.child_layout);ViewExpandAnimation expandAnimation = new ViewExpandAnimation(childrenLayout);expandAnimation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {//item展开结束后，将当前item平滑滚动到顶部mListView.smoothScrollToPositionFromTop(position, 1, 300);}@Overridepublic 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 /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);}@Overridepublic int getCount() {return mList.size();}@Overridepublic Object getItem(int position) {return mList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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 /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);}@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {super.applyTransformation(interpolatedTime, t);if(interpolatedTime < 1.0f){mViewLayoutParams.bottomMargin = mStart + (int) ((mEnd - mStart) * interpolatedTime);// invalidatemAnimationView.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 /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;}}
效果如图：
由于图片的限制为2M，我录制的gif动画文件太大，所以无法上传，请谅解，上传几张效果图。
下载地址：/jiaowenzheng/AppDemo
参考的博客：/qingye_love/article/details/8858147
如果觉得《Android—ListView Item 展开动画效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
