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方式实现.

MainActivity代码:

class MainActivity : AppCompatActivity() {
    //标题
    private val titles = arrayOf("首页", "知识", "导航", "项目")
    private val fragmentList : MutableList<Fragment> = 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()
    }
}

5.activity_main布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="MissingConstraints">
​
    <include layout="@layout/toolbar" />
​
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
​
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/view_white" />
​
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:tabGravity="fill"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorGravity="center"
        app:tabIndicatorHeight="0dp"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabRippleColor="@android:color/transparent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@android:color/darker_gray" />
</LinearLayout>

6.Fragment代码：

6.1首页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
    }
}

6.2知识 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
    }
}

6.3导航 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
    }
}

6.4项目 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
    }
}

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

7.1fm_home布局代码:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是首页"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

7.2 toolbar布局代码:

​
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    tools:ignore="PrivateResource">
​
    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:textSize="16sp"/>
    <ImageView
        android:id="@+id/iv_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="15dp"/>
</androidx.appcompat.widget.Toolbar>

7.3 colors.xml代码:

​
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="white">#FFFFFF</color>
    <color name="view_white">#e8e8e8</color>
</resources>

7.4 style代码：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
​
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

8.完成的效果图如下:

9.最后给出例子的完整源码地址:

ViewPager2Demo: Android中使用ViewPager2+Tablayout实现底部导航切换.

10.欢迎大家进行讨论，如有问题，及时更改.后面会逐步尝试各种新的api和用法.