AndroidではViewPage 2+TabLayoutを用いたボトムナビゲーション切り替えを実現

ViewPager 2は、名前を見るとAndroidでよく使われているViewPagerの機能に似たコントロールであり、ViewPagerのアップグレード版であることがわかります.現在は安定した2.1.0.0版に達しており、直接導入して使用することができます.
まず、どのような機能と使用上の変化があるかを見てみましょう.
1.Apiの変動:

FragmentStateAdapterが従来のFragmentStatePagerAdapter

に置き換えられた.

RecyclerView.Adapterが従来のPagerAdapter

に置き換えられた.

registerOnPageChangeCallbackが従来のaddPageChangeListener

に置き換えられた.
2.新機能:

RTLレイアウト

をサポート

は、垂直スクロール

をサポートする.

完全サポートnotifyDataSetChanged

3.統合方式:android xを使用
Appのbuild.gradleディレクトリでインポート:
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.material:material:1.1.0'
4.使用、本明細書で使用するkotlin方式、java方式は簡単で、ここではインスタンスコードを書かない.
MainActivityコード:

class MainActivity : AppCompatActivity() {
    //  
    private val titles = arrayOf("  ", "  ", "  ", "  ")
    private val fragmentList : MutableList = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initViews();
    }

    /**
     *      
     */
    private fun initViews() {
        //   fragment
        fragmentList.add(HomeFragment())
        fragmentList.add(KnowledgeFragment())
        fragmentList.add(NavigationFragment())
        fragmentList.add(ProjectFragment())
        //   viewPage
        viewPager!!.adapter = object:FragmentStateAdapter(this){
            override fun getItemCount(): Int {
                return fragmentList.size
            }

            override fun createFragment(position: Int): Fragment {
                return  fragmentList[position]
            }
        }
        viewPager.offscreenPageLimit = 3
        val tabLayoutMediator = TabLayoutMediator(
            tab_layout,viewPager, TabLayoutMediator.TabConfigurationStrategy { tab: TabLayout.Tab, position: Int ->
                tab.text = titles[position]
            })
        tabLayoutMediator.attach()
    }
}

activity_mainレイアウトコード:

5.Fragmentコード:
ホームホームフレーム

/**
 *@author: njb
 *@date:   2020/3/4 0004 20:00
 *@desc:     
 */
class HomeFragment : Fragment(){
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = LayoutInflater.from(context).inflate(R.layout.fm_home, null)
        return view
    }
}

知識KnowledgeFragment

/**
 *@author: njb
 *@date:   2020/3/4 0004 20:01
 *@desc:     
 */
class KnowledgeFragment :Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = LayoutInflater.from(context).inflate(R.layout.fm_knowledge, null)
        return view
    }
}

NavicationFragment

/**
 *@author: njb
 *@date:   2020/3/4 0004 20:01
 *@desc:     
 */
public class NavigationFragment :Fragment(){
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = LayoutInflater.from(context).inflate(R.layout.fm_navigation, null)
        return view
    }
}

プロジェクトプロジェクトFragment

/**
 *@author: njb
 *@date:   2020/3/4 0004 20:01
 *@desc:     
 */
public class ProjectFragment :Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = LayoutInflater.from(context).inflate(R.layout.fm_project, null)
        return view
    }
}

ここでは4つのインタフェースが同じで、入門レベルの小さな例を書いているので、具体的なレイアウトはなく、1つ書けばいいです.
レイアウトfm_ホームコード:

toolbar :

colors.xml :

    #6200EE
    #3700B3
    #03DAC5
    #FFFFFF
    #e8e8e8

スタイルコード: