[Android] ViewPager2使用入门

原创

用户3702315

修改于 2020-11-30 11:27:24

2K0

修改于 2020-11-30 11:27:24

文章被收录于专栏：安卓开发

`简单的前言`

之前的项目中使用过ViewPager，被坑过几次。如果你在RecyclerView中的Item使用ViewPager，你绝对会产生莫名其妙的问题，因为ViewPager在同一界面上不能有两个一样的ID，否则会导致滑动和内存问题。

// 首先贴一下库的引用地址
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'

当然 ViewPager2 是 androidx 包的一个库，同时也就是 Jetpack 库的成员组件之一，具体参考下面的地址：

https://developer.android.google.cn/jetpack/androidx/releases/viewpager2

`重要的特性`

通过 setUserInputEnabled() 设置是否禁止用户滑动页面。
通过 fakeDragBy(offset) 模拟用户触摸滑动页面的效果。
FragmentStatePagerAdapter 被 FragmentStateAdapter 替代
PagerAdapter 被 RecyclerView.Adapter 替代

`最简单的使用`

ViewPager2是内部使用了RecyclerView，最简单用法就是设置一个Adapter即可马上使用，下面的ViewPager2默认是横向滚动：

ViewPager2 vp2 = mRootView.findViewById(R.id.uiVisitorPager2);
vp2.setAdapter(new RecyclerView.Adapter() {
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View item = View.inflate(parent.getContext(), R.layout.face_item_domicile, null);
        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        item.setLayoutParams(lp);
        RecyclerView.ViewHolder vh = new RecyclerView.ViewHolder(item){};
        return vh;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 10;
    }
});

注意到上面的手动设置LayoutParams，否则会抛出：

java.lang.IllegalStateException: Pages must fill the whole ViewPager2 (use match_parent)

`垂直滚动的特性`

ViewPager2支持横向和垂直滚动，只需要在xml中通过android:orientation指定方向：

<androidx.viewpager.widget.ViewPager
    android:id="@+id/uiVisitorPager"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/uiTopTitle">

`页面滑动监听`

vp2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
    }

    override fun onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
    }

    override fun onPageScrollStateChanged(@ScrollState int state){
        super.onPageScrollStateChanged(state)
    }
})

`PageTransformer`

ViewPager2同样支持与ViewPager已有的PageTransformer，而且使用方式完全一致，所以很方便的可以复用以前的PageTransformer。

ViewPager2.PageTransformer定义在ViewPager2的内部，是一个接口，接口的方法与ViewPager的PageTransformer一模一样。

public abstract void transformPage(View page, float position)

`CompositePageTransformer`

ViewPager2的SDK提供了一个CompositePageTransformer，它是一个可组合其他PageTransformer的PageTransformer，可以将多个PageTransformer添加到CompositePageTransformer中。

val cpt = CompositePageTransformer()
cpt.addTransformer(ScaleInTransformer())
cpt.addTransformer(AlphaPageTransformer())

viewPager2.setPageTransformer(cpt)

`设置页面间隔`

ViewPager2 提供了 MarginPageTransformer，我们可以通过ViewPager2的setPageTransformer方法来设置页面间距。

viewPager2.setPageTransformer(MarginPageTransformer(getDimension(R.dimen.dp30).toInt()))

`一屏多页`

官方案例上的ViewPager2一屏多页示例

vp2.apply {
    offscreenPageLimit = 1
    val recyclerView = getChildAt(0) as RecyclerView
    recyclerView.apply {
        val padding = 20
        // 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(20))
viewPager2.setPageTransformer(compositePageTransformer)