目 錄（本篇字數：1079）
-
介紹
-
實現效果
ViewPager是我們最常用的控件之一了，幾乎在項目中都會使用到它。我們在應用中會經常看到這樣一種效果。
這種效果很常見，比如推薦內容、廣告輪播等等會用到這樣的效果。它實現起來也是不難的，那我們就分析一下它是如何實現的吧！
-
實現思路及代碼
布局沒什么難度，這個比較基礎。ViewPager里面存放4個CardView。我們關注一下它是如何實現這種效果的。
-
添加CardView依賴
注意要導入cardview的依賴，否則將找不到控件
implementation 'com.android.support:cardview-v7:26.1.0' //這里需要導入依賴-
子View布局文件
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cfcfcf">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
app:cardCornerRadius="24dp"
app:cardElevation="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom|center_horizontal"
android:paddingBottom="48dp"
android:text="我是第1頁"
android:textStyle="bold"
tools:ignore="HardcodedText" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>-
ViewPager布局文件
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cfcfcf"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="@+id/vp_loop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="64dp"
android:clipChildren="false"
android:overScrollMode="never" />
</android.support.constraint.ConstraintLayout>-
android:clipChildren屬性介紹
這里說明一下 android:clipChildren 這個屬性。這個屬性我們不是特別常用，但是它卻很實用。它主要的作用是：
是否讓其子View顯示在父View之內，默認為ture，它就會顯示在父容器里。設為false則會顯示到父容器之外。例如，我們給ViewPager設置了margin，這會使它縮進在屏幕內。可以發現ViewPager也有android:clipChildren這個屬性。這就說明ViewPager里的子View也能夠超出父容器的限制，顯示在父容器之外了。
這里提一下，ViewPager有這樣一個方法，可以設置每個Page之間的Margin
mViewPager.setPageMargin(20);//Page之間縮進20，作用是讓頁面之間空隙更大一點，根據自己需要而定。
說到這里呢，其實也可以說實現了這種效果了，如果你不追求動畫效果的畫，那么這個效果已經夠滿足你的需求了。但是，我們程序猿怎么可能就這樣滿足了呢？下面我們來實現一下它在滑動過程中的動畫效果吧。那么，要使ViewPager附帶滑動動畫，必定少不了它的一個神器：實現PageTransformer接口，我們來看下代碼：
public class LoopTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.9f;
@Override
public void transformPage(View view, float position) {
/**
* 過濾那些 <-1 或 >1 的值，使它區於【-1，1】之間
*/
if (position < -1) {
position = -1;
} else if (position > 1) {
position = 1;
}
/**
* 判斷是前一頁 1 + position ，右滑 pos -> -1 變 0
* 判斷是后一頁 1 - position ，左滑 pos -> 1 變 0
*/
float tempScale = position < 0 ? 1 + position : 1 - position; // [0,1]
float scaleValue = MIN_SCALE + tempScale * 0.1f; // [0,1]
view.setScaleX(scaleValue);
view.setScaleY(scaleValue);
}
}-
代碼分析
我們來分析一下這段代碼。根據官方最這個接口的介紹，我們可以用一個草圖來表示，以幫助理解。用三個矩形代表ViewPager中的三個頁面。
這里我們設置一個前提，就是position在滑動過程中都是屬於[-1,1]之間的，而position != 0的View都縮放了0.9f ;
當我們手指往右滑動屏幕時，position這時從 -1 —> 0 的變化，而 scaleVaule = minVaule + tempScale * 0.1f ;
這里相當於 scaleVaule = 0.9f + [0,1] * 0.1f ; 它的縮放倍數是從 0.9f —> 1.0f 變化的。
看一下它移動過程圖，更好的理解。
-
如何使用
我們在ViewPager中使用一下我們的自定義滑動效果，代碼如下：
mViewPager.setOffscreenPageLimit(3);//預加載3個頁面
mViewPager.setPageTransformer(false, new LoopTransformer());我們基本實現了這種效果，但是這僅僅只是一種效果。實現PageTransformer接口，我們自己完全可以做出更豐富、更炫酷的特效！
©原文鏈接：https://blog.csdn.net/smile_running/article/details/81078939
@作者博客：_Xu2WeI
@更多博文：查看作者的更多博文