ViewPager2的简单上手 kotlin as4.1

新手小白，记录自己的成长

---

前言

viewpager 太难了 还麻烦，而随着ViewPager2的发布，一年时间证明了它的便捷。

---

一、入门

ViewPager2 通常与Fragment 连用，实现翻页功能

不过官方自动创建的fragment+viewpager还是使用的viewpager
不是viewpager2

二、使用步骤

1.引入依赖

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

2.放置viewpager

   <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

直接使用即可
但是内部不可再放置view

---

3.创建fragment

普普通通的fragment

4.创建适配器

适配器现在是使用的 FragmentStateAdapter 或者 RecyclerView.Adapter
新建一个类继承上面其中之一

简单案例：

class ViwPagAdap(fa: FragmentActivity, val l: List<Int>) : FragmentStateAdapter(fa) {

    //Fragment的页面数
    override fun getItemCount(): Int = 20

    //根据序号分配Fragment位置
    override fun createFragment(position: Int): Fragment {

        var f = when (position) {
            0 -> ViewPag2Fragment()
            1 -> ViewPag2Fragment()
            2 -> ViewPag2Fragment()
            else -> ViewPag2Fragment()
        }
        return f
    }

}

适配器有三种构造方法，

class viewada(fa:Activity)  : FragmentStateAdapter(fa,lc)
 
class viewada(fa: FragmentActivity) : FragmentStateAdapter(fa)

class viewada(fam: FragmentManager, lc: Lifecycle)
 : FragmentStateAdapter(fam,lc)

分别接受 activity 、fragment、 fragmentmanager

根据需要使用

这里我自己采用传入fragment，并加入了一个列表

---

getItemCount() 用来表示创建多少页面数 ，3个就是有三个页面， 20个就是20个页面

在createFragment 里 指定了在各个fragment的位置

还需要和viewpage2视图放在一起的一个tablayout

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/viewPager2"
        app:tabGravity="center"
        app:tabMode="scrollable">

    </com.google.android.material.tabs.TabLayout>

app:tabGravity=“center”
app:tabMode=“scrollable”
这两个属性用于指定tab的放置和滚动

---

5.主页面代码

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.viewpager2.widget.ViewPager2
import com.example.tabtest.newview.ViwPagAdap
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar);
        val l = listOf<Int>(1, 2, 3)
        val adapter = ViwPagAdap(this, l)
        val viewPager: ViewPager2 = findViewById(R.id.view_pager2)
        viewPager.adapter = adapter
        val tabs: TabLayout = findViewById(R.id.tabs)
        viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                Toast.makeText(this, "page selected $position", Toast.LENGTH_SHORT)
                    .show()
            }
        })
        TabLayoutMediator(tabs, viewPager) { tab, position ->
            tab.text = "Tab ${(position + 1)}"
        }.attach()
    }

}

viewPager.registerOnPageChangeCallback 用于注册一个页面切换的触发器
TabLayoutMediator 新加入得特性， 可以方便的设置标题

---

Toolbar/ActionBar设置

下面的代码, 可以将导航器 navController 与 Toolbar/ActionBar 绑定.

setupActionBarWithNavController(navController, appBarConfiguration)

但是, 如果Activity 使用了Toolbar, 就需要将其使用的Theme设置为noActionBar:

<style name="Theme.BottomAndTabs" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    或
<item name="windowActionBar">false</item>

并
setSupportActionBar(toolbar)
否则就会报错.
toolbar 的导入要注意，在21年4月的版本上，android.widget 和 androidx.appcompat.widget.Toolbar 是并存的

---

总结

小成果，继续努力， 下次更新 RecylerView