目录

效果图

ViewPager基本使用

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

实现

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

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

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <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接口
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

      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);
      }
      }
    • 如何使用
      1
      2
      mViewPager.setOffscreenPageLimit(3);//预加载3个页面
      mViewPager.setPageTransformer(false, new LoopTransformer());