前言

ViewPager是我們常用的控制元件之一，此篇文章我們用Scroller等知識實現一個簡單的ViewPager。

效果：

（原始碼在文章結尾）

涉及知識點

onMeasure和onLayout

此點若不瞭解可以參考郭霖前輩的文章：
Android檢視繪製流程完全解析，帶你一步步深入瞭解View(二)

事件分發機制

此點可以參考筆者文章：
完全理解android事件分發機制

scrollTo和scrollBy

scrollTo：以View的初始位置為起點進行移動
scrollBy：以View的當前位置為起點進行移動

TouchSlop

系統可以識別出的被認為是滑動的最小距離。如果大於這個距離則是滑動。

View.getScrollX()

getScrollX（）獲取到的值是螢幕的最左側在整個空間中所佔位置的X值。
打個比方：View是一條6米的繩子，而螢幕只能看到2~4米的繩子。那麼getScrollX（）的值就為2。如果螢幕看到的是3~5米的繩子，那麼getScrollX（）的值就為3。

Scroller

Scroller的使用主要為3步：
1、初始化Scroller
2、重寫computeScroll（）方法
computeScroll（）是在View的draw的時候呼叫的，而invalidate會導致View重繪，所以在重寫computeScroll（）之後，我們要使用invalidate（）來間接呼叫它。
過程為：invalidate（）->draw（）->computeScroll（）
3、使用startScroll（）開啟滑動

程式碼：

MainActivity：

package com.example.double2.scrollertest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnOne;
    private Button btnTwo;
    private Button btnThree;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnOne=(Button)findViewById(R.id.btn_one);
        btnTwo=(Button)findViewById(R.id.btn_two);
        btnThree=(Button)findViewById(R.id.btn_three);
        btnOne.setOnClickListener(this);
        btnTwo.setOnClickListener(this);
        btnThree.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_one:
                Toast.makeText(this, "One", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_two:
                Toast.makeText(this, "Two", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_three:
                Toast.makeText(this, "Three", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

ScrollerLayout：

package com.example.double2.scrollertest;

import android.content.Context;
import android.support.v4.view.ViewConfigurationCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
 * 專案名稱：ScrollerTest
 * 建立人：Double2號
 * 建立時間：2017.2.23 12:02
 * 修改備註：
 */
public class ScrollerLayout extends ViewGroup {

    private Scroller mScroller;
    //用於判斷是否是滑動
    private int mTouchSlop;
    //按下時的X座標
    private float downX;
    //滑動時的X座標
    private float moveX;
    //上次觸發ACTION_MOVE事件時的螢幕座標
    private float lastMoveX;
    //介面可滾動的左邊界
    private int leftBorder;
    //介面可滾動的右邊界
    private int rightBorder;


    public ScrollerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 建立Scroller的例項
        mScroller = new Scroller(context);
        ViewConfiguration configuration = ViewConfiguration.get(context);
        // 獲取TouchSlop值
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);

    }

    @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);
            // 為ScrollerLayout中的每一個子控制元件測量大小
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            int childCount = getChildCount();
            for (int i = 0; i < childCount; i++) {
                View childView = getChildAt(i);
                // 為ScrollerLayout中的每一個子控制元件在水平方向上進行佈局
                childView.layout(i * childView.getMeasuredWidth(), 0, (i + 1) * childView.getMeasuredWidth(), childView.getMeasuredHeight());
            }
            // 初始化左右邊界值
            leftBorder = getChildAt(0).getLeft();
            rightBorder = getChildAt(getChildCount() - 1).getRight();
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = ev.getRawX();
                lastMoveX = downX;
                break;
            case MotionEvent.ACTION_MOVE:
                moveX = ev.getRawX();
                float diff = Math.abs(moveX - downX);
                lastMoveX = moveX;
                // 當手指拖動值大於TouchSlop值時，認為應該進行滑動，不進行點選事件
                if (diff > mTouchSlop) {
                    return true;
                }
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                return true;
            case MotionEvent.ACTION_MOVE:
                moveX = event.getRawX();
                int scrolledX = (int) (lastMoveX - moveX);
                if (getScrollX() + scrolledX < leftBorder) {
                    scrollTo(leftBorder, 0);
                    return true;
                } else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
                    scrollTo(rightBorder - getWidth(), 0);
                    return true;
                }
                scrollBy(scrolledX, 0);
                lastMoveX = moveX;
                break;
            case MotionEvent.ACTION_UP:
                // 當手指抬起時，根據當前的滾動值來判定應該滾動到哪個子控制元件的介面
                //如果當前X超過一半的寬度，那麼就向左移
                //如果當前的X小魚一半的寬度就向右移
                int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();
                int dx = targetIndex * getWidth() - getScrollX();

                mScroller.startScroll(getScrollX(), 0, dx, 0);// 呼叫startScroll()方法來初始化滾動資料並重新整理介面
                invalidate();//通過invalidate（）間接呼叫computeScroll()

                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {
        // computeScroll()是不會自己呼叫，只能通過invalidate()->draw()->computeScroll()來間接呼叫
        //computeScrollOffset()用來判斷是否完成了整個華東
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }
}

activity_main：

<?xml version="1.0" encoding="utf-8"?>
<com.example.double2.scrollertest.ScrollerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>
    <Button
        android:id="@+id/btn_one"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="One"/>

    <Button
        android:id="@+id/btn_two"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Two"/>

    <Button
        android:id="@+id/btn_three"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Three"/>
</com.example.double2.scrollertest.ScrollerLayout>

原始碼地址：

http://download.csdn.net/detail/double2hao/9762018