「アンドロイド」ViewPager 2/ViewPager 2をTabLayoutに接続

𕼧ViewPager 2登场!!

なぜViewPager 2が現れたのですか?

ViewPager 2は、既存のViewPagerライブラリに画面をスライドさせるためのアニメーションを含むいくつかの機能を追加したアンドロイドJetPackコンポーネントです.

は既存のViewPagerの不足点を改善し、より多くのスライドアニメーション機能を持つViewPager 2を発売し、ViewPagerは

をメンテナンスしなくなった.

ViewPager 2どちらがいいですか?

1.縦方向のサポート:ViewPagerは横方向のスライドのみをサポートし、ViewPager 2は縦方向のスライドアニメーション

をサポートします.

2.右から左にインクリメントされたアクション

(TabLayoutに関連付けられた)を追加

3.修正可能な分割セットのサポート
ViewPager 2は、変更可能な分割収集機能によってページングをサポートし、デフォルトの収集が変更されるとnotifyDataSetChanged()が呼び出されてUIが更新されます.

4.DiffUtil
ViewPager 2はRecyclerViewに基づいて構築されているため、DiffUtilというユーティリティクラスにアクセスできます.
したがって、ViewPager 2オブジェクトは、RecyclerViewクラスのNotifyDataSetChanged()を利用することができる.

ViewPager 2の使用

1.依存関係の追加

ViewPager 2はJetPackコンポーネントであり、プロジェクトに依存関係を追加する必要があります.

2.スクリーン構成の分割、xmlの作成

ViewPagerごとに3つのFragmentを作成(もちろん、それ以上も作成可能)

分割を作成した場合は、分割するonCreateViewメソッドで膨張するxmlファイルを、分割ごとに合計3つの

を作成します.

3.メインアニメーションにViewPager 2ビューを追加する

4.メインモーションでAdapterを作成する

ViewPager 2新しいページを内蔵スライド機能で表示

このプロセスでは、FragmentStateAdapterが新しいページの表示を担当します.

FragmentStateAdapterは、RecyclerViewのAdapterが作成されたときもRecyclerViewであるAdapterクラスを継承する.Adapter継承作成時のAdapterと同じ

RecyclerViewのAdapterは内部にViewHolderを作成し、このFragmentStateAdapterも内部にFragmentViewHolderを指定します.

つまり、FragmentStateAdapterは、RecyclerViewで使用されているAdapterと似ています
https://developer.android.com/reference/androidx/viewpager2/adapter/FragmentStateAdapter#public-constructors_1

RecyclerViewは、AdapterでViewHolderを指定することによって実現され、ViewPager 2もFragmentStateAdapterでFragmentViewHolderを指定することによって実現される.
したがって,RecyclerViewとViewPager 2の動作原理は同じである.

ViewPager 2でAdapterを作成すると、FragmentStateAdapterが実装されますが、FragmentStateAdapterが所有する共通のメソッドでは、getItemCount()とCreateFragment()が実装される必要があります.

getItemCount():FragmentStateAdapterの共通メソッドではありません.FragmentStateAdapterが継承するRecyclerview.Adapterクラスの共通メソッド.このメソッドは、Adapterが所有するデータセットのすべてのアイテム数を返します.

createFragment():FragmentStateAdapterの共通メソッド.特定の位置に接続する新しい分割機能を提供する方法があります.

5.AdapterをViewPager 2に接続する

追加）Backボタンをクリックして画面スライドを過去に移動

TabをViewPager 2に関連付ける

依存関係の追加

Tabは外観デザインに属するため、

を使用するには、プロジェクトにエンティティ設計の依存関係を追加する必要があります.

App
implementation 'com.google.android.material:material:1.2.1'

TabLayoutの作成

TabLayoutを

xmlに

追加

TabLayoutとViewPager 2の接続

Tabは常にViewPager接続で使用されているので、ViewPager 2とTabLayoutを接続してみます.

xmlファイルでは、TabLayoutの下にView Pager 2(上図のように)

を追加します.

ViewPagerとTabを接続するには、TabLayoutMediatorというクラスを使用する必要があります.このクラスはTabとViewPagerを一緒に接続することができ、合計

タブの数を増やす場合は、メソッドgetItemCountの戻り数を調整してAdapterタブの数に適応し、CreateFragmentにラベルを追加してラベルの数に適応し、TabLayoutMediatorにラベル名を追加し、Adapterオブジェクトの作成時に作成者に追加する数を

増やすことができます.

package My_Library

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.kotlin_study.R
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator
import kotlinx.android.synthetic.main.activity_view_pager2.*

class ViewPager2 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager2)

        //ViewPager2와 Adapter연결
        val adapter = ViewPager2_Adapter(this, 3)
        viewPager2.adapter = adapter

        //각 탭들이 눌렸을때 작업할 수 있는 기반 코드
       //(없어도 무관하긴함) ViewPager2_tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab?) {
                // handle tab reselect
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                // handle tab unselect
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                // handle tab select
                Toast.makeText(applicationContext, "탭 눌림", Toast.LENGTH_SHORT).show()
            }
        })

        //ViewPager와 Tab을 연결
        TabLayoutMediator(ViewPager2_tab_layout, viewPager2) { tab, position ->
            when (position) {
                0 -> tab.text = "탭1"  //탭의 이름이 됨
                1 -> tab.text = "탭2"
                2 -> tab.text = "탭3"
            }
        }.attach()

    }

    // 추가 기능 ) back 버튼 클릭시 화면 슬라이드 과거로 이동시키기
    override fun onBackPressed() {
        if (viewPager2.currentItem == 0) {
            super.onBackPressed()
        } else {
            viewPager2.currentItem = viewPager2.currentItem - 1
        }
    }

    //ViewPager2의 Adapter
    class ViewPager2_Adapter(
        fragmentActivity: FragmentActivity,
        val count: Int
    ) : FragmentStateAdapter(fragmentActivity) {
        override fun getItemCount(): Int {
            return 3
        }

        override fun createFragment(position: Int): Fragment {
            if (position == 0) {
                return ViewPager2_Fragment1()
            } else if (position == 1) {
                return ViewPager2_Fragment2()
            } else {
                return ViewPager2_Fragment3()
            }
        }
    }
}