目錄

前言

今天需要實現如下圖所示的佈局效果：

第一反應是利用ViewDragHelper寫一個自定義佈局，然後實現拖拽效果。但是如果這樣做，會有很多實現上的問題，例如：

1. 三個Page的佈局內容需要在一個類裡完成，耦合性太高了。
2. 自定義佈局中需要大量處理MotionEvent，解決Touch事件分配和衝突等各種問題。

因此，我考慮一種折中的方法：Pager的滑動通過ViewPager實現，然後再實現一個自定義ViewGroup，用於顯示除ViewPager中的前後Page。幸運的是，這種方法是可行的。具體思路如下。

思路

關鍵函式

首先，介紹一個ViewGroup中的關鍵函式：

public void setClipChildren(boolean clipChildren)

官方的解釋是：

By default, children are clipped to their bounds before drawing. This allows view groups to override this behavior for animations, etc.

翻譯：

預設情況下，在ViewGroup繪製前，子View都被限制在它們自己的區域內無法得到繪製。這可以讓ViewGroup通過重寫該方法來實現一些動畫效果。該值預設為true。

注意

：setClipChildren(false)在3.0以上版本中，開啟了硬體加速後將不能正常工作，所以需要將其設定為軟體加速。

自定義PagerContainer

我們可以自定義一個ViewGroup，讓它裡面包含ViewPager（如果需要顯示前後兩頁的內容，則ViewPager的layout_width不能為match_parent），同時我們設定ViewGroup的setClipChildren為false即可顯示前後Page的內容了。

自定義PagerContainer程式碼如下：

import android.content.Context;
import android.support.v4.view.ViewPager;
import
 
 android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Created by wzy on 16-1-5.
 */
public class AppPagerContainer extends FrameLayout {
    private ViewPager mViewPager;

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

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

    public AppPagerContainer(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initData();
    }

    private void initData() {
        // 允許子View在其區域內進行繪製
        setClipChildren(false);

        // child clip功能在Android3.x之後的版本會因為硬體加速而不起作用，所以這裡需要關閉硬體加速功能
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        try {
            mViewPager = (ViewPager) getChildAt(0);
        } catch (Exception e) {
            throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
        }
    }

    public ViewPager getViewPager() {
        return mViewPager;
    }
}

佈局xml如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.android.ui.widget.AppPagerContainer
        android:id="@+id/pager_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_layout"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center_horizontal"/>
    </com.android.ui.widget.AppPagerContainer>

</LinearLayout>

效果如圖所示：