ViewPager2正式版發佈

ViewPager2正式版已經發布了，具體可以看官網文檔，這裏主要介紹用法

一、引入

使用ViewPager2需要導入

implementation 'androidx.viewpager2:viewpager2:1.0.0'

在xml中設置orientation, 或者在代碼中設置setOrientation(),可以控制橫縱向

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/ViewPager2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

還可以設置從右到左的頁面

android:layoutDirection="rtl"

二、使用

ViewPager2使用主要有兩種方式，一種是類似RecyclerView的使用方式

val data = ArrayList<MainBean>()
data.add(MainBean("1"))
data.add(MainBean("2"))
viewPager2.adapter = ViewPagerAdapter(R.layout.item_view,data)

BaseRecyclerViewAdapter是以前封裝好的一個自定義適配器，和使用RecyclerView一樣

class ViewPagerAdapter(resource:Int ,data:List<MainBean>) : BaseRecyclerViewAdapter<MainBean, BaseViewHolder>(resource,data) {
    
    override fun convert(holder: BaseViewHolder, item: MainBean, position: Int) {
        holder.setText(R.id.tv_msg,item.name)
    }
}

另一種是搭配Fragment使用

viewPager2.adapter = MainFragmentAdapter(this)

適配器

class MainFragmentAdapter(fa:FragmentActivity) : FragmentStateAdapter(fa) {

    override fun getItemCount(): Int {
        return 2
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> {
                HomeFragment()
            }
            else -> {
                MineFragment()
            }
        }
    }
}

如果需要使用tabLayout，首先要引入

implementation 'com.google.android.material:material:1.1.0-beta02'

關聯TabLayout和ViewPager2

viewPager2.adapter = MainFragmentAdapter(this)

TabLayoutMediator(tabLayout,viewPager2){ tab,position ->
    if (position == 0){
        tab.text = "首頁"
    } else{
        tab.text = "我的"
    }
}.attach()

三、動畫

viewPager2.setPageTransformer(){ page, position ->
    //絕對值:百分比
    val absPos = Math.abs(position)
    //左邊距 = 位置百分比 * 最大距離
    page.translationX = absPos * 350f
    page.translationY = absPos * 500f
    //縮放
    val scale = if (absPos > 1) 0F else 1 - absPos
    page.scaleX = scale
    page.scaleY = scale
    //旋轉角度 = 百分比 * 最大角度
    page.rotation = position * 360
}