自定义布局实现左右或者上下翻页效果（借助Scroller类）

以下代码大部分借鉴于郭神的博客：Android Scroller完全解析，关于Scroller你所需知道的一切 我在这个基础上面增加了上下翻页的效果，逻辑其实没什么改动。

先上效果图

下面是稍微修改后的代码，注释在代码里写的比较详细了：

public class ScrollerLayout extends ViewGroup {

    private final String TAG = "ScrollerLayout";

    /**
     * 用于滚动的实例对象
     */
    private Scroller mScroller;

    /**
     * 判定为拖动的最小移动像素数
     */
    private int mTouchSlop;

    /**
     * 手指按下是事的x坐标
     */
    private float mXDown;

    /**
     * 手指触摸时的位置
     */
    private float mXMove;

    /**
     * 上次手指移动时的位置
     */
    private float mXLastMove;

    //视图可移动的左边界
    private int leftBorder;

    //视图可移动的最大右边界
    private int rightBorder;

    /**
     * 手指按下是事的y坐标
     */
    private float mYDown;

    /**
     * 手指触摸时的位置
     */
    private float mYMove;

    /**
     * 上次手指移动时的位置
     */
    private float mYLastMove;

    //视图可移动的上边界
    private int topBorder;

    //视图可移动的最大下边界
    private int bottomBorder;

    //翻页方向（左右 or 上下）
    private int direction;

    public ScrollerLayout(Context context) {
        this(context, null);
    }

    public ScrollerLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScrollerLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mScroller = new Scroller(getContext());
        ViewConfiguration configuration = ViewConfiguration.get(getContext());
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ScrollerLayout, defStyleAttr, 0);
        direction = ta.getInt(R.styleable.ScrollerLayout_direction, 1);
        ta.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        }
    }

    //摆放所有子view）
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        int childCount = getChildCount();
        if (b) {
            for (int j = 0; j < childCount; j++) {
                View childView = getChildAt(j);
                //左上右下(横向摆放)
                if (direction == 1) {
                    childView.layout(j * childView.getMeasuredWidth(), 0, childView.getMeasuredWidth() * (j + 1), childView.getMeasuredHeight());
                } else { //左上右下(纵向摆放)
                    childView.layout(0, j * childView.getMeasuredHeight(), childView.getMeasuredWidth(), childView.getMeasuredHeight() * (j + 1));
                }
            }
            leftBorder = getChildAt(0).getLeft(); //0
            rightBorder = getChildAt(childCount - 1).getRight(); //页数*页面宽度
            topBorder = getChildAt(0).getTop(); //0
            bottomBorder = getChildAt(childCount - 1).getBottom(); //页数*页面高度
            Log.d(TAG, "topBorder:" + topBorder + " ,bottomBorder:" + bottomBorder);
            Log.d(TAG, "leftBorder:" + leftBorder + " ,rightBorder:" + rightBorder);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mXDown = ev.getRawX();
                mXLastMove = mXDown;

                mYDown = ev.getRawY();
                mYLastMove = mYDown;
                break;
            case MotionEvent.ACTION_MOVE:
                mXMove = ev.getRawX();
                mXLastMove = mXMove;
                mYMove = ev.getRawY();
                mYLastMove = mYMove;
                //滑动了多少距离
                float diff;
                if (direction == 1) {
                    diff = Math.abs(mXMove - mXDown);
                } else {
                    diff = Math.abs(mYMove - mYDown);
                }
                //滚动其实是父控件的滚动
                // 当手指拖动值大于TouchSlop值时，认为应该进行滚动，拦截子控件的事件
                if (diff > mTouchSlop) {
                    return true;
                }
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                mXMove = event.getRawX();
                mYMove = event.getRawY();
                if (direction == 1) {
                    //移动了多少距离 向左滑动时值为正数，向右滑动时值为负数
                    int scrolledX = (int) (mXLastMove - mXMove);
                    Log.d(TAG, "onMove:" + getScrollX() + " ,scrolledX:" + scrolledX);
                    //此判断只针对向右滑动时（即第一页就向右滑动）
                    if (getScrollX() + scrolledX < leftBorder) {
                        scrollTo(leftBorder, 0);
                        Toast.makeText(getContext(), "已经是第一页啦", 100).show();
                        return true;
                    }
                    //此判断只针对最后一页向左滑动时
                    //最后一页时getScrollX() = （页数-1）* screenWidth，向左滑动时scrollX大于0
                    else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
                        scrollTo(rightBorder - getWidth(), 0);
                        Toast.makeText(getContext(), "已经是最后一页啦", 100).show();
                        return true;
                    }
                    scrollBy(scrolledX, 0);
                } else {
                    //移动了多少距离 向上滑动时值为正数，向下滑动时值为负数
                    int scrolledY = (int) (mYLastMove - mYMove);
                    Log.d(TAG, "onMove:" + getScrollY() + " ,scrolledY:" + scrolledY);
                    //此判断只针对向右滑动时（即第一页就向下滑动）0 + 负数
                    if (getScrollY() + scrolledY < topBorder) { //判定为第一页时向下滑动
                        scrollTo(0, topBorder);
                        Toast.makeText(getContext(), "已经是顶部啦", 100).show();
                        return true;
                    }
                    //此判断只针对最后一页向上滑动时
                    //getHeight为当前整个可见页面的高度
                    //最后一页时getScrollY() = （页数-1）* screenHeight，向上滑动时scrollY大于0
                    else if (getScrollY() + getHeight() + scrolledY > bottomBorder) {
                        scrollTo(0, bottomBorder - getHeight());
                        Toast.makeText(getContext(), "已经是底部啦", 100).show();
                        return true;
                    }
                    scrollBy(0, scrolledY);
                }
                mXLastMove = mXMove;
                mYLastMove = mYMove;
                break;
            case MotionEvent.ACTION_UP:
                if (direction == 1) {
                    // 当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面
                    int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();
                    int dx = targetIndex * getWidth() - getScrollX();
                    // 第二步，调用startScroll()方法来初始化滚动数据并刷新界面
                    // (起始点的x坐标,起始点的y坐标,终点x坐标,终点y坐标)
                    mScroller.startScroll(getScrollX(), 0, dx, 0);
                } else {
                    int targetIndex = (getScrollY() + getHeight() / 2) / getHeight();
                    int dy = targetIndex * getHeight() - getScrollY();
                    mScroller.startScroll(0, getScrollY(), 0, dy);
                }
                invalidate(); //必须调用该方法
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {
        //super.computeScroll();
        // 第三步，重写computeScroll()方法，并在其内部完成平滑滚动的逻辑
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }
}

其中自定义了一个属性支持在布局文件中切换横向or纵向滚动，属性文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ScrollerLayout">
        <attr name="direction">
            <enum name="horizontal" value="1" />
            <enum name="vertical" value="2" />
        </attr>
    </declare-styleable>
</resources>

Activity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.hanson.scrollerdemo.view.ScrollerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:direction="horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="页面一"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_light"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="页面二"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_green_light"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="页面三"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_light"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:text="页面四"
            android:textColor="@android:color/white" />

    </com.hanson.scrollerdemo.view.ScrollerLayout>

</LinearLayout>

Activity中不用做任何操作，即可看到效果：

public class MainActivity extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
 }

小伙伴们快去试试吧…