开源学习--SlideExpandableListView中的列表项动画实现框架分析

前面的话

开源项目Android-SlideExpandableListView是一个简单的介绍列表项动画展示的小型项目，分析这个项目可以对自定义框架及列表类动画实现有个比较清晰的认识，工作中中时常根据需求扩展定义自己的适配器，虽然具体需求不同，但架构类似，本文把最近关于该开源项目的研究心得整理分享，共同学习~

项目简介

github地址https://github.com/tjerkw/Android-SlideExpandableListView

这是个入门级的列表项动画展示框架，实现效果如下

当点击more按钮时，对应列表项展示下拉动画，将含有两个按钮的扩展布局显示或隐藏，其自定义的动画效果比android自带的expandlistview要好一些。更详细的项目简介请参考http://a.code4app.com/android/SlideExpandableListView/524507cd6803faeb7e000000。顺带推荐code4App这个网站，本来是专为ios开发者的优秀开源项目分享平台，口号就是避免重复造轮子，现在有个android版本的http://a.code4app.com/，感兴趣的同学可自行检索。

代码实现

这个项目的实现思路分成以下几步

1） 封装一个基本的列表适配器

2） 为封装适配器添加新功能（如动画显示/收缩） --》CSDN博客编辑器从此往下无法高亮及设置标题。

3） 使用动画展示或隐藏列表项下拉布局

4） 用户设置扩展布局中的控件监听器（即含有两个按钮的初始隐藏布局）

5） 扩展使用2中的适配器，可自定义扩展布局及控件id，并为其绑定方法。

1） 封装一个基本的列表适配器。

封装适配器WrapperListAdapterImpl.java （本文列出代码为核心实现代码，利于文章整理讲解，非项目全部代码，如需阅读全部代码可在github上自行下载，下同）

<span style="font-family:KaiTi_GB2312;font-size:18px;">    
public abstract class WrapperListAdapterImpl extends BaseAdapter implements WrapperListAdapter {
	protected ListAdapter wrapped;

	public WrapperListAdapterImpl(ListAdapter wrapped) {
		this.wrapped = wrapped;
	}

	@Override
	public ListAdapter getWrappedAdapter() {
		return wrapped;
	}

	@Override
	public boolean areAllItemsEnabled() {
		return wrapped.areAllItemsEnabled();
	}

	@Override
	public boolean isEnabled(int i) {
		return wrapped.isEnabled(i);
	}

	@Override
	public void registerDataSetObserver(DataSetObserver dataSetObserver) {
		wrapped.registerDataSetObserver(dataSetObserver);
	}

	@Override
	public void unregisterDataSetObserver(DataSetObserver dataSetObserver) {
		wrapped.unregisterDataSetObserver(dataSetObserver);
	}

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

	@Override
	public Object getItem(int i) {
		return wrapped.getItem(i);
	}

	@Override
	public long getItemId(int i) {
		return wrapped.getItemId(i);
	}

	@Override
	public boolean hasStableIds() {
		return wrapped.hasStableIds();
	}

	@Override
	public View getView(int position, View view, ViewGroup viewGroup) {
		return wrapped.getView(position, view, viewGroup);
	}

	@Override
	public int getItemViewType(int i) {
		return wrapped.getItemViewType(i);
	}

	@Override
	public int getViewTypeCount() {
		return wrapped.getViewTypeCount();
	}

	@Override
	public boolean isEmpty() {
		return wrapped.isEmpty();
	}
}</span>

这个封装过程是进行适配器功能扩展最基本的一步，WrapperListAdapterImpl 封装了一个ListAdapter并将其作为自己的一个实例域wrapped，而重写的每个方法仅仅是简单使用委托的方式，让被委托对象wrapped来实现，这种封装形式在Android框架层源码中也经常被用到（如ContextWrapper），这样做的好处是能够让子类扩展被封装对象的某些特性而不会引起其它变化，以本文为例，单独使用WrapperListAdapterImpl没有任何意义，但如果我们想创建一个SlideAdapter，这个适配器会扩展普通ListAdapter的功能，实现滑动动画效果，那么WrapperListAdapterImpl就是很好的抽象基类了。

2） 为封装适配器添加新功能（如动画显示/收缩） AbstractSlideExpandableListAdapter.java

//这个是前述封装适配器后做的最重要的扩展，通过重写getView方法，定义需要的动画展示行为
	@Override
	public View getView(int position, View view, ViewGroup viewGroup) {
		view = wrapped.getView(position, view, viewGroup); //使用被封装适配器的getView方法获得列表项视图，
														  //被封装的原始适配器提供view，这可供扩展新的特性，如本文中的动画
		enableFor(view, position);   //扩展动画功能
		return view;
	}

	public void enableFor(View parent, int position) {
		View more = getExpandToggleButton(parent);        //获得more点击按钮
		View itemToolbar = getExpandableView(parent);     //获得动画显示/隐藏的布局
		itemToolbar.measure(parent.getWidth(), parent.getHeight()); 

		enableFor(more, itemToolbar, position); // 增加动画展示功能
	}

	private void enableFor(final View button, final View target, final int position) {
		if(target == lastOpen && position!=lastOpenPosition) {
			// lastOpen is recycled, so its reference is false
			lastOpen = null;
		}
		if(position == lastOpenPosition) {
			// re reference to the last view
			// so when can animate it when collapsed
			lastOpen = target;
		}
		int height = viewHeights.get(position, -1);
		if(height == -1) {
			viewHeights.put(position, target.getMeasuredHeight());
			updateExpandable(target,position);
		} else {
			updateExpandable(target, position);
		}

		//为more按钮设置监听方法，动画显示/隐藏扩展布局
		button.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(final View view) {

				Animation a = target.getAnimation();

				if (a != null && a.hasStarted() && !a.hasEnded()) {

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

						@Override
						public void onAnimationEnd(Animation animation) {
							view.performClick();
						}

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

				} else {

					target.setAnimation(null);

					int type = target.getVisibility() == View.VISIBLE
							? ExpandCollapseAnimation.COLLAPSE
							: ExpandCollapseAnimation.EXPAND;

					// remember the state
					if (type == ExpandCollapseAnimation.EXPAND) {
						openItems.set(position, true);
					} else {
						openItems.set(position, false);
					}
					// check if we need to collapse a different view
					if (type == ExpandCollapseAnimation.EXPAND) {
						if (lastOpenPosition != -1 && lastOpenPosition != position) {
							if (lastOpen != null) {
								animateView(lastOpen, ExpandCollapseAnimation.COLLAPSE);
							}
							openItems.set(lastOpenPosition, false);
						}
						lastOpen = target;
						lastOpenPosition = position;
					} else if (lastOpenPosition == position) {
						lastOpenPosition = -1;
					}
					animateView(target, type); //具体的执行显示/隐藏动画的方法
				}
			}
		});
	}

	private void updateExpandable(View target, int position) {

		final LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)target.getLayoutParams();
		if(openItems.get(position)) {
			target.setVisibility(View.VISIBLE);
			params.bottomMargin = 0;
		} else {
			target.setVisibility(View.GONE);
			params.bottomMargin = 0-viewHeights.get(position);
		}
	}

	/**
	 * 执行隐藏/显示动画的具体实现，依赖于ExpandCollapseAnimation动画工具类
	 * Performs either COLLAPSE or EXPAND animation on the target view
	 * @param target the view to animate
	 * @param type the animation type, either ExpandCollapseAnimation.COLLAPSE
	 *			 or ExpandCollapseAnimation.EXPAND
	 */
	private void animateView(final View target, final int type) {
		Animation anim = new ExpandCollapseAnimation(
				target,
				type
		);
		anim.setDuration(getAnimationDuration());
		target.startAnimation(anim);
	}</span>

3）使用动画展示或隐藏列表项下拉布局ExpandCollapseAnimation.java

这个是扩展/缩放动画的工具类，上文已经看到，animateView方法通过设置这个动画类来完成需要的操作。

<span style="font-family:KaiTi_GB2312;font-size:18px;">   	
public class ExpandCollapseAnimation extends Animation {
	private View mAnimatedView;
	private int mEndHeight;
	private int mType;
	public final static int COLLAPSE = 1;
	public final static int EXPAND = 0;
	private LinearLayout.LayoutParams mLayoutParams;

	/**
	 * Initializes expand collapse animation, has two types, collapse (1) and expand (0).
	 * @param view The view to animate
	 * @param type The type of animation: 0 will expand from gone and 0 size to visible and layout size defined in xml.
	 * 1 will collapse view and set to gone
	 */
	public ExpandCollapseAnimation(View view, int type) {

		mAnimatedView = view;
		mEndHeight = mAnimatedView.getMeasuredHeight();
		mLayoutParams = ((LinearLayout.LayoutParams) view.getLayoutParams());
		mType = type;
		if(mType == EXPAND) {

			mLayoutParams.bottomMargin = -mEndHeight;
		} else {

			mLayoutParams.bottomMargin = 0;
		}
		view.setVisibility(View.VISIBLE);
	}

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

		super.applyTransformation(interpolatedTime, t);
		if (interpolatedTime < 1.0f) {
			if(mType == EXPAND) {
				mLayoutParams.bottomMargin =  -mEndHeight + (int) (mEndHeight * interpolatedTime);
			} else {
				mLayoutParams.bottomMargin = - (int) (mEndHeight * interpolatedTime);
			}
			Log.d("ExpandCollapseAnimation", "anim height " + mLayoutParams.bottomMargin);
			mAnimatedView.requestLayout();
		} else {
			if(mType == EXPAND) {
				mLayoutParams.bottomMargin = 0;
				mAnimatedView.requestLayout();
			} else {
				mLayoutParams.bottomMargin = -mEndHeight;
				mAnimatedView.setVisibility(View.GONE);
				mAnimatedView.requestLayout();
			}
		}
	}
}
</span>

这个动画类实现了该开源项目的具体效果，根据当前是扩展还是缩放类型设置bottomMargin，动画时间已经在AbstractSlideExpandableListAdapter中定义，这个开源项目将动画实现放到一个单一的类中，符合单一职责原则，如果想要定义其它的动画效果或者形式，只需要修改这个动画类即可。

4） 用户设置扩展布局中的控件监听器 ExampleActivity.java

<span style="font-family:KaiTi_GB2312;font-size:18px;">   		
ActionSlideExpandableListView list = (ActionSlideExpandableListView)this.findViewById(R.id.list);

		// fill the list with data
		list.setAdapter(buildDummyData());

		// listen for events in the two buttons for every list item.
		// the 'position' var will tell which list item is clicked
		list.setItemActionListener(new ActionSlideExpandableListView.OnActionClickListener() {

			@Override
			public void onClick(View listView, View buttonview, int position) {

				/**
				 * Normally you would put a switch
				 * statement here, and depending on
				 * view.getId() you would perform a
				 * different action.
				 */
				String actionName = "";
				if(buttonview.getId()==R.id.buttonA) {
					actionName = "buttonA";
				} else {
					actionName = "ButtonB";
				}
				/**
				 * For testing sake we just show a toast
				 */
				Toast.makeText(
					ExampleActivity.this,
					"Clicked Action: "+actionName+" in list item "+position,
					Toast.LENGTH_SHORT
				).show();
			}

		// note that we also add 1 or more ids to the setItemActionListener
		// this is needed in order for the listview to discover the buttons
		}, R.id.buttonA, R.id.buttonB);

这个开源框架运行用户来定义扩展界面的两个按钮需要执行什么样的功能，正如所有框架层的控件一样，通过提供接口及绑定方式，用户来设置控件监听器，框架层要做的就是在扩展布局中的按钮被点击时，调用这些监听器中的方法即可。如下：

<span style="font-family:KaiTi_GB2312;font-size:18px;">	
public void setAdapter(ListAdapter adapter) {
		super.setAdapter(new WrapperListAdapterImpl(adapter) {

			@Override
			public View getView(final int position, View view, ViewGroup viewGroup) {
				final View listView = wrapped.getView(position, view, viewGroup);//得到封装的适配的列表项视图
				// add the action listeners
				if(buttonIds != null && listView!=null) {
					for(int id : buttonIds) {
						View buttonView = listView.findViewById(id);
						if(buttonView!=null) {
							buttonView.findViewById(id).setOnClickListener(new OnClickListener() {
								@Override
								public void onClick(View view) {
									if(listener!=null) {
										listener.onClick(listView, view, position); //当扩展视图上的按钮被点击时，调用用户
																				   //定义的监听器方法
									}
								}
							});
						}
					}
				}
				return listView;
			}
		});
	}</span>

ActionSlideExpandableListView用了一种比较巧妙的方式设置监听器，通过装饰者模式将普通的listadapter装饰成点击扩展区按钮就会调用用户监听器方法的adapter，这其中新建了一个封装类并重写getView,和添加动画效果职责一样，这次添加的职责是监听器调用，看看这像哪种模式？

5）扩展使用2中的适配器，可自定义扩展布局及控件id，并为其绑定方法。

SlideExpandableListAdapter是这个开源框架提供的一个自定义列表适配器，如前文所述，这个适配器扩展普通列表适配器并重写了getView方法，引入了动画相关类及控制参数，实现了点击more按钮时动画显示/隐藏扩展布局的功能。这个是整个开源项目想要实现的，作为框架库，这个可以运行用户自定义列表项布局和绑定扩展布局中的控件方法。

自定义列表项布局比较容易实现，因为SlideExpandableListAdapter已经实现了基本的动画功能，用户只需要自定义布局xml文件以及触发按钮（more按钮）及扩展视图的id即可。

<span style="font-family:KaiTi_GB2312;font-size:18px;">        
ListView list = ... your list view
        ListAdapter adapter = ... your list adapter
        // now simply wrap the adapter
        // and indicate the ids of your toggle button
        // and expandable view
        list.setAdapter(
            new SlideExpandableListAdapter(
                adapter,
                R.id.expandable_toggle_button,
                R.id.expandable
            )
        );</span>

绑定扩展布局中的控件方法这个暂时需要使用框架中提供的ActionSlideExpandableListView，这个自定义列表实现了用户绑定功能，只需要提供扩展视图中的控件id及对于绑定方法即可，如4中的设置方式，只是需要把R.id.buttonA, R.id.buttonB换成是自定义中的控件id即可。

项目结构

该开源项目中适配器的结构简图如下：

1）使用装饰者模式实现扩展动画功能。WrapperListAdapterImpl将普通适配器封装起来，其子类AbstractSlideExpandableListAdapter通过重写getView方法引入动画缩放效果并实现了具体的业务逻辑（如当展示第二项时前一个打开项会动画隐藏），可以说AbstractSlideExpandableListAdapter较普通的列表适配器添加了动画展示的功能，而两者又都是ListAdapter类型，这就解释了装饰者模式的特定，动态的为类对象添加职责，在exampleActivity中也可以看到，list.setAdapter(buildDummyData());列表传递了一个普通的ListAdapter，但通过listview的层层继承，这个普通的adapter已经被装饰成一个SlideExpandableListAdapter类型的适配器，这就告诉我们：想要一个新的自定义适配器控件，装饰原有普通控件是个简洁有效的方式。

2）使用模板方法模式完成视图检索。AbstractSlideExpandableListAdapter中有两个方法被定义成抽象方法，分别是getExpandToggleButton ：获取动画触发按钮 和 getExpandableView ：获取扩展视图，这个符合模板方法模式的思想，父类中的一些操作因具体情况不同留给子类去实现，稳定的算法骨架则在父类中，这两个方法在父类的enableFor方法中被顺序调用，子类SlideExpandableListAdapter实现具体的方式，通过子类来具体实现获得触发按钮和扩展视图，不同的子类有不同的实现方式，如果不需要使用该触发按钮，可以将返回视图设为空，则相当于禁止动画效果展示。

3）被封装的普通列表适配器有何作用。研究整个代码结构可以发现，被封装的普通适配器以实例域wrapped的方式，仅仅提供了自己的getview方法，也就是说普通适配器仅仅起到了提供原始列表项视图对象的作用，扩展的适配器则实现了对于该视图的绑定和增加动画特效的操作，普通适配器提供的视图是包含隐藏的扩展布局的，这个在普通适配器中已经配置好，AbstractSlideExpandableListAdapter所要做的是增加动画等相关特效而已。

除了上文提到的适配器架构，该开源项目的作者还是自定义了一些列的listview，如下图

这种自定义的listview结构体现了单一职责原则，SlideExpandableListView较普通的listview并没有太大区别，只是增加了通过点击item项来触发动画的功能，ActionSlideExpandableListView则更加纯粹，提供了接口并调用的方式，可以让用户为扩展界面的控件自由设置监听器，虽然这符合了单一职责原则，但是个人感觉这种隔离并不是非常必要，过度的分离反而容易造成逻辑上的混乱，对于一个自定义的SlideExpandableListView，直接为其添加监听器相关代码也是可以考虑的，一个自定义的列表视图有自己的监听器设置方式，并不一定要将其职责分离到子类，个人意见供参考。

适用场景扩展

这个小型开源项目比较好的展示了自定义适配器的框架结构和使用方式，场景可扩展至

1） 需要使用列表并自定义动画特效的场景

2） 需要使用适配器视图并自定义特效的场景

3） 需修改部分源Android框架控件并自定义特效功能的场景

4） 其它由MVC方式构建视图并可自定义扩展C部分的场景

小结

研究此类短小精悍结构清晰的开源项目有利于掌握框架设计技巧及模式识别的相关原则，SlideExpandableListView 这个项目不仅仅用到了上述提到的众多模式和原则，他在如何搭建自己的框架结构方面提供了参考，感谢作者tjerkw的分享精神及专业工作，有兴趣的朋友去点个star吧~。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

注：欢迎分享，转载请声明~~

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

开源学习--SlideExpandableListView中的列表项动画实现框架分析,布布扣,bubuko.com

时间： 2024-10-26 17:58:56

开源学习--SlideExpandableListView中的列表项动画实现框架分析的相关文章

获取列表中某一个文件夹下的列表项集合（不包含子文件夹对象，也不包含子文件夹中的列表项）

RT,方法如下: 1 SPListItemCollection GetSubItemsWithoutFoldersInParrentFolder(SPFolder parrent) 2 { 3 SPList list = parrent.Item.ParentList; 4 SPQuery query = new SPQuery(); 5 query.Folder = parrent; 6 query.Query = "<Where><Eq><FieldRef Na

Android系统中基于Binder的IPC流程框架分析

前言: Activity.Service.BroadcastReceiver.Content Provider是Android的四大应用程序组件,构成一个完整的应用程序的这些组件可以在同一个进程,也可以不在同一个进程,而当这些组件不在同一个进程,需要进行数据交互时就需要一种IPC(Inter-Process Communication)进程间通信机制来完成,而Binder就是提供了IPC功能的一个框架.实现IPC的整个Binder框架包含几个重要组成部分,它们分别是Binder Driver.C

如何让 WPF 中 ListBox 列表项前自动加上序号

有时候我们可以希望在 ListBox 列表项前面加上序号,这样看起来更清楚,还可以配合使用快捷键等. 希望达到如下图的效果: 显然我们可以通过修改 ListBox 的模板来实现,只要在 Item 中加上数字这一项即可,利用 MultiBinding 和 IMultiValueConverter 即可实现. 示例 首先,我们创建一个 Person 类: public class Person { public string Name { get; set; } } 然后创建一个 Converter

ol列表中的列表项不显示

在写CSS的时候我们习惯在头部写 *{ margin:0px; padding:0px; } 或者,引入reset.css文件中.但是这个文件中也有对常用元素的边距置零的设置: 原因就在这个地方,默认li的list-style-position:outside,但是padding-left为0,所以,列表项就没有地方可以显示,如果padding-left设置为30px左右的话,就可以看到:

Jquery mobile 中在列表项上使用单选按钮

? 无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/ ? ? ? ? ? ? ? ? 触类旁通,终于实现了在li上增加单选按钮组 ? @model QGateMobile.Areas.WG32.Models.SystemConfigModel @{ ????ViewBag.Title = "系统配置"; } @section Header { [email protected]("后退", "Ind

vue中的列表项删除操作

<script> Vue({ data: { orders: [] }, created() { $.get( { url: 'orders', dataType: 'json' }) .then( data => { this.orders = data; }); }, methods: { delete(index) { // 用索引删除 this.orders.splice(index, 1); }, deleteByID(id) { this.orders.splice(this

FreeRTOS高级篇1---FreeRTOS列表和列表项

FreeRTOS内核调度大量使用了列表(list)这一数据结构.我们如果想一探FreeRTOS背后的运行机制,首先遇到的拦路虎就是列表.对于FreeRTOS内核来说,列表就是它最基础的部分.我们在这一章集中讲解列表和列表项的结构以及操作函数,在下一章讲解任务创建时,会用到本章的知识点. 列表被FreeRTOS调度器使用,用于跟踪任务,处于就绪.挂起.延时的任务,都会被挂接到各自的列表中.用户程序如果有需要,也可以使用列表. FreeRTOS列表使用指针指向列表项.一个列表(list)下面可能有很

删除ListView中所有Item项

今天做项目遇到一个一键删除ListView中所有列表项的需求,这里自己记录一下. 刚开始的想法是将设置一个空的Adapter,让后将空的Adapter赋给ListView,但后来想想这样太麻烦了,就去寻找了一下官方时候给了这样的方法. 别说,还真的有类似的方法! ViewGroup类下面有一个removeAllViews()方法,看名字就很像,试了一下竟然不行! 报了这样的错误: removeAllViews() is not supported in AdapterView 竟然说这个不是给A

Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像QQ聊天列表一样,从上至下,列表项逐一加载(加载完第一项,再加载第二项,再加载第三项,给用户尽快的UI响应,也不至于等待到显示所有的列表项. 在我们的例子中,我还给每个列表项显示的过程中加入了渐显动画,这样当列表项足够复杂时,也能表现出比较好的展示效果. 实现的基本原理: 实现的原理也不难,主要的思路