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;
}
}
效果如图:
由于图片的限制为2M,我录制的gif动画文件太大,所以无法上传,请谅解,上传几张效果图。
下载地址:https://github.com/jiaowenzheng/AppDemo
参考的博客:http://blog.youkuaiyun.com/qingye_love/article/details/8858147