ViewPager中呈现前一页和后一页的内容

目录

前言

今天需要实现如下图所示的布局效果：

第一反应是利用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>

效果如图所示：