ListView中的item以动画的形式展开

最新推荐文章于 2019-11-14 10:23:28 发布
最新推荐文章于 2019-11-14 10:23:28 发布
阅读量1.3k 收藏 2
点赞数

1. 前言：

        本篇并不用到ExpandableListView来实现二级展示，因为这个控件一是没有展开的动画效果，二是感觉性能不高，于是，就自己写了个类似于《应用汇》中管理的那个界面，只可惜它没有动画，我有。先上个图，让大家看看：

 

                应用汇管理界面                                       Demo界面

 

2. 程序实现：

2.1 main布局和item布局：

main布局很简单：

<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"
    tools:context=".MainActivity" >

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

</RelativeLayout>

 

item布局： 
<?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"
    android:padding="5dip">
    
    <RelativeLayout 
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <ImageView 
            android:id="@+id/ivIcon"
            android:src="@drawable/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image_desc"/>
        
        <LinearLayout 
            android:id="@+id/appInfo"
            android:layout_toRightOf="@id/ivIcon"
            android:layout_marginLeft="5dip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            
            <TextView 
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/name"
                android:textColor="#000000"
                android:textSize="16sp"/>
            <TextView 
                android:id="@+id/tvVer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/ver"
                android:textColor="#666666"
                android:textSize="13sp"/>
            <TextView 
                android:id="@+id/tvSize"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/size"
                android:textColor="#666666"
                android:textSize="13sp"/>
            
        </LinearLayout>
        
        <Button 
            android:id="@+id/btnClick"
            android:focusable="false"
            android:layout_width="80dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="@string/mgr"
            android:textColor="#000000"
            android:textSize="16sp"/>
        
    </RelativeLayout>
    
    <RelativeLayout 
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_area">

        <Button 
            android:id="@+id/btnOpen"
            android:focusable="false"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="6dip"
            android:text="@string/open"
            android:textColor="#000000"
            android:textSize="16sp"/>

        <Button 
            android:id="@+id/btnView"
            android:focusable="false"
            android:layout_toRightOf="@id/btnOpen"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dip"
            android:text="@string/details"
            android:textColor="#000000"
            android:textSize="16sp"/>
        
        <Button 
            android:id="@+id/btnWarning"
            android:focusable="false"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="6dip"
            android:text="@string/warning"
            android:textColor="#000000"
            android:textSize="16sp"/>
        
    </RelativeLayout>

</LinearLayout>


2.2 MainActivity： 
package com.chris.list.expand;

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

import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.MeasureSpec;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;
import android.widget.TextView;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends Activity {

	private static final String TAG = "ChrisExpand";
	private ListView mListView;
	private CustomListAdapter mAdapter;
	private List<AppInfo> mList = new ArrayList<AppInfo>();
	
	private int mLcdWidth = 0;
	private float mDensity = 0;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		getSystemInfo();
		mAdapter = new CustomListAdapter(this);
		mListView = (ListView) findViewById(R.id.lvMain);
		mListView.setAdapter(mAdapter);
		mListView.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> arg0, View v, int pos,
					long arg3) {
				Log.d(TAG, "onItemClick");
				View footer = v.findViewById(R.id.footer);
				footer.startAnimation(new ViewExpandAnimation(footer));
			}
		});
		
		addItems();
	}
	
	private void getSystemInfo(){
		DisplayMetrics dm = getResources().getDisplayMetrics();
		mLcdWidth = dm.widthPixels;
		mDensity = dm.density;
	}
	
	private void addItems(){
		for(int i = 0; i < 30; i ++){
			AppInfo ai = new AppInfo();
			ai.appIcon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
			
			int j = i + 1;
			ai.appName = "应用Demo_" + j;
			ai.appVer = "版本: " + (j%10+1) + "." + (j%8+2) + "." + (j%6+3);
			ai.appSize = "大小: " + j*10 + "MB";
			mList.add(ai);
		}
		mAdapter.notifyDataSetChanged();
	}
	
	public class AppInfo{
		private Bitmap appIcon;
		private String appName;
		private String appVer;
		private String appSize;
		
		public AppInfo(){
			
		}
		public Bitmap getAppIcon() {
			return appIcon;
		}
		public void setAppIcon(Bitmap appIcon) {
			this.appIcon = appIcon;
		}
		public String getAppName() {
			return appName;
		}
		public void setAppName(String appName) {
			this.appName = appName;
		}
		public String getAppVer() {
			return appVer;
		}
		public void setAppVer(String appVer) {
			this.appVer = appVer;
		}
		public String getAppSize() {
			return appSize;
		}
		public void setAppSize(String appSize) {
			this.appSize = appSize;
		}
	}
	
	public class ViewHolder{
		private ImageView ivImage;
		private TextView tvName;
		private TextView tvVer;
		private TextView tvSize;
		
		public ImageView getIvImage() {
			return ivImage;
		}
		public void setIvImage(ImageView ivImage) {
			this.ivImage = ivImage;
		}
		public TextView getTvName() {
			return tvName;
		}
		public void setTvName(TextView tvName) {
			this.tvName = tvName;
		}
		public TextView getTvVer() {
			return tvVer;
		}
		public void setTvVer(TextView tvVer) {
			this.tvVer = tvVer;
		}
		public TextView getTvSize() {
			return tvSize;
		}
		public void setTvSize(TextView tvSize) {
			this.tvSize = tvSize;
		}
	}
	
	public class CustomListAdapter extends BaseAdapter{

		private LayoutInflater mInflater;
		public CustomListAdapter(Context context){
			mInflater = LayoutInflater.from(context);
		}
		
		@Override
		public int getCount() {
			return mList.size();
		}

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

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

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			if(getCount() == 0){
				return null;
			}
			
			ViewHolder holder = null;
			if(convertView == null){
				convertView = mInflater.inflate(R.layout.expand_item, null);
				
				holder = new ViewHolder();
				holder.ivImage = (ImageView) convertView.findViewById(R.id.ivIcon);
				holder.tvName = (TextView) convertView.findViewById(R.id.tvName);
				holder.tvVer = (TextView) convertView.findViewById(R.id.tvVer);
				holder.tvSize = (TextView) convertView.findViewById(R.id.tvSize);
				convertView.setTag(holder);
			}else{
				holder = (ViewHolder) convertView.getTag();
			}
			
			AppInfo ai = mList.get(position);
			holder.ivImage.setImageBitmap(ai.appIcon);
			holder.tvName.setText(ai.appName);
			holder.tvVer.setText(ai.appVer);
			holder.tvSize.setText(ai.appSize);
			
			// resize the button width and margin
			int btnWidth = (int) ((mLcdWidth - 20 - 10 * mDensity) / 3);
			RelativeLayout.LayoutParams lp = null;
			
			Button btnOpen = (Button) convertView.findViewById(R.id.btnOpen);
			lp = (RelativeLayout.LayoutParams) btnOpen.getLayoutParams();
			lp.width = btnWidth;
			btnOpen.setLayoutParams(lp);
			btnOpen.setOnClickListener(new OnClickListener(){
				@Override
				public void onClick(View arg0) {
					Toast.makeText(getApplicationContext(), "打开应用!", Toast.LENGTH_SHORT).show();
				}
			});
			
			Button btnView = (Button) convertView.findViewById(R.id.btnView);
			lp = (RelativeLayout.LayoutParams) btnView.getLayoutParams();
			lp.width = btnWidth;
			lp.leftMargin = 10;
			btnView.setLayoutParams(lp);
			btnView.setOnClickListener(new OnClickListener(){
				@Override
				public void onClick(View arg0) {
					Toast.makeText(getApplicationContext(), "查看详情!", Toast.LENGTH_SHORT).show();
				}
			});
			
			Button btnWarning = (Button) convertView.findViewById(R.id.btnWarning);
			lp = (RelativeLayout.LayoutParams) btnWarning.getLayoutParams();
			lp.width = btnWidth;
			lp.leftMargin = 10;
			btnWarning.setLayoutParams(lp);
			btnWarning.setOnClickListener(new OnClickListener(){
				@Override
				public void onClick(View arg0) {
					Toast.makeText(getApplicationContext(), "举报应用!", Toast.LENGTH_SHORT).show();
				}
			});
			
			// get footer height
			RelativeLayout footer = (RelativeLayout) convertView.findViewById(R.id.footer);
			int widthSpec = MeasureSpec.makeMeasureSpec((int) (mLcdWidth - 10 * mDensity), MeasureSpec.EXACTLY);
			footer.measure(widthSpec, 0);
			LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) footer.getLayoutParams();
			params.bottomMargin = -footer.getMeasuredHeight();
			footer.setVisibility(View.GONE);
			
			return convertView;
		}
		
	}
}

代码很直观，也挺简单的，一个adapter类，一个view holder类，一个数据结构类，

不过，这里需要注意点，关于ListView.setOnItemClickListener需要注意，详细我的博客另一篇文章：
http://blog.youkuaiyun.com/qingye_love/article/details/8858002

 

2.3 动画效果类，继承于Animation类：

package com.chris.list.expand;

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

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);
			}
		}
	}

}

很直观吧，没啥重点要说，不过，还是想说说题外话，此方法可以替代开头说的ExpandableListView控件，当然，在展开之前，需要知道二级菜单中的高度，我简单举个例子说明下：

1. 点击一级菜单，此时，请求服务器，获取数据，在此其间，加个progressbar，用户友好提示；

2. 计算个数，以及二级菜单中，每个item的高度，则总高度=item高度 * 个数；

3. 动画展开；

我没试过，也许会遇到一些小的问题，比如二级菜单用什么控件来实现，加个listview？还是自己来实现。

 

3. 总结：

这个demo，还有一点没实现，那就是当展开后，上下滚动listview时，当这个展开的item移出屏幕外再移进屏幕时，就自动还原了，这个大家可以自己去实现，比如记录展开的item position等。

欢迎大家与我一起讨论。谢谢！

代码下载地址：http://download.youkuaiyun.com/detail/qingye_love/5307127

 

==========================================================

以下是针对Jack_l1网友的提问进行回答：

第一个问题：“上下滚动listview时，当这个展开的item移出屏幕外再移进屏幕时，就自动还原了”

step1: 在getView中，判断position所对应的item的状态

 @Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// ......省略之前代码
		
		// 重点在这里，加个判断，来决定是显示还是隐藏
		if(getItemStatus(position) == false){
			params.bottomMargin = -footer.getMeasuredHeight();
			footer.setVisibility(View.GONE);
		}else{
			params.bottomMargin = 0;
			footer.setVisibility(View.VISIBLE);
		}
		
		return convertView;
	}

step2: 状态查询getItemStatus的实现

 private boolean getItemStatus(int pos){
		for(int i = 0; i < mOpenItem.size(); i ++){
			int ipos = mOpenItem.get(i);
			if(ipos == pos){
				return true;
			}
		}
		return false;
	}

step3: mOpenItem中的数据由来（注意itemStatusChanged函数）


  
  

   
   
 @Override
	protected void onCreate(Bundle savedInstanceState) {
		// ......省略之前代码
		
		mListView.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> arg0, View v, int pos,
					long arg3) {
				Log.d(TAG, "onItemClick");
				
				// 重点在这里，用户点击了某个item后，记录当前item的状态
				itemStatusChanged(pos);
				
				View footer = v.findViewById(R.id.footer);
				footer.startAnimation(new ViewExpandAnimation(footer));
			}
		});


  
  // ......省略之后代码
}

step4: itemStatusChanged的实现

 private void itemStatusChanged(int pos){
		Log.d(TAG, "[itemStatusChanged] pos = " + pos);
		for(int i = 0; i < mOpenItem.size(); i ++){
			int ipos = mOpenItem.get(i);
			if(ipos == pos){
				mOpenItem.remove(i);
				return;
			}
		}
		mOpenItem.add(pos);
	}
mOpenItem计算当前所点击的item是否已经记录，记录则去除（表明为用户关闭状态），反之则添加（表明为用户点开状态）。


 

第二个问题：“限制同时仅有一个item被打开状态。比如item0 打开，点击item1，那么item1打开的同时item0收回”

这个问题，只需要在第一个问题上，稍微修改即可：

step1: 在onCreate中，对ListView的Item点击中修改


  
  

   
   
 @Override
	protected void onCreate(Bundle savedInstanceState) {
		// ......省略之前代码
		
		mListView.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> arg0, View v, int pos,
					long arg3) {
				Log.d(TAG, "onItemClick");
				
				// 重点在这里，用户点击了某个item后，记录当前item的状态
				// itemStatusChanged(pos);
				
				// 重点在这里，用户点击了某个item后，记录当前item的状态，
				// 并将之前已经打开的item关闭
				itemStatusReset(pos);
				
				View footer = v.findViewById(R.id.footer);
				footer.startAnimation(new ViewExpandAnimation(footer));
			}
		});


  
  // ......省略之后代码
}

上面，将之前添加的代码注释掉，添加一个新的函数叫：itemStatusReset，其实现如下


  
  

   
   
    
    

     
     
	private void itemStatusReset(int pos){
		boolean bRecord = true;
		for(int i = 0; i < mOpenItem.size(); i ++){
			int ipos = mOpenItem.get(i);
			if(ipos == pos){
				bRecord = false;
			}else{
				View childItem = mListView.getChildAt(ipos);
				View footer = childItem.findViewById(R.id.footer);
				footer.startAnimation(new ViewExpandAnimation(footer));
			}
		}
		mOpenItem.clear();
		if(bRecord){
			mOpenItem.add(pos);
		}
	}

在这个函数中，其循环的作用就是，如果有多个打开，则一个一个的去关闭，如果点击的那个也打开了，当然也是关闭。

以上两个问题，都自测过，没发现问题。

问问是我
关注
点击listview的item，带动画效果的展开详情（二）
u014620028的专栏
11-14 1981
点击listview的item，带动画效果的展开详情
Android—ListView Item 展开动画效果
热门推荐
ghd2000的专栏
08-14 1万+
Android—ListView Item 展开动画效果 最近在做一个关于ListView item的展开效果，类似于 “粮仓” App 的商店页面，点击Item，展开显示子View，类似于ExpandableListView。如图： 其实原理大家都能够猜的到，就是在Adapter里控制子View的显示与隐藏，其实这个东西看起来挺简单的，做起来，还真是费了一点功夫，其中还遇到不少知识点。
ListView 的item展开完整显示的demo
05-21
本demo使用ListView展示子项Item，子项里面包含多个内容，默认只显示主要信息，其他部分隐藏，在点击后展开。对于顶部或底部显示不全的Item，进行自动滑动展示完全。并对于子项中是否有按钮的两种情况，都进行了实现。 更详细的说明，参见相关博客： http://blog.youkuaiyun.com/lintax/article/details/72598805
android的ListView点击item使item展开的做法
baidu_nod的专栏
08-16 8462
直接上代码把，主要是重新给item measure高度，直接上代码把 import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.MotionEvent; import andr
ListView页脚动画应用技巧与展开收起效果
1. ListView的概述：ListView是Android开发中常用的一个视图组件，它用于以列表的形式显示数据。它通常用于展示一个数据项的集合，并且每个数据项都可以定制为更复杂的布局。 2. ListView的FooterView：FooterView是...
实现ListView项展开动画效果的AppDemo
在Android应用开发中，ListView是一个常用的组件，它用于以垂直滚动列表的形式展示信息。通常情况下，每个列表项（item）可能是一个文本、图片或其他类型的视图组合。对于用户界面的设计而言，增强用户体验是至关...
实现listView项点击展开功能的详细教程
ListView的item展开和收起机制通常是指在item中嵌入可以展开的视图元素，如子列表、布局或更详细的信息描述等。当点击item时，展开内部嵌入的内容；再次点击，收起展开的内容。实现这种机制通常需要结合视图切换的...
实现ListView与GridView嵌套交互的展开折叠效果
以上知识点综合起来，描述了如何在一个ListView的每一个item中嵌套一个GridView，并且在数据量过多时实现点击展开与折叠的效果，同时还说明了实现这一功能的关键技术要点，包括数据分段、动态更新和动画效果的实现等...
实现ListView的分组显示、可展开与滑动功能
接下来，我们将详细介绍如何在Android中实现一个带有分组显示、可展开分组和每个item可左右滑动的ListView。 ### ListView 分组显示 分组显示是指在ListView中，将具有相同特征的数据项归纳到一个共同的组别中。在...
android动画实现ListView折叠展开
04-03
点击header展开listview，再次点击收起listview，过程采用android原生动画实现。
expandablelistview展开折叠(收缩)动画效果
01-21
http://download.youkuaiyun.com/detail/chen_dl/8383145#comment这个是我上传的在github下载的库，库里没有告诉大家该怎么用，所以我上传了自己实现的demo.跟大家一起分享我的成果，这种折叠和展开的动画效果在国内的网站没有找到demo。所以我觉得我把分要高一点也是合情合理的。毕竟是我辛苦的成果
Recyclerview常用样式，动画，点击事件
07-11
Recyclerview是v7包中的一个新控件，挺好用的，这个例子主要实现了Recyclerview的ListView横竖屏滑动，GridView的横竖屏滑动，瀑布流横竖屏，添加删除条目动画，设置点击事件和长按事件
[笔记] ListView项展开动画例子
daweizhou89的专栏
08-14 754
代码来源: [Android源码]DeskClock/com.android.deskclock.AlarmClockFragment 源码版本: 4.4.2 /**  * Expands the alarm for editing.  *  * @param itemHolder The item holder instance.  */ private void expan
点击listview的item，带动画效果的展开详情（一）
u014620028的专栏
11-14 3939
点击listview的item，带动画效果的展开详情
安卓 recyclerview展开收起动画类似ExpandListView
君无意的博客
11-14 2134
最近项目有个需求列表中有一个item的一部分（课表部分）是可以展开收起的，但是要有动画效果。最终实现的效果如下： 一个看似很简单的动画效果，我试了多种动画方案，最终成功达到了这个收起展开的动画。最终的方案很简单，就是在未展开时设置课表这个布局初始高度设0，然后开启一个高度从0变化到实际高度的属性动画，而收起动画则...
从布局动画引入ListView滑动时，每一Item项的显示动画
Smile Eyes之博客
01-28 1419
1、LayoutAnimation       所谓的布局动画，其实就是为ViewGroup添加显示动画效果，主要用过LayoutAnimationController来控制实现。LayoutAnimationController用于为一个Layout里面的控件，或者是一个ViewGroup里面的控件设置动画效果，可以在XML文件中设置，亦可以在Java代码中设置。  1.1 在XML文件中
listview点击实现帧动画平移放大
生如夏花的博客
08-08 404
public class MainActivity extends AppCompatActivity { private ListView listview; private ImageView image1; private ImageView image2; private ListString> list; @Override protect
Android缩放动画[ScaleAnimation]
weixin_30407613的博客
03-06 219
1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 setContentView(R.layout.activity_main); 5 6 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值