ViewPager卡片缩放效果

目录

目录.jpg

效果图

效果图.jpg

ViewPager基本使用

1. 需要配合PagerAdapter适配器使用
2. 可以结合fragment使用
3. 可以结合TabLayout使用
   ...

实现

正常的轮番图配合适配器很容易实现，此处还需要实现两点：

1. 超出父布局展示，也就是图中相邻页面在当前页面展露

   • 效果实现关键在 android:clipChildren="false" 。
     作用：是否让其子View显示在父View之内，默认为ture，它就会显示在父容器里。设为false则会显示到父容器之外

   • 这里提一下，设置每个Page之间的Margin
     mViewPager.setPageMargin(20);//Page之间缩进20

   <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>
   

2. 效果基本实现，然后是动画效果，该图效果为缩放平移。

   • 网上有很多动画效果，可以查阅收藏。
   • 实现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);
       }
   }
   

   • 如何使用

   mViewPager.setOffscreenPageLimit(3);//预加载3个页面
   mViewPager.setPageTransformer(false, new LoopTransformer());