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

 
分类: 【android 进阶之路】2014-08-31 12:59 6190人阅读 评论(10) 收藏 举报
 
 
转载请标明出处: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、效果图:

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

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显示出来;反之则反之;

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

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

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、效果图:

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

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. }

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

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

好了,就介绍到这了;

上一篇:JVM探秘5---JVM监控命令大全


下一篇:PCIe 驱动流程(LTSSM)