Android 自定义ScrollView ListView 体验各种纵向滑动的需求

 

分类： 【android 进阶之路】2014-08-31 12:59 6190人阅读 评论(10) 收藏 举报

Android自定义ScrollView纵向拖动

 

 

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/38950509，本文出自【张鸿洋的博客】

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

1. /**
2. * 适配器
3. * @author zhy
4. *
5. */
6. public static abstract class Adapter
7. {
8. public abstract View getView(SingleItemScrollView parent, int pos);
9. public abstract int getCount();
10. }

构造方法中得到屏幕的高度

1. public SingleItemScrollView(Context context, AttributeSet attrs)
2. {
3. super(context, attrs);
4. // 计算屏幕的高度
5. WindowManager wm = (WindowManager) context
6. .getSystemService(Context.WINDOW_SERVICE);
7. DisplayMetrics outMetrics = new DisplayMetrics();
8. wm.getDefaultDisplay().getMetrics(outMetrics);
9. mScreenHeight = outMetrics.heightPixels;
10. mScreenHeight -= getStatusHeight(context);
11. }

onMeasure中对Item进行添加，以及设置高度

1. @Override
2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
3. {
4. //防止多次调用
5. if (!flag)
6. {
7. mContainer = (ViewGroup) getChildAt(0);
8. //根据Adapter的方法，为容器添加Item
9. if (mAdapter != null)
10. {
11. mItemCount = mAdapter.getCount();
12. mItemHeight = mScreenHeight / mItemCount;
13. mContainer.removeAllViews();
14. for (int i = 0; i < mAdapter.getCount(); i++)
15. {
16. addChildView(i);
17. }
18. }
19. addChildView(0);
20. }
21. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
22. }
23. /**
24. * 在容器末尾添加一个Item
25. * @param i
26. */
27. private void addChildView(int i)
28. {
29. View item = mAdapter.getView(this, i);
30. //设置参数
31. android.view.ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
32. android.view.ViewGroup.LayoutParams.MATCH_PARENT, mItemHeight);
33. item.setLayoutParams(lp);
34. //设置Tag
35. item.setTag(i);
36. //添加事件
37. item.setOnClickListener(this);
38. mContainer.addView(item);
39. }

接下来就是复写onTouchEvent

1. @Override
2. public boolean onTouchEvent(MotionEvent ev)
3. {
4. flag = true;
5. int action = ev.getAction();
6. int scrollY = getScrollY();
7. switch (action)
8. {
9. case MotionEvent.ACTION_MOVE:
10. Log.e("TAG", "scrollY = " + scrollY);
11. // 表示此时ScrollView的顶部已经达到屏幕顶部
12. if (scrollY == 0)
13. {
14. addChildToFirst();
15. }
16. // ScrollView的顶部已经到达屏幕底部
17. if (Math.abs(scrollY - mItemHeight) <= mItemCount)
18. {
19. addChildToLast();
20. }
21. break;
22. case MotionEvent.ACTION_UP:
23. checkForReset();
24. return true;
25. default:
26. break;
27. }
28. return super.onTouchEvent(ev);
29. }
30. /**
31. * 在底部添加一个View，并移除第一个View
32. */
33. private void addChildToLast()
34. {
35. Log.e("TAG", "addChildToLast");
36. int pos = (Integer) mContainer.getChildAt(1).getTag();
37. addChildView(pos);
38. mContainer.removeViewAt(0);
39. this.scrollTo(0, 0);
40. }
41. /**
42. * 在顶部添加一个View，并移除最后一个View
43. */
44. protected void addChildToFirst()
45. {
46. Log.e("TAG", "addChildToFirst");
47. int pos = (Integer) mContainer.getChildAt(mItemCount - 1).getTag();
48. addChildView(pos, 0);
49. mContainer.removeViewAt(mContainer.getChildCount() - 1);
50. this.scrollTo(0, mItemHeight);
51. }
52. /**
53. * 检查当前getScrollY,显示完成Item，或者收缩此Item
54. */
55. private void checkForReset()
56. {
57. int val = getScrollY() % mItemHeight;
58. if (val >= mItemHeight / 2)
59. {
60. smoothScrollTo(0, mItemHeight);
61. } else
62. {
63. smoothScrollTo(0, 0);
64. }
65. }

可以看到ACTION_MOVE中我们只判断是否到达顶部或者底部；

if (Math.abs(scrollY - mItemHeight) <= mItemCount)这样的判断，主要是因为，担心用户设置的个数拿屏幕的高度来除并不是整除的，整数除整数难免有个四舍五入什么的，所以我设置了一个小的范围；

当到达顶部的时候，顶部其实已经没有Item了，此时我们为顶部添加一个Item，同时移除底部的最后一个；并且我们需要将scrollY移动到未添加前的位置；给用户一个无缝添加的体验；

到达底部同理了~

当ACTION_UP的时候，我们对当前的scrollY进行检查，如果对Item高度取余后小于Item的高度的一半，小于Item的高度的一半意味中隐藏部分是小于一般的，而显示部分是大于一半的，于是我们smoothScrollTo(0, 0);把完整的Item显示出来；反之则反之；

取余以后得到的值其实去超出屏幕的部分，也就是隐藏的部分，它要是大于一半，那么显示部分就小于一半；反之则反之；

MainActivity中用户的使用

1. package com.example.zhy_wangandroid_hownoon;
2. import java.util.ArrayList;
3. import java.util.Arrays;
4. import java.util.List;
5. import android.app.Activity;
6. import android.graphics.Color;
7. import android.os.Bundle;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.Window;
11. import android.widget.ImageView;
12. import android.widget.Toast;
13. import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.Adapter;
14. import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.OnItemClickListener;
15. public class MainActivity extends Activity
16. {
17. private SingleItemScrollView mScrollView;
18. private Adapter mAdapter;
19. private LayoutInflater mInflater;
20. private List<Bean> mDatas = new ArrayList<Bean>(Arrays.asList(//
21. new Bean(R.drawable.icon_about, Color.rgb(123, 34, 45)),//
22. new Bean(R.drawable.icon_map, Color.rgb(12, 34, 145)),//
23. new Bean(R.drawable.icon_message, Color.rgb(177, 234, 145)),//
24. new Bean(R.drawable.icon_oil, Color.rgb(88, 134, 145))//
25. ));
26. @Override
27. protected void onCreate(Bundle savedInstanceState)
28. {
29. super.onCreate(savedInstanceState);
30. requestWindowFeature(Window.FEATURE_NO_TITLE);
31. setContentView(R.layout.activity_main);
32. mInflater = LayoutInflater.from(this);
33. mScrollView = (SingleItemScrollView) findViewById(R.id.id_scrollview);
34. mAdapter = new Adapter()
35. {
36. @Override
37. public View getView(SingleItemScrollView parent, int pos)
38. {
39. View view = mInflater.inflate(R.layout.item, null);
40. ImageView iv = (ImageView) view.findViewById(R.id.id_title);
41. iv.setImageResource(mDatas.get(pos).getResId());
42. view.setBackgroundColor(mDatas.get(pos).getColor());
43. return view;
44. }
45. @Override
46. public int getCount()
47. {
48. return 4;
49. }
50. };
51. mScrollView.setAdapter(mAdapter);
52. mScrollView.setOnItemClickListener(new OnItemClickListener()
53. {
54. @Override
55. public void onItemClick(int pos, View view)
56. {
57. Toast.makeText(getApplicationContext(), pos + "",
58. Toast.LENGTH_SHORT).show();
59. }
60. });
61. }
62. }

用户拿到控件，设置Adapter，在getView里面设置数据以及决定Item的样子；提供一个setOnItemClickListener的回调，供用户设置点击每个Item的处理；和ListView的使用风格基本是一致的；

4、布局文件

主布局文件：

1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:id="@+id/id_scrollview"
4. android:scrollbars="none"
5. android:layout_width="fill_parent"
6. android:layout_height="wrap_content" >
7. <LinearLayout
8. android:id="@+id/id_container"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:orientation="vertical" >
12. </LinearLayout>
13. </ScrollView>

Item的布局

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#000000"
6. android:gravity="center" >
7. <ImageView
8. android:id="@+id/id_title"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:scaleType="fitCenter"
12. android:src="@drawable/icon_about" />
13. </LinearLayout>

3、自定义ListView使用滑动结束完整显示Item

1、效果图：

2、实现原理

先分析一下：

想要结束显示完整的，那么有个前提是，你的Item初始化一屏幕的时候应该刚好是固定数量完整的Item；

这样，就需要一个参数指定一屏幕显示多少个Item；同时会根据Item数量为每个Item设置高度；

存在一个问题，Item布局是在Adapter中设置的，也就是说，我们必须在getView中设置这个高度，但是这个高度实在ListView中计算的，所以对外公布出这个高度；

最后无非就是监听滚动结束后，判断当前显示是否是完整的，如果是则，如果不是则；

3、实现代码

a、自定义属性

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <attr name="itemCount" format="integer" />
4. <declare-styleable name="MyListView">
5. <attr name="itemCount" />
6. </declare-styleable>
7. </resources>

很简单就一个属性；

b、布局文件：

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_wangandroid_hownoon"
4. android:id="@+id/id_scrollview"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent"
7. android:orientation="vertical" >
8. <com.example.zhy_wangandroid_hownoon.MyListView
9. android:id="@+id/id_lv"
10. android:layout_width="fill_parent"
11. android:layout_height="wrap_content"
12. android:divider="@null"
13. zhy:itemCount="8" >
14. </com.example.zhy_wangandroid_hownoon.MyListView>
15. </LinearLayout>

c、MyListView

1. package com.example.zhy_wangandroid_hownoon;
2. import android.content.Context;
3. import android.content.res.TypedArray;
4. import android.util.AttributeSet;
5. import android.util.DisplayMetrics;
6. import android.util.Log;
7. import android.view.WindowManager;
8. import android.widget.AbsListView;
9. import android.widget.AbsListView.OnScrollListener;
10. import android.widget.ListView;
11. public class MyListView extends ListView implements OnScrollListener
12. {
13. private static final String TAG = MyListView.class.getSimpleName();
14. /**
15. * 每个屏幕显示多少个Item
16. */
17. private int mItemCountInOneScreen ;
18. /**
19. * 每个Item的高度
20. */
21. private int mItemHeight;
22. /**
23. * 记录第一个显示的Item
24. */
25. private int mFirstVisibleItem;
26. public MyListView(Context context, AttributeSet attrs)
27. {
28. this(context, attrs, 0);
29. }
30. /**
31. * 构造方法中拿到自定义属性ItemCount，计算每个Item高度
32. * @param context
33. * @param attrs
34. * @param defStyle
35. */
36. public MyListView(Context context, AttributeSet attrs, int defStyle)
37. {
38. super(context, attrs, defStyle);
39. WindowManager wm = (WindowManager) context
40. .getSystemService(Context.WINDOW_SERVICE);
41. DisplayMetrics outMetrics = new DisplayMetrics();
42. wm.getDefaultDisplay().getMetrics(outMetrics);
43. //获取MyListView_itemCount
44. TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
45. R.styleable.MyListView, defStyle, 0);
46. int n = a.getIndexCount();
47. for (int i = 0; i < n; i++)
48. {
49. int attr = a.getIndex(i);
50. switch (attr)
51. {
52. case R.styleable.MyListView_itemCount:
53. mItemCountInOneScreen = a.getInt(attr, 6);
54. break;
55. }
56. }
57. a.recycle();
58. //计算每个Item高度
59. mItemHeight = (outMetrics.heightPixels - getStatusHeight(context))
60. / mItemCountInOneScreen;
61. //设置一个滚动监听
62. setOnScrollListener(this);
63. Log.e(TAG, mItemCountInOneScreen + "");
64. }
65. @Override
66. public void onScrollStateChanged(AbsListView view, int scrollState)
67. {
68. //滚动结束
69. if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)
70. {
71. // Log.e(TAG, getChildAt(0).getTop() + " getTop()");
72. Log.e(TAG, mFirstVisibleItem + " SCROLL_STATE_IDLE");
73. //获取第一个Item的top
74. int top = getChildAt(0).getTop();
75. if (top == 0)
76. return;
77. //绝对值不为0时，如果绝对值大于mItemHeight的一半，则收缩，即显示下一个Item
78. if (Math.abs(top) > mItemHeight / 2)
79. {
80. this.setSelection(mFirstVisibleItem + 1);
81. // this.scrollTo(x, y)
82. // smoothScrollToPosition(mFirstVisibleItem - 1);
83. // scrollBy(0, mItemHeight- Math.abs(top));
84. // smoothScrollBy(mItemHeight- Math.abs(top), 200);
85. } else//绝对值不为0时，如果绝对值小于于mItemHeight的一半，则展开，显示当前完整的Item
86. {
87. this.setSelection(mFirstVisibleItem);
88. // this.scrollTo(x, y)
89. // smoothScrollBy( -Math.abs(top), 200);
90. // smoothScrollByOffset(offset);
91. // scrollBy(0, -Math.abs(top));
92. // smoothScrollToPosition(mFirstVisibleItem);
93. }
94. // smoothScrollToPosition(mFirstVisibleItem);
95. }
96. }
97. /**
98. * 滚动过程中不断记录当前显示的第一个Item
99. */
100. @Override
101. public void onScroll(AbsListView view, int firstVisibleItem,
102. int visibleItemCount, int totalItemCount)
103. {
104. mFirstVisibleItem = firstVisibleItem;
105. // Log.e(TAG, mFirstVisibleItem + "");
106. }
107. /**
108. * 对外公布每个Item的高度
109. * @return
110. */
111. public int getItemHeight()
112. {
113. return mItemHeight;
114. }
115. /**
116. * 获得状态栏的高度
117. *
118. * @param context
119. * @return
120. */
121. public int getStatusHeight(Context context)
122. {
123. int statusHeight = -1;
124. try
125. {
126. Class<?> clazz = Class.forName("com.android.internal.R$dimen");
127. Object object = clazz.newInstance();
128. int height = Integer.parseInt(clazz.getField("status_bar_height")
129. .get(object).toString());
130. statusHeight = context.getResources().getDimensionPixelSize(height);
131. } catch (Exception e)
132. {
133. e.printStackTrace();
134. }
135. return statusHeight;
136. }
137. }

代码比较少，也比较简单，大家可以关注下，我在onScrollStateChanged注释掉的那些方法，原则上说每一个应该都能实现；但是我最终选择了setSelection(mFirstVisibleItem);有兴趣的可以拿别的方法试试；

d、MainActivity中

1. package com.example.zhy_wangandroid_hownoon;
2. import java.util.ArrayList;
3. import java.util.List;
4. import java.util.Random;
5. import com.zhy.utils.CommonAdapter;
6. import com.zhy.utils.ViewHolder;
7. import android.app.Activity;
8. import android.graphics.Color;
9. import android.os.Bundle;
10. import android.view.View;
11. import android.view.ViewGroup;
12. import android.view.Window;
13. public class MainActivity extends Activity
14. {
15. private MyListView mListView;
16. private CommonAdapter<String> mAdapter;
17. private List<String> mDatas;
18. @Override
19. protected void onCreate(Bundle savedInstanceState)
20. {
21. super.onCreate(savedInstanceState);
22. requestWindowFeature(Window.FEATURE_NO_TITLE);
23. setContentView(R.layout.activity_main);
24. mListView = (MyListView) findViewById(R.id.id_lv);
25. initDatas();
26. initViews();
27. }
28. private void initViews()
29. {
30. mListView = (MyListView) findViewById(R.id.id_lv);
31. mAdapter = new CommonAdapter<String>(this, mDatas, R.layout.item)
32. {
33. @Override
34. public void convert(ViewHolder helper, String item)
35. {
36. View convertView = helper.getConvertView();
37. convertView.setBackgroundColor(Color.rgb(
38. new Random().nextInt(255), new Random().nextInt(255),
39. new Random().nextInt(255)));
40. ViewGroup.LayoutParams lp = convertView.getLayoutParams();
41. lp.height = mListView.getItemHeight();
42. convertView.setLayoutParams(lp);
43. helper.setText(R.id.id_title, item);
44. }
45. };
46. mListView.setAdapter(mAdapter);
47. }
48. private void initDatas()
49. {
50. mDatas = new ArrayList<String>();
51. for (int i = 'A'; i <= 'Z'; i++)
52. {
53. mDatas.add(String.valueOf((char) +i));
54. }
55. }
56. }

使用就没撒说的了，我用了我们之前封装的CommonAdapter，如果不了解可以参考：Android 快速开发系列 打造万能的ListView GridView 适配器；如果看不惯自行改成传统的Adapter，相信大家应该没问题~

还有些需求是这样的，既要满足每次停止显示完整的Item，还希望即使用户给了个加速度，在用户抬起手指时，不会自动的滚动；

4、ListView显示完整Item，屏蔽自动滚动

这个比较容易了，只需要复写onTouchEvent方法，然后在ACTION_UP后，进行检查是显示/影藏当前Item，然后return true;

1. @Override
2. public boolean onTouchEvent(MotionEvent ev)
3. {
4. int action = ev.getAction();
5. if (action == MotionEvent.ACTION_UP)
6. {
7. checkForReset();
8. return true;
9. }
10. return super.onTouchEvent(ev);
11. }
12. @Override
13. public void onScrollStateChanged(AbsListView view, int scrollState)
14. {
15. // 滚动结束
16. if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)
17. {
18. checkForReset();
19. }
20. }

关键代码如上，其他所有代码和上例一致；
效果图:

好了，就介绍到这了；