Android 畫廊效果之ViewPager顯示多個圖片

標籤：android   style   blog   http   io   color   ar   java   sp   

首先來看下面的效果：

從上面的圖片可以看到，當添加多張圖片的時候，能夠在下方形成一個畫廊的效果，我們左右拉動圖片來看我們添加進去的圖片，效果是不是好了很多呢？下面來看看怎麼實現吧！

上面的效果類似Android裡面ViewPage的效果，但是跟ViewPager有所不同，ViewPager每次只能顯示一張圖片。

其實我們是利用到了View的clipChildren屬性，我們在這裡要把ViewPager以及它的父表單都設定為false，如下:

android:clipChildren="false"

因為如果clipChildren屬性設定為true,就表明我們要將children給clip掉，就是說對於子項目來說，超出當前view的部分都會被切掉，那我們在這裡把它設定成false，就表明超出view的部分，不要切掉，依然顯示。

xml代碼部分：

<!-- 配置container和pager的clipChildren=false， 並且指定marginLeft 和 marginRight 的值-->  

<LinearLayout  
    android:id="@+id/container"  
    android:layout_width="match_parent"  
    android:layout_height="100dp"  
    android:clipChildren="false"  
    android:gravity="center_horizontal"  
    android:layerType="software"  
    android:orientation="horizontal" >  
  
    <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" >  
    </android.support.v4.view.ViewPager>  
</LinearLayout>

Java代碼部分：

// 1.設定幕後item的緩衝數目  
mViewPager.setOffscreenPageLimit(3);   
// 2.設定頁與頁之間的間距  
mViewPager.setPageMargin(10);  
// 3.將父類的touch事件分發至viewPgaer，否則只能滑動中間的一個view對象  
container.setOnTouchListener(new View.OnTouchListener() {  
    @Override  
    public boolean onTouch(View v, MotionEvent event) {  
        return mViewPager.dispatchTouchEvent(event);  
    } 
});

Android 畫廊效果之ViewPager顯示多個圖片