Android中使用ViewPage2+TabLayout的实现底部导航切换

        ViewPager2，一看名称就知道是我们Android中常用的ViewPager功能相似的控件，算是ViewPager的升级版。目前已经到稳定的2.1.0.0版，我们可以直接引入来使用了：

我们先来看看有哪些功能和使用上的变化：

1.Api的变动:

• FragmentStateAdapter替换了原来的 FragmentStatePagerAdapter
• RecyclerView.Adapter替换了原来的 PagerAdapter
• registerOnPageChangeCallback替换了原来的 addPageChangeListener

2.新功能：

• 支持RTL布局
• 支持竖向滚动
• 完整支持notifyDataSetChanged

3.集成方式:本文用的是androidx

在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代码：

首页HomeFragment

/**
 *@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
    }
}

项目 ProjectFragment

/**
 *@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
    }
}

这里四个界面都一样，写的是入门级的小例子，所以没有具体布局，写一个就可以了

布局fm_home代码:

toolbar布局代码:

colors.xml代码:

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

style代码：