viewpager實現畫廊(一屏多個Fragment)效果

轉

本文主要介紹如何利用ViewPager實現Gallery的畫廊效果，即一屏顯示多個Fragment。具體代碼可見ViewPager MultiFragmentDemo，示例APK地址TrineaAndroidDemo.apk(其中的ViewPager Multi Fragment Demo)。

 

效果圖如下：

            

在使用Gallery的時候大家會發現有幾個問題(1). 無法控制每次滑動只滑動一頁, (2). Gallery默認第一個item居中，無法修改它與Gallery的左間距。ViewPager可以方便的解決上面兩個問題，但默認卻無法在屏幕上顯示多個Fragment。
下面介紹如何利用ViewPager及android:clipChildren屬性解決這個問題。
1、定義xml

Java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/pager_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:clipChildren="false"     android:layerType="software" >       <android.support.v4.view.ViewPager         android:id="@+id/view_pager"         android:layout_width="250dp"         android:layout_height="450dp"         android:layout_gravity="center"         android:clipChildren="false" />   </RelativeLayout>

發現上面的RelativeLayout(可以用其它layout替換)和ViewPager的android:clipChildren都設置爲了false。

android:clipChildren表示是否限制子View在其範圍內，在animations動畫以及本文的情況下可以發揮很大的作用。默認爲true。

 

2、Java部分
這裏我們主要完成
(1). ViewPager設置
需要setOnPageChangeListener，在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函數中不斷刷新layout。
還可以

Java

1 2	viewPager.setOffscreenPageLimit(TOTAL_COUNT); viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));

setOffscreenPageLimit表示設置緩存，這樣左右拖動即可看見後面的Fragment。setPageMargin表示設置Fragment之間的間距

 

(2). FrameLayout設置
需要setOnTouchListener函數中將滑動滑動事件傳遞給viewPager，否則只有viewPager中間的view可以滑動，設置後整個viewPager都可以滑動。
具體代碼如下：

Java部分實現

可能運行後出現viewpager的部分Fragment無法看見或是突然消失的問題，請確保RelativeLayout和ViewPager的android:clipChildren都設置爲了false並且viewPager.setOffscreenPageLimit(TOTAL_COUNT);其中TOTAL_COUNT大於0. 當然子Fragment本身不能是match_parent的。viewpager設置了paddingTop也會導致無法實現畫廊而只是顯示一屏。