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

转载请标明出处：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

[java]
view plain
copy

/** 
 * 适配器 
 * @author zhy 
 * 
 */  
public static abstract class Adapter  
{  
    public abstract View getView(SingleItemScrollView parent, int pos);  
  
    public abstract int getCount();  
}  

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

[java]
view plain
copy

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进行添加，以及设置高度

[java]
view plain
copy

@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

[java]
view plain
copy

@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中用户的使用

[java]
view plain
copy

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、布局文件

主布局文件：

[html]
view plain
copy

<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的布局

[html]
view plain
copy

<?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、自定义属性

[html]
view plain
copy

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
  
    <attr name="itemCount" format="integer" />  
  
    <declare-styleable name="MyListView">  
        <attr name="itemCount" />  
    </declare-styleable>  
  
</resources>  

很简单就一个属性；
b、布局文件：

[html]
view plain
copy

<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

[java]
view plain
copy

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中

[java]
view plain
copy

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;

[java]
view plain
copy

@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();  
        }  
  
    }  

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

效果图:



好了，就介绍到这了；

源码点击下载