Android 自己定义ScrollView ListView 体验各种纵向滑动的需求
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
/** * 适配器 * @author zhy * */ public static abstract class Adapter { public abstract View getView(SingleItemScrollView parent, int pos); public abstract int getCount(); }
构造方法中得到屏幕的高度
public SingleItemScrollView(Context context, AttributeSet attrs) { super(context, attrs); // 计算屏幕的高度 WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); mScreenHeight = outMetrics.heightPixels; mScreenHeight -= getStatusHeight(context); }
onMeasure中对Item进行加入,以及设置高度
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //防止多次调用 if (!flag) { mContainer = (ViewGroup) getChildAt(0); //依据Adapter的方法。为容器加入Item if (mAdapter != null) { mItemCount = mAdapter.getCount(); mItemHeight = mScreenHeight / mItemCount; mContainer.removeAllViews(); for (int i = 0; i < mAdapter.getCount(); i++) { addChildView(i); } } addChildView(0); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /** * 在容器末尾加入一个Item * @param i */ private void addChildView(int i) { View item = mAdapter.getView(this, i); //设置參数 android.view.ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams( android.view.ViewGroup.LayoutParams.MATCH_PARENT, mItemHeight); item.setLayoutParams(lp); //设置Tag item.setTag(i); //加入事件 item.setOnClickListener(this); mContainer.addView(item); }
接下来就是复写onTouchEvent
@Override public boolean onTouchEvent(MotionEvent ev) { flag = true; int action = ev.getAction(); int scrollY = getScrollY(); switch (action) { case MotionEvent.ACTION_MOVE: Log.e("TAG", "scrollY = " + scrollY); // 表示此时ScrollView的顶部已经达到屏幕顶部 if (scrollY == 0) { addChildToFirst(); } // ScrollView的顶部已经到达屏幕底部 if (Math.abs(scrollY - mItemHeight) <= mItemCount) { addChildToLast(); } break; case MotionEvent.ACTION_UP: checkForReset(); return true; default: break; } return super.onTouchEvent(ev); } /** * 在底部加入一个View,并移除第一个View */ private void addChildToLast() { Log.e("TAG", "addChildToLast"); int pos = (Integer) mContainer.getChildAt(1).getTag(); addChildView(pos); mContainer.removeViewAt(0); this.scrollTo(0, 0); } /** * 在顶部加入一个View。并移除最后一个View */ protected void addChildToFirst() { Log.e("TAG", "addChildToFirst"); int pos = (Integer) mContainer.getChildAt(mItemCount - 1).getTag(); addChildView(pos, 0); mContainer.removeViewAt(mContainer.getChildCount() - 1); this.scrollTo(0, mItemHeight); } /** * 检查当前getScrollY,显示完毕Item,或者收缩此Item */ private void checkForReset() { int val = 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中用户的使用
package com.example.zhy_wangandroid_hownoon; import java.util.ArrayList; import java.util.Arrays; import java.util.List; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import android.widget.ImageView; import android.widget.Toast; import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.Adapter; import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.OnItemClickListener; public class MainActivity extends Activity { private SingleItemScrollView mScrollView; private Adapter mAdapter; private LayoutInflater mInflater; private List<Bean> mDatas = new ArrayList<Bean>(Arrays.asList(// new Bean(R.drawable.icon_about, Color.rgb(123, 34, 45)),// new Bean(R.drawable.icon_map, Color.rgb(12, 34, 145)),// new Bean(R.drawable.icon_message, Color.rgb(177, 234, 145)),// new Bean(R.drawable.icon_oil, Color.rgb(88, 134, 145))// )); @Override protected void onCreate(Bundle savedInstanceState) { 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 = new Adapter() { @Override public View getView(SingleItemScrollView parent, int pos) { View view = mInflater.inflate(R.layout.item, null); ImageView iv = (ImageView) view.findViewById(R.id.id_title); iv.setImageResource(mDatas.get(pos).getResId()); view.setBackgroundColor(mDatas.get(pos).getColor()); return view; } @Override public int getCount() { return 4; } }; mScrollView.setAdapter(mAdapter); mScrollView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(int pos, View view) { Toast.makeText(getApplicationContext(), pos + "", Toast.LENGTH_SHORT).show(); } }); } }
用户拿到控件,设置Adapter,在getView里面设置数据以及决定Item的样子。提供一个setOnItemClickListener的回调,供用户设置点击每一个Item的处理。和ListView的使用风格基本是一致的。
4、布局文件
主布局文件:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/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的布局
<?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="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、自己定义属性
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="itemCount" format="integer" /> <declare-styleable name="MyListView"> <attr name="itemCount" /> </declare-styleable> </resources>
非常easy就一个属性。
b、布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:zhy="http://schemas.android.com/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
package com.example.zhy_wangandroid_hownoon; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.util.Log; import android.view.WindowManager; import android.widget.AbsListView; import android.widget.AbsListView.OnScrollListener; import android.widget.ListView; public class MyListView extends ListView implements OnScrollListener { private static final String TAG = MyListView.class.getSimpleName(); /** * 每一个屏幕显示多少个Item */ private int mItemCountInOneScreen ; /** * 每一个Item的高度 */ private int mItemHeight; /** * 记录第一个显示的Item */ private int mFirstVisibleItem; public MyListView(Context context, AttributeSet attrs) { this(context, attrs, 0); } /** * 构造方法中拿到自己定义属性ItemCount,计算每一个Item高度 * @param context * @param attrs * @param defStyle */ public MyListView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); //获取MyListView_itemCount TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyListView, defStyle, 0); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.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 public void onScrollStateChanged(AbsListView view, int scrollState) { //滚动结束 if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) { // Log.e(TAG, getChildAt(0).getTop() + " getTop()"); Log.e(TAG, mFirstVisibleItem + " SCROLL_STATE_IDLE"); //获取第一个Item的top int top = 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 public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { mFirstVisibleItem = firstVisibleItem; // Log.e(TAG, mFirstVisibleItem + ""); } /** * 对外发布每一个Item的高度 * @return */ public int getItemHeight() { return mItemHeight; } /** * 获得状态栏的高度 * * @param context * @return */ public int getStatusHeight(Context context) { int statusHeight = -1; try { Class<?> clazz = Class.forName("com.android.internal.R$dimen"); Object object = clazz.newInstance(); int height = Integer.parseInt(clazz.getField("status_bar_height") .get(object).toString()); statusHeight = context.getResources().getDimensionPixelSize(height); } catch (Exception e) { e.printStackTrace(); } return statusHeight; } }
代码比較少。也比較简单,大家能够关注下。我在onScrollStateChanged凝视掉的那些方法,原则上说每一个应该都能实现;可是我终于选择了setSelection(mFirstVisibleItem);有兴趣的能够拿别的方法试试;
d、MainActivity中
package com.example.zhy_wangandroid_hownoon; import java.util.ArrayList; import java.util.List; import java.util.Random; import com.zhy.utils.CommonAdapter; import com.zhy.utils.ViewHolder; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; public class MainActivity extends Activity { private MyListView mListView; private CommonAdapter<String> mAdapter; private List<String> mDatas; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); mListView = (MyListView) findViewById(R.id.id_lv); initDatas(); initViews(); } private void initViews() { mListView = (MyListView) findViewById(R.id.id_lv); mAdapter = new CommonAdapter<String>(this, mDatas, R.layout.item) { @Override public void convert(ViewHolder helper, String item) { View convertView = helper.getConvertView(); convertView.setBackgroundColor(Color.rgb( new Random().nextInt(255), new Random().nextInt(255), new Random().nextInt(255))); ViewGroup.LayoutParams lp = convertView.getLayoutParams(); lp.height = mListView.getItemHeight(); convertView.setLayoutParams(lp); helper.setText(R.id.id_title, item); } }; mListView.setAdapter(mAdapter); } private void initDatas() { mDatas = new ArrayList<String>(); for (int i = '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;
@Override public boolean onTouchEvent(MotionEvent ev) { int action = ev.getAction(); if (action == MotionEvent.ACTION_UP) { checkForReset(); return true; } return super.onTouchEvent(ev); } @Override public void onScrollStateChanged(AbsListView view, int scrollState) { // 滚动结束 if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) { checkForReset(); } }关键代码如上,其它全部代码和上例一致。
效果图:
好了,就介绍到这了。