1. 程式人生 > >【自定義View】4.ViewPager卡片滑動效果

【自定義View】4.ViewPager卡片滑動效果

【難度★☆☆☆☆】前面我們學過了ViewPager的原理,那麼接下來我們實現一個帶縮放卡片式的ViewPager,它可以用來展示圖片,展示卡片式的UI。

  許多時候我們閒原生的ViewPager的效果太過單調,於是我們想做一些更好的UI效果,比如下面的ViewPager卡片滑動效果。
cardviewpager

  這個效果我已經封裝好成一個自定義控制元件,只要在原有的ViewPager改一行xml程式碼即可,Java程式碼一點都不用動。下面是佈局檔案中的定義:

<com.liyafeng.view.SimpleViewPager.CardViewPager
        android:id="@+id/viewpager"
android:layout_width="match_parent" android:layout_height="match_parent" />

  程式碼部分和ViewPager一樣使用即可:

        ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager);
        viewpager.setAdapter(new PagerAdapter());

  下面我們簡單說一下原理,首先要想讓每個Pager之間有間隙,我們可以給ViewPager加Padding屬性。但是這樣相鄰的Pager還是不能顯示到一個螢幕中,我們通過分析ViewPager的原始碼(

ViewPager的實現原理和原始碼分析),得知ViewPager在onLayout()的時候有一個PageMargin屬性,這個是用來設定Pager之間的間距的,那麼我們把這個值設為負值,Pager之間的間距就縮小了,那麼相鄰的Pager就可以在一個螢幕中顯示了。
  但是我們發現ViewGroup預設不會繪製Padding的部分,所以我們呼叫ViewGroup的setClipToPadding(false)方法來讓ViewGroup不把Padding部分“剪掉”即可。
  通過上面設定,我們初步得到了一個卡片式的ViewPager,那麼如何在滑動的時候讓卡片有縮放效果呢?通過前面的學習我們知道可以利用View的setScaleX()、setScaleY()方法,監聽ViewPager的OnPageChangedListener方法,這樣我們就能根據滑動的距離來設定當前Pager的大小了。