ViewPager頁面滑動效果，自定義PageTransformer實(shí)現(xiàn)想要的變換效果
PageTransformer是ViewPager內(nèi)部定義的一個接口，用于控制ViewPager中頁面（item view）的滑動效果。PageTransformer可以在頁面滑動過程中自定義頁面的變換效果，如透明度漸變、縮放、旋轉(zhuǎn)等。
接口定義
PageTransformer接口定義了一個方法transformPage(View page, float position)
- page：表示當(dāng)前正在滑動的頁面視圖。
- position：表示頁面相對于當(dāng)前中心頁面的位置，值是一個浮點(diǎn)數(shù)，范圍根據(jù)滑動方向有所不同。例如，當(dāng)向左滑動時，當(dāng)前頁面的position值變化為[0~-1]，右邊頁面的position值變化為[1~0]；向右滑動時，當(dāng)前頁面的position值變化為[0~1]，左邊頁面的position值變化為[-1~0]。
常見使用場景
- 「透明度漸變」：在頁面滑動過程中改變頁面的透明度，實(shí)現(xiàn)淡入淡出效果。
- 「縮放」：在頁面滑動過程中改變頁面的大小，實(shí)現(xiàn)縮放效果。
- 「旋轉(zhuǎn)」：在頁面滑動過程中改變頁面的旋轉(zhuǎn)角度，實(shí)現(xiàn)旋轉(zhuǎn)效果。
實(shí)現(xiàn)方式
創(chuàng)建一個類并實(shí)現(xiàn)PageTransformer接口，重寫transformPage(View page, float position)方法。根據(jù)position參數(shù)的值來更改page視圖的屬性，如透明度、大小、旋轉(zhuǎn)角度等，以達(dá)到自定義的滑動效果。
示例代碼
透明漸變效果
public class AlphaPageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(@NonNull View page, float position) {
page.setAlpha(1 - Math.abs(position));
}
}在transformPage方法中，根據(jù)position的絕對值來設(shè)置頁面的透明度，使頁面在滑動過程中透明度發(fā)生變化。
透明旋轉(zhuǎn)翻頁效果
public class RotatePageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(@NonNull View page, float position) {
int pagerWidth = mViewPager.getWidth();
float horizontalOffsetBase = (pagerWidth - pagerWidth * 1.2f) / 2 / offscreenPageLimit + 45;
if (position >= offscreenPageLimit || position <= -1) {
page.setVisibility(View.GONE);
} else {
page.setVisibility(View.VISIBLE);
}
if (position >= 0) {
float translationX = (horizontalOffsetBase - page.getWidth()) * position;
page.setTranslationX(translationX);
}
if (position > -1 && position < 0) {
float rotation = position * 30;
page.setRotation(rotation);
page.setAlpha((position * position * position + 1));
} else if (position > offscreenPageLimit - 1) {
page.setAlpha((float) (1 - position + Math.floor(position)));
} else {
page.setRotation(0);
page.setAlpha(1);
}
if (position == 0) {
page.setScaleX(1.2f);
page.setScaleY(1.2f);
} else {
float scaleFactor = Math.min(1.2f - position * 0.1f, 1.2f);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
}
ViewCompat.setElevation(page, (offscreenPageLimit - position) * 5);
}
}調(diào)用ViewPager的setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法，設(shè)置實(shí)現(xiàn)的PageTransformer效果。
ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotatePageTransformer());
圖片
