现在的位置: 首页 > 综合 > 正文

PageTransformer是什么

2020年02月12日 综合 ⁄ 共 2973字 ⁄ 字号 评论关闭

  我们就来认识下ViewPager2的PageTransformer吧!


  1.setPageMargin


  在第一章中我们提到了ViewPager2移除了setPageMargin方法,那么怎么为ViewPager2设置页面间距呢?


  其实在ViewPager2中为我们提供了MarginPageTransformer,我们可以通过ViewPager2的setPageTransformer方法来设置页面间距。


  代码如下:


  viewPager2.setPageTransformer(


  MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))


  上述代码我们为ViewPager2设置了10dp的页面间距。


  2.认识CompositePageTransformer


  这个时候我们应该有个疑问,为ViewPager2设置了页面间距后如果还想设置页面动画的Transformer怎么办呢?


  这时候就该CompositePageTransformer出场了。从名字上也可以看出来它是一个组合的PageTransformer。


  没错,CompositePageTransformer实现了PageTransformer接口,同时在其内部维护了一个List集合,我们可以将多个PageTransformer添加到CompositePageTransformer中。


  val compositePageTransformer = CompositePageTransformer()


  compositePageTransformer.addTransformer(ScaleInTransformer())


  compositePageTransformer.addTransformer(MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))


  viewPager2.setPageTransformer(compositePageTransformer)


  上述代码中我们通过CompositePageTransformer为ViewPager设置了MarginPageTransformer和一个页面缩放的ScaleInTransformer。


  3.ViewPager2中的PageTransformer


  PageTransformer是一个位于ViewPager2中的接口,因此ViewPager2的PageTransformer是独立于ViewPager的,它与ViewPager的PageTransformer没有任何关系。


  虽然如此,却不必担心。因为ViewPager2的PageTransformer和ViewPager的PageTransformer实现方式一模一样。


  我们看下上一小节中用到的ScaleInTransformer:


  class ScaleInTransformer : ViewPager2.PageTransformer {


  private val mMinScale = DEFAULT_MIN_SCALE


  override fun transformPage(view: View, position: Float) {


  view.elevation = -abs(position)


  val pageWidth = view.width


  val pageHeight = view.height


  view.pivotY = (pageHeight / 2).toFloat()


  view.pivotX = (pageWidth / 2).toFloat()


  if (position < -1) {


  view.scaleX = mMinScale


  view.scaleY = mMinScale


  view.pivotX = pageWidth.toFloat()


  } else if (position <= 1) {


  if (position < 0) {


  val scaleFactor = (1 + position) * (1 - mMinScale) + mMinScale


  view.scaleX = scaleFactor


  view.scaleY = scaleFactor


  view.pivotX = pageWidth * (DEFAULT_CENTER + DEFAULT_CENTER * -position)


  } else {


  val scaleFactor = (1 - position) * (1 - mMinScale) + mMinScale


  view.scaleX = scaleFactor


  view.scaleY = scaleFactor


  view.pivotX = pageWidth * ((1 - position) * DEFAULT_CENTER)


  }


  } else {


  view.pivotX = 0f


  view.scaleX = mMinScale


  view.scaleY = mMinScale


  }


  }


  companion object {


  const val DEFAULT_MIN_SCALE = 0.85f


  const val DEFAULT_CENTER = 0.5f


  }


  }


  4.ViewPager2的一屏多页效果


  在ViewPager2的官方Sample上看到了ViewPager2的一屏多页可以通过为RecyclerView设置Padding来实现。代码如下:


  viewPager2.apply {


  offscreenPageLimit=1


  val recyclerView= getChildAt(0) as RecyclerView


  recyclerView.apply {


  val padding = resources.getDimensionPixelOffset(R.dimen.dp_10) +


  resources.getDimensionPixelOffset(R.dimen.dp_10)


  // setting padding on inner RecyclerView puts overscroll effect in the right place


  setPadding(padding, 0, padding, 0)


  clipToPadding = false


  }


  }


  val compositePageTransformer = CompositePageTransformer()


  compositePageTransformer.addTransformer(ScaleInTransformer())


  compositePageTransformer.addTransformer(MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))


  viewPager2.setPageTransformer(compositePageTransformer)


  以上就是有关ViewPager2的相关介绍,要了解更多,请关注学步园。

抱歉!评论已关闭.