【轉】ViewPager 一屏顯示多個子頁面

1、概述

項目中遇到一個需求：ViewPager 一屏顯示多個子頁面。由於以前沒有作過這樣的界面，因此經歷了些許小插曲，特以記之！

主要內容來自： http://blog.csdn.net/JM_beizi/article/details/51297605

2、方案

經過查詢資料，發現有兩種解決方案：

• 重寫 PagerAdapter.getPageWidth(int position) 方法
• XML中設置 android:clipChildren="false" 這個屬性

3、方案一詳情

PagerAdapter相關源碼：

/**
     * Returns the proportional width of a given page as a percentage of the
     * ViewPager's measured width from (0.f-1.f]
     *
     * @param position The position of the page requested
     * @return Proportional width for the given page position
     */
    public float getPageWidth(int position) {
        return 1.f;
    }

4、方案二詳情

1. 首先，對 XML 屬性進行配置

配置 ViewPager 和其父佈局的 android:clipChildren 屬性爲 false

android:clipChildren 表示是否限制子 View 在其範圍內，默認爲 true。

代碼中經過 setClipChildren(false) 方法設置。

特別注意：

1. setClipChildren(false) 在 3.0 以上版本中，開啓了硬件加速後將不能正常工做，因此須要將其設置爲軟件加速。設置軟硬件加速使用 setLayerType(View.LAYER_TYPE_SOFTWARE, null); 也能夠在佈局文件中添加 android:layerType="software"
2. 經過設置 ViewPager 的 layout_marginLeft 和 layout_marginLeft 兩個屬性，能夠設置其餘頁面（非當前頁面）的顯示大小

<RelativeLayout
    android:id="@+id/viewPager_container"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@android:color/white"
    android:clipChildren="false"
    android:layerType="software">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="110dp"
        android:layout_marginRight="110dp"
        android:clipChildren="false" />
</RelativeLayout>

2. 其次，設置 item 的緩存數目。

mViewPager.setOffscreenPageLimit(2); // 2 表示除了當前頁面，再緩存其餘兩個頁面

3. 最後，設置頁與頁之間的間距

mViewPager.setPageMargin(int marginPixls); // setPageMargin表示設置page之間的間距

4. 注意：

以下事項來自參考文章的評論區：

• 該方案若是配合無限循環的話，有 bug 會崩掉，因此須要本身處理！
• 此法實現的 ViewPager 設置 Item 點擊事件有問題！

使用過程當中，第二個問題未重現！

此文在個人 Github Pages 上同步發佈，地址爲：{{ title }}