效果

前言

該效果實現是基於我的第一篇部落格 Android使用ViewPager實現引導頁（帶小點提示）進行改進的，因此部分相同的地方我不會再重複描述，有意全面瞭解的可以先看完該篇部落格。

實現

為實現自定義一個通用的控制元件，我們首先建立一個類繼承ViewPager，涉及的幾個功能點都在此類裡實現。
功能一、高度自適應
思路：前提是必須約定傳入圖片的寬高比例，然後按【螢幕寬度×(圖片高度/圖片寬度)】計算出輪播控制元件的高度，控制元件的寬度則匹配螢幕寬度，以保證圖片能夠顯示完全以及不被部分拉伸。
1.為了傳入圖片的寬高用於計算比例，我們需要在res/values資料夾下建立attrs.xml，在裡面自定義我們的屬性和宣告我們的樣式：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="imgWidth" format="integer"/>
    <attr name="imgHeight" format="integer"/>

    <declare-styleable name="CarouselViewPager">
        <attr name="imgWidth"/>
        <attr name="imgHeight"/>
    </declare-styleable>

</resources>
 

2.然後在佈局檔案中宣告我們自定義的ViewPager控制元件，並新增自定義的屬性值：

    <com.kinth.cantonfair.view.CarouselViewPager
        android:id="@+id/vp_carousel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        custom:imgWidth="640"
        custom:imgHeight="225"
        />
 

使用custom欄位必須要在最外層容器控制元件裡新增一句xmlns:custom="http://schemas.android.com/apk/res-auto"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

3.然後在我們自定義的ViewPager的構造方法裡取得對應的屬性值：

    private Context mContext;
    private int imgWidth;
    private int imgHeight;
    private ScrollRunnable rollRunnable;

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

    public CarouselViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CarouselViewPager, 0, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CarouselViewPager_imgWidth:
                    imgWidth = a.getInt(attr, 0);
                    break;
                case R.styleable.CarouselViewPager_imgHeight:
                    imgHeight = a.getInt(attr, 0);
                    break;
            }
        }
        a.recycle();

操作完成後不要忘記呼叫TypedArray的recycle()方法回收資源。

4.接著即可在onMeasure方法裡取得螢幕寬度，然後按照寬高比例計算並設定控制元件的高度了：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int screenWidth = DeviceUtil.getDeviceWidth(mContext);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(screenWidth, screenWidth * imgHeight / imgWidth);
        setLayoutParams(params);
    }

    public static int getDeviceWidth(Context context) {
        DisplayMetrics metrics = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        windowManager.getDefaultDisplay().getMetrics(metrics);
        return metrics.widthPixels;
    }

功能二、左右迴圈

思路：由於ViewPager本身並不支援迴圈輪播，所以在這裡用了一個比較取巧的辦法，即在第一張圖的前面新增一張圖並設定為最後一張圖的內容，而最後一張圖的後面也如是並設定為第一張圖的內容，如此對應，然後呼叫ViewPager的setCurrentItem(int item)方法並取消動畫效果來修改當前位置，如下圖所示：

實現程式碼：

    private List<View> getAllCarouselPages() {
        List<View> views = new ArrayList<View>();
        for (int i = 0; i < 6; i++) {
            views.add(getCarouselPage(i));
        }
        return views;
    }

    private View getCarouselPage(int i) {
        View root = getLayoutInflater().inflate(R.layout.include_carousel_page, null);
        ImageView ivCarouselPage = (ImageView) root.findViewById(R.id.iv_carousel_page);
        switch (i) {
            case 0:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_04);
                break;
            case 1:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_01);
                break;
            case 2:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_02);
                break;
            case 3:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_03);
                break;
            case 4:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_04);
                break;
            case 5:
                ivCarouselPage.setImageResource(R.mipmap.page_carousel_01);
                break;
        }
        return ivCarouselPage;
    }

另外，在操作過程中發現，往往上一張圖片還沒完全劃出setCurrentItem方法就已經呼叫了，從而導致切換不流暢，為此，我們需要在在自定義控制元件中新增頁面切換監聽，判斷當前頁面然後延時呼叫setCurrentItem方法，以保證完整顯示圖片後才修改位置：

        addOnPageChangeListener(new SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    postDelayed(new Runnable() {    //延遲200使過渡效果更好，不然會導致未完全滑動至下一頁就切換
                        @Override
                        public void run() {
                            setCurrentItem(getAdapter().getCount() - 2, false);//false表示取消動畫效果
                        }
                    }, 200);
                } else if (position == getAdapter().getCount() - 1) {
                    postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            setCurrentItem(1, false);
                        }
                    }, 200);
                }
            }
        });

功能三、自動輪播

思路：自然是使用定時器去呼叫setCurrentItem方法進行切換，而其中，最簡單的當屬上文所使用的postDelayed(Runnable runnable, long delayMillis)方法了，通過延時呼叫本身方法實現定時任務：

    public void startAutoScroll() {
        postDelayed(rollRunnable, 3000);
    }

    class ScrollRunnable implements Runnable {
        @Override
        public void run() {
            setCurrentItem(getCurrentItem() + 1);
            startAutoScroll();
        }
    }

還有一種情況是，當用戶手動滑動Viewpager時我們需要停止自動輪播，為此，我們可以在使用者手指按下控制元件時移除任務，然後在手指離開控制元件時重新開始任務：

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                stopAutoScroll();
                break;
            case MotionEvent.ACTION_UP:
                startAutoScroll();
                break;
        }
        return super.onTouchEvent(ev);
    }

    public void stopAutoScroll() {
        removeCallbacks(rollRunnable);
    }

原始碼