添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

ViewPager2 是之前更新釋出的,使用的感覺其實跟 recycler view 非常類似,所以只要熟悉 recycler view,相信 view pager 會很好上手。

這裡就跟 recycler view 一樣,快速做一個簡單的範例做介紹和分享。

可以通過左右滑動改變頁數,總共有五頁。

一樣,首先先在 build.grale(Module: app) 的 dependencies 中加入

// view pager 2
implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation 'com.google.android.material:material:1.3.0-alpha02'

我現在用的是這個版本,若有更新可換

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewPagerActivity">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pagerMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

把 view pager 2 直接放入 layout 裡面,取個 id 和調整大小即可

Adapter

跟 recycler view 一樣,要顯示裡面的資料,就要有一個 adapter。
可用於 view pager 2 的 Adapter 分為兩個

  • 使用 RecyclerView.Adapter
  • 使用 FragmentStateAdapter
  • view pager 2 不同於 view pager 的是,view pager 2 可以直接使用 recycler view 的 adapter。除此之外,還有一個專用於切換顯示 fragment 的 adapter。在使用上,我比較常採用第二個。

    在這邊就以 FragmentStateAdapter 做示範

    建立一個 class,並繼承於 FragmentStateAdapter() 跟實作他的方法

    class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
        override fun getItemCount(): Int {
            TODO("Not yet implemented")
        override fun createFragment(position: Int): Fragment {
            TODO("Not yet implemented")
    

    目前為止還是可以感覺到跟 RecyclerView 的 Adapter 很相似。

  • getItemCount() 回傳總頁數
  • createFragment 是每一頁要執行的事,那這裡因為是要裝入 fragment 所以就在裡面回傳一個 fragment 即可,fragment 會在底下完成。
  • 根據上述的功能,填入需求後,完成以下的方法。

    class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
        override fun getItemCount(): Int = 5
        //共 5 頁
        override fun createFragment(position: Int): Fragment {
            return ViewPagerFragment(position)
    

    Fragment

    這是前面的 ViewPagerFragment()

    在 fragment 的 alyout 裡面就放一個 text view 顯示在第幾頁而已

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/textNumber"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="100sp"
            android:text="0"
            android:gravity="center"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    在這裡我用建構元把 position 丟入 fragment,讓他自己也能知道自己是第幾頁,再把頁數顯示在這個 text view 上。

    不過,要記得:fragment 一定要有一個沒有參數的建構元,所以我的建構元是另外寫在底下。

    class ViewPagerFragment(): Fragment() {
        private var position: Int = 0
        constructor(position: Int) : this() {
            this.position = position
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            val root = inflater.inflate(R.layout.fragment_pager, container, false)
            val textNumber: TextView = root.findViewById(R.id.textNumber)
            textNumber.text = (position + 1).toString()
            return root
    

    view pager 的 position 是從零開始的,所以在顯示上,我把 position 加上 1。

    有了 adapter 以後,就可以來 activity 做使用了。這樣就完成囉

    class ViewPagerActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_pager)
            val viewPager = findViewById<ViewPager2>(R.id.pagerMain)
            val viewPagerAdapter = ViewPagerAdapter(this)
            viewPager.adapter = viewPagerAdapter