Android JetPack系列之——BottomNavigationView

在上一篇Android JetPack系列之——Navigation中我们已经知道了Navigation的使用，接下来我们就来实践一下，废话不多说，先上效果图。

BottomNavigationView.gif

这个效果相信大家都不会陌生，这基本上是APP进入时候的通用模式，通常情况下我们会使用RadioGroup+RadioButton或者LinearLayout+RelativeLayout来实现，今天，我们换一种方式去实现，使用我们的Jetpack来实现。

实现步骤：

步骤一：添加依赖

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.2.0'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.2.2'
    implementation 'androidx.navigation:navigation-ui-ktx:2.2.2'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

步骤二：创建Fragment
DashboardFragment

class DashboardFragment : Fragment() {

    private lateinit var dashboardViewModel: DashboardViewModel

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        dashboardViewModel =
                ViewModelProvider(this).get(DashboardViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_dashboard, container, false)
        val textView: TextView = root.findViewById(R.id.text_dashboard)
        dashboardViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })
        return root
    }
}

HomeFragment

class HomeFragment : Fragment() {

    private lateinit var homeViewModel: HomeViewModel

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        homeViewModel =
                ViewModelProvider(this).get(HomeViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_home, container, false)
        val textView: TextView = root.findViewById(R.id.text_home)
        homeViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })
        return root
    }
}

NotificationsFragment

class NotificationsFragment : Fragment() {

    private lateinit var notificationsViewModel: NotificationsViewModel

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        notificationsViewModel =
                ViewModelProvider(this).get(NotificationsViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_notifications, container, false)
        val textView: TextView = root.findViewById(R.id.text_notifications)
        notificationsViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })
        return root
    }
}

步骤三：创建navigation文件夹并创建对应的文件

步骤四：在我们的主Activity里面添加BottomNavigationView和fragment

步骤五：在我们的主Activity里面将BottomNavigationView与fragment进行关联

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        val navController = findNavController(R.id.nav_host_fragment)
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(setOf(
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }

这里需要强调的一点就是BottomNavigationView与fragment进行关联的方式很简单。
获取BottomNavigationView的实例然后将fragment依赖的NavController进行绑定就OK了。而底部的显示的样式直接通过BottomNavigationView的 app:menu="@menu/bottom_nav_menu"来实现就好了。

注意事项：
（1）给Fragment切换添加动画
在anim文件夹里面新增
nav_default_enter_anim对应enter
nav_default_exit_anim对应exit
nav_default_pop_enter_anim对应popEnter
nav_default_pop_exit_anim对应popExit
（2）取消BottomNavigationView的点击动画
在BottomNavigationView里面添加样式

app:itemIconTint="@drawable/selector_bottom_navigation"
app:itemRippleColor="@android:color/transparent"
app:itemTextColor="@drawable/selector_bottom_navigation"

到此，BottomNavigationView与fragment的使用就结束了。