【轉】ViewPager 一屏顯示多個子頁面
阿新 • • 發佈:2017-11-20
大小 col 進行 如果 detail margin urn class cli
一、概述
項目中遇到一個需求:ViewPager 一屏顯示多個子頁面。因為之前沒有做過這樣的界面,所以經歷了些許小插曲,特以記之!
主要內容來自: http://blog.csdn.net/JM_beizi/article/details/51297605
二、方案
通過查詢資料,發現有兩種解決方案:
- 重寫
PagerAdapter.getPageWidth(int position)
方法 - XML中設置
android:clipChildren="false"
這個屬性
三、方案一詳情
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; }
四、方案二詳情
1. 首先,對 XML 屬性進行配置
配置 ViewPager 和其父布局的 android:clipChildren
屬性為 false
android:clipChildren
表示是否限制子 View 在其範圍內,默認為 true。
代碼中通過 setClipChildren(false)
方法設置。
特別註意:
setClipChildren(false)
在 3.0 以上版本中,開啟了硬件加速後將不能正常工作,所以需要將其設置為軟件加速。設置軟硬件加速使用setLayerType(View.LAYER_TYPE_SOFTWARE, null)
; 也可以在布局文件中添加android:layerType="software"
- 通過設置 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 }}
【轉】ViewPager 一屏顯示多個子頁面