1、概述
群里的一个哥们有个需求是这样的：问题；主要功能就是：1、循环的一个滑动；2、每次滑动结束，保持每个Item的完整。然后我当时给他写了个Demo，所有代码都在Activity里面，后期看来其太恶心了，修改也不方便；貌似那哥们还因为那代码修改到12点，大大的赞一下这哥们的毅力，也深表歉意，今天特意把代码抽取成自定义的ScrollView，然后提供一些回调出来；
本博客首先介绍使用自定义的ScrollView解决上面的问题，然后自定义ListView实现每次拖动完成后保持每个Item的完整；
关于横向滑动可以参考：
Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果
Android 自定义RecyclerView 实现真正的Gallery效果
横向和纵向很类似哈，一个改写HorizontalScrollView，一个是ScrollView；一个改写ListView，一个是RecyclerView；不多具体需求还是有出入的，大家如果有这方面需求可以借鉴。关于横向有同学问如何保证滑动结束实现单个Item完整，可以参考今天纵向的代码。
2、自定义ScrollView实现循环Item拖动
现展示下效果图，然后讲解下原理，最后分析下代码~三部曲~
1、效果图：
2、实现的原理
a、根据用户提供的Adapter(主要就两个方法，getCount【决定多少个Item】,getView【每个Item的样子】)，根据getCount我会在初始化时，在ScrollView内部LinearLayout中添加对应数量的Item，当然也会根据数量平分屏幕高度；
b、监听onTouch方法，当用户触发ACTION_MOVE时，屏幕跟随用户手指上面移动，当达到顶部时，会动态为顶部添加一个Item，同时移除底部最后一个Item；用户滑动到达底部也一样，底部动态添加一个Item，顶部第一个移除；ScrollView内会始终维持用户指定数量+1个Item，为什么加1呢，因为拖动过程中最多会显示+1个Item（第一个一半，最后一个一半）
c、监听ACTION_UP，判断如果当然显示小于半个，缩回去；大于半个则慢慢显示出完整的Item;
3、代码分析
首先我们定义一个Adapter，用户给用户设置每个Item的样子以及个数；类似ListView的Adapter
[java]view plaincopy/** *适配器 *@authorzhy * */ publicstaticabstractclassAdapter { publicabstractViewgetView(SingleItemScrollViewparent,intpos); publicabstractintgetCount(); }
构造方法中得到屏幕的高度[java]view plaincopypublicSingleItemScrollView(Contextcontext,AttributeSetattrs) { super(context,attrs); //计算屏幕的高度 WindowManagerwm=(WindowManager)context .getSystemService(Context.WINDOW_SERVICE); DisplayMetricsoutMetrics=newDisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); mScreenHeight=outMetrics.heightPixels; mScreenHeight-=getStatusHeight(context); }
onMeasure中对Item进行添加，以及设置高度[java]view plaincopy@Override protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) { //防止多次调用 if(!flag) { mContainer=(ViewGroup)getChildAt(0); //根据Adapter的方法，为容器添加Item if(mAdapter!=null) { mItemCount=mAdapter.getCount(); mItemHeight=mScreenHeight/mItemCount; mContainer.removeAllViews(); for(inti=0;i<mAdapter.getCount();i++) { addChildView(i); } } addChildView(0); } super.onMeasure(widthMeasureSpec,heightMeasureSpec); } /** *在容器末尾添加一个Item *@parami */ privatevoidaddChildView(inti) { Viewitem=mAdapter.getView(this,i); //设置参数 android.view.ViewGroup.LayoutParamslp=newViewGroup.LayoutParams( android.view.ViewGroup.LayoutParams.MATCH_PARENT,mItemHeight); item.setLayoutParams(lp); //设置Tag item.setTag(i); //添加事件 item.setOnClickListener(this); mContainer.addView(item); }
接下来就是复写onTouchEvent[java]view plaincopy@Override publicbooleanonTouchEvent(MotionEventev) { flag=true; intaction=ev.getAction(); intscrollY=getScrollY(); switch(action) { caseMotionEvent.ACTION_MOVE: Log.e("TAG","scrollY="+scrollY); //表示此时ScrollView的顶部已经达到屏幕顶部 if(scrollY==0) { addChildToFirst(); } //ScrollView的顶部已经到达屏幕底部 if(Math.abs(scrollY-mItemHeight)<=mItemCount) { addChildToLast(); } break; caseMotionEvent.ACTION_UP: checkForReset(); returntrue; default: break; } returnsuper.onTouchEvent(ev); } /** *在底部添加一个View，并移除第一个View */ privatevoidaddChildToLast() { Log.e("TAG","addChildToLast"); intpos=(Integer)mContainer.getChildAt(1).getTag(); addChildView(pos); mContainer.removeViewAt(0); this.scrollTo(0,0); } /** *在顶部添加一个View，并移除最后一个View */ protectedvoidaddChildToFirst() { Log.e("TAG","addChildToFirst"); intpos=(Integer)mContainer.getChildAt(mItemCount-1).getTag(); addChildView(pos,0); mContainer.removeViewAt(mContainer.getChildCount()-1); this.scrollTo(0,mItemHeight); } /** *检查当前getScrollY,显示完成Item，或者收缩此Item */ privatevoidcheckForReset() { intval=getScrollY()%mItemHeight; if(val>=mItemHeight/2) { smoothScrollTo(0,mItemHeight); }else { smoothScrollTo(0,0); } } 可以看到ACTION_MOVE中我们只判断是否到达顶部或者底部；
if (Math.abs(scrollY - mItemHeight) <= mItemCount)这样的判断，主要是因为，担心用户设置的个数拿屏幕的高度来除并不是整除的，整数除整数难免有个四舍五入什么的，所以我设置了一个小的范围；
当到达顶部的时候，顶部其实已经没有Item了，此时我们为顶部添加一个Item，同时移除底部的最后一个；并且我们需要将scrollY移动到未添加前的位置；给用户一个无缝添加的体验；
到达底部同理了~
当ACTION_UP的时候，我们对当前的scrollY进行检查，如果对Item高度取余后小于Item的高度的一半，小于Item的高度的一半意味中隐藏部分是小于一般的，而显示部分是大于一半的，于是我们smoothScrollTo(0, 0);把完整的Item显示出来；反之则反之；
取余以后得到的值其实去超出屏幕的部分，也就是隐藏的部分，它要是大于一半，那么显示部分就小于一半；反之则反之；
MainActivity中用户的使用
[java]view plaincopypackagecom.example.zhy_wangandroid_hownoon; importjava.util.ArrayList; importjava.util.Arrays; importjava.util.List; importandroid.app.Activity; importandroid.graphics.Color; importandroid.os.Bundle; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.Window; importandroid.widget.ImageView; importandroid.widget.Toast; importcom.example.zhy_wangandroid_hownoon.SingleItemScrollView.Adapter; importcom.example.zhy_wangandroid_hownoon.SingleItemScrollView.OnItemClickListener; publicclassMainActivityextendsActivity { privateSingleItemScrollViewmScrollView; privateAdaptermAdapter; privateLayoutInflatermInflater; privateList<Bean>mDatas=newArrayList<Bean>(Arrays.asList(// newBean(R.drawable.icon_about,Color.rgb(123,34,45)),// newBean(R.drawable.icon_map,Color.rgb(12,34,145)),// newBean(R.drawable.icon_message,Color.rgb(177,234,145)),// newBean(R.drawable.icon_oil,Color.rgb(88,134,145))// )); @Override protectedvoidonCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); mInflater=LayoutInflater.from(this); mScrollView=(SingleItemScrollView)findViewById(R.id.id_scrollview); mAdapter=newAdapter() { @Override publicViewgetView(SingleItemScrollViewparent,intpos) { Viewview=mInflater.inflate(R.layout.item,null); ImageViewiv=(ImageView)view.findViewById(R.id.id_title); iv.setImageResource(mDatas.get(pos).getResId()); view.setBackgroundColor(mDatas.get(pos).getColor()); returnview; } @Override publicintgetCount() { return4; } }; mScrollView.setAdapter(mAdapter); mScrollView.setOnItemClickListener(newOnItemClickListener() { @Override publicvoidonItemClick(intpos,Viewview) { Toast.makeText(getApplicationContext(),pos+"", Toast.LENGTH_SHORT).show(); } }); } }
用户拿到控件，设置Adapter，在getView里面设置数据以及决定Item的样子；提供一个setOnItemClickListener的回调，供用户设置点击每个Item的处理；和ListView的使用风格基本是一致的；
4、布局文件
主布局文件：
[html]view plaincopy<ScrollViewxmlns:android="/apk/res/android" xmlns:tools="/tools" android:id="@+id/id_scrollview" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/id_container" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </ScrollView>
Item的布局[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <LinearLayoutxmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:gravity="center"> <ImageView android:id="@+id/id_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitCenter" android:src="@drawable/icon_about"/> </LinearLayout>
3、自定义ListView使用滑动结束完整显示Item
1、效果图：
2、实现原理
先分析一下：
想要结束显示完整的，那么有个前提是，你的Item初始化一屏幕的时候应该刚好是固定数量完整的Item；
这样，就需要一个参数指定一屏幕显示多少个Item；同时会根据Item数量为每个Item设置高度；
存在一个问题，Item布局是在Adapter中设置的，也就是说，我们必须在getView中设置这个高度，但是这个高度实在ListView中计算的，所以对外公布出这个高度；
最后无非就是监听滚动结束后，判断当前显示是否是完整的，如果是则，如果不是则；
3、实现代码
a、自定义属性
[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <resources> <attrname="itemCount"format="integer"/> <declare-styleablename="MyListView"> <attrname="itemCount"/> </declare-styleable> </resources>
很简单就一个属性；
b、布局文件：
[html]view plaincopy<LinearLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" xmlns:zhy="/apk/res/com.example.zhy_wangandroid_hownoon" android:id="@+id/id_scrollview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <com.example.zhy_wangandroid_hownoon.MyListView android:id="@+id/id_lv" android:layout_width="fill_parent" android:layout_height="wrap_content" android:divider="@null" zhy:itemCount="8"> </com.example.zhy_wangandroid_hownoon.MyListView> </LinearLayout>
c、MyListView[java]view plaincopypackagecom.example.zhy_wangandroid_hownoon; importandroid.content.Context; importandroid.content.res.TypedArray; importandroid.util.AttributeSet; importandroid.util.DisplayMetrics; importandroid.util.Log; importandroid.view.WindowManager; importandroid.widget.AbsListView; importandroid.widget.AbsListView.OnScrollListener; importandroid.widget.ListView; publicclassMyListViewextendsListViewimplementsOnScrollListener { privatestaticfinalStringTAG=MyListView.class.getSimpleName(); /** *每个屏幕显示多少个Item */ privateintmItemCountInOneScreen; /** *每个Item的高度 */ privateintmItemHeight; /** *记录第一个显示的Item */ privateintmFirstVisibleItem; publicMyListView(Contextcontext,AttributeSetattrs) { this(context,attrs,0); } /** *构造方法中拿到自定义属性ItemCount，计算每个Item高度 *@paramcontext *@paramattrs *@paramdefStyle */ publicMyListView(Contextcontext,AttributeSetattrs,intdefStyle) { super(context,attrs,defStyle); WindowManagerwm=(WindowManager)context .getSystemService(Context.WINDOW_SERVICE); DisplayMetricsoutMetrics=newDisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); //获取MyListView_itemCount TypedArraya=context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyListView,defStyle,0); intn=a.getIndexCount(); for(inti=0;i<n;i++) { intattr=a.getIndex(i); switch(attr) { caseR.styleable.MyListView_itemCount: mItemCountInOneScreen=a.getInt(attr,6); break; } } a.recycle(); //计算每个Item高度 mItemHeight=(outMetrics.heightPixels-getStatusHeight(context)) /mItemCountInOneScreen; //设置一个滚动监听 setOnScrollListener(this); Log.e(TAG,mItemCountInOneScreen+""); } @Override publicvoidonScrollStateChanged(AbsListViewview,intscrollState) { //滚动结束 if(scrollState==OnScrollListener.SCROLL_STATE_IDLE) { //Log.e(TAG,getChildAt(0).getTop()+"getTop()"); Log.e(TAG,mFirstVisibleItem+"SCROLL_STATE_IDLE"); //获取第一个Item的top inttop=getChildAt(0).getTop(); if(top==0) return; //绝对值不为0时，如果绝对值大于mItemHeight的一半，则收缩，即显示下一个Item if(Math.abs(top)>mItemHeight/2) { this.setSelection(mFirstVisibleItem+1); //this.scrollTo(x,y) //smoothScrollToPosition(mFirstVisibleItem-1); //scrollBy(0,mItemHeight-Math.abs(top)); //smoothScrollBy(mItemHeight-Math.abs(top),200); }else//绝对值不为0时，如果绝对值小于于mItemHeight的一半，则展开，显示当前完整的Item { this.setSelection(mFirstVisibleItem); //this.scrollTo(x,y) //smoothScrollBy(-Math.abs(top),200); //smoothScrollByOffset(offset); //scrollBy(0,-Math.abs(top)); //smoothScrollToPosition(mFirstVisibleItem); } //smoothScrollToPosition(mFirstVisibleItem); } } /** *滚动过程中不断记录当前显示的第一个Item */ @Override publicvoidonScroll(AbsListViewview,intfirstVisibleItem, intvisibleItemCount,inttotalItemCount) { mFirstVisibleItem=firstVisibleItem; //Log.e(TAG,mFirstVisibleItem+""); } /** *对外公布每个Item的高度 *@return */ publicintgetItemHeight() { returnmItemHeight; } /** *获得状态栏的高度 * *@paramcontext *@return */ publicintgetStatusHeight(Contextcontext) { intstatusHeight=-1; try { Class<?>clazz=Class.forName("com.android.internal.R$dimen"); Objectobject=clazz.newInstance(); intheight=Integer.parseInt(clazz.getField("status_bar_height") .get(object).toString()); statusHeight=context.getResources().getDimensionPixelSize(height); }catch(Exceptione) { e.printStackTrace(); } returnstatusHeight; } }
代码比较少，也比较简单，大家可以关注下，我在onScrollStateChanged注释掉的那些方法，原则上说每一个应该都能实现；但是我最终选择了setSelection(mFirstVisibleItem);有兴趣的可以拿别的方法试试；
d、MainActivity中
[java]view plaincopypackagecom.example.zhy_wangandroid_hownoon; importjava.util.ArrayList; importjava.util.List; importjava.util.Random; importcom.monAdapter; importcom.zhy.utils.ViewHolder; importandroid.app.Activity; importandroid.graphics.Color; importandroid.os.Bundle; importandroid.view.View; importandroid.view.ViewGroup; importandroid.view.Window; publicclassMainActivityextendsActivity { privateMyListViewmListView; privateCommonAdapter<String>mAdapter; privateList<String>mDatas; @Override protectedvoidonCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); mListView=(MyListView)findViewById(R.id.id_lv); initDatas(); initViews(); } privatevoidinitViews() { mListView=(MyListView)findViewById(R.id.id_lv); mAdapter=newCommonAdapter<String>(this,mDatas,R.layout.item) { @Override publicvoidconvert(ViewHolderhelper,Stringitem) { ViewconvertView=helper.getConvertView(); convertView.setBackgroundColor(Color.rgb( newRandom().nextInt(255),newRandom().nextInt(255), newRandom().nextInt(255))); ViewGroup.LayoutParamslp=convertView.getLayoutParams(); lp.height=mListView.getItemHeight(); convertView.setLayoutParams(lp); helper.setText(R.id.id_title,item); } }; mListView.setAdapter(mAdapter); } privatevoidinitDatas() { mDatas=newArrayList<String>(); for(inti='A';i<='Z';i++) { mDatas.add(String.valueOf((char)+i)); } } }
使用就没撒说的了，我用了我们之前封装的CommonAdapter，如果不了解可以参考：Android 快速开发系列 打造万能的ListView GridView 适配器；如果看不惯自行改成传统的Adapter，相信大家应该没问题~
还有些需求是这样的，既要满足每次停止显示完整的Item，还希望即使用户给了个加速度，在用户抬起手指时，不会自动的滚动；
4、ListView显示完整Item，屏蔽自动滚动
这个比较容易了，只需要复写onTouchEvent方法，然后在ACTION_UP后，进行检查是显示/影藏当前Item，然后return true;
[java]view plaincopy@Override publicbooleanonTouchEvent(MotionEventev) { intaction=ev.getAction(); if(action==MotionEvent.ACTION_UP) { checkForReset(); returntrue; } returnsuper.onTouchEvent(ev); } @Override publicvoidonScrollStateChanged(AbsListViewview,intscrollState) { //滚动结束 if(scrollState==OnScrollListener.SCROLL_STATE_IDLE) { checkForReset(); } } 关键代码如上，其他所有代码和上例一致；
效果图:
好了，就介绍到这了；
源码点击下载
