底部导航BottomNavigation的使用

前言

BottomNavigation是MaterialDesign中的一个组件，能够以menu的形式创建多个底部导航按钮，但是本质上仅仅是对Menu的点击事件的一个封装而已，一般自己写的底部导航栏使用TextView或ImageView之类的控件，然后设置View.OnClickListener设置点击事件，对于BottomNavigationView来说，它提供了setOnNavigationItemSelectedListener来设置每个item的点击事件，所以用起来很简单。下面介绍两种常用的使用方法。

1.[Jetpack] Navigation + BottomNavigation

安卓官方推出的就是这种使用方式，用法经过Jetpack的封装，使代码看起来非常简单，但是想要理解就得自己看源码了。下面介绍一下使用方法吧。

• gradle配置依赖
  之前说了BottomNavigationView是MaterialDesign里的控件，所以得引入第一个，其余四个则是[Jetpack]导航里的依赖。

  dependencies {
      implementation 'com.google.android.material:material:1.1.0' // BottomNavigation
      implementation 'androidx.navigation:navigation-fragment-ktx:2.2.1'
      implementation 'androidx.navigation:navigation-ui-ktx:2.2.1'
      implementation 'androidx.navigation:navigation-fragment:2.2.1'
      implementation 'androidx.navigation:navigation-ui:2.2.1'
      ......
  }
  

• res目录下创建menu
  BottomNavigationView不需要自己写TextView之类的设置点击事件，那View怎么来呢，就是通过MenuInflate引入的Menu的布局，然后通过MaterialDesign搞一波动画效果，点击效果之类的，改成一个好看的风格，给你使用。如下：bottom_nav_menu.xml
  icon是矢量图（就是传说中放大无数倍都不会失真的图哈哈哈），下面是代码：
  ic_home_black_24dp.xml
  ic_dashboard_black_24dp.xml
  ic_notifications_black_24dp.xml

• 写好Fragment以及对应的布局文件
  三个都是一样的，改改名字就好了，就不重复写了
  HomeFragment.kt

  class HomeFragment : Fragment() {
      override fun onCreateView(
          inflater: LayoutInflater,
          container: ViewGroup?,
          savedInstanceState: Bundle?
      ): View? {
          return inflater.inflate(R.layout.fragment_home, container, false)
      }
  }
  

  fragment_home.xml

• MainActivity使用BottomNavigationView
  MainActivity.kt

  class MainActivity : AppCompatActivity() {
  
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
          initViews()
      }
  
      private fun initViews() {
          // host fragment
          val navController = findNavController(R.id.nav_host_fragment)
  
          // action bar <> fragment
          val appBarConfiguration = AppBarConfiguration(
              setOf(
                  R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications
              )
          )
          setupActionBarWithNavController(navController, appBarConfiguration)
  
          // bottom navigation <> fragment
          nav_view.setupWithNavController(navController)
      }
  }
  
  

  activity_main.xml

• navGraph:使用Jetpack导航
  jetpack实现了一种基于navController的导航方式，只要在res中新建一个navigation的目录，将需要支持导航的Fragment声明到该文件，然后传入导航的itemid就可以进行导航，而且在navigation目录中还能可视化，甚至还支持拖拽，不过本质上都是切换Fragment方法的包装而已，只是方便你开发的时候看着舒服。顺便还帮你弄了一些切换fragment的效果，这个也是可以自定义的，相当于加一些animation而已。废话不多说了，下面是代码：navigation/mobile_navigation.xml

• 运行一下

2.[ViewPager] + BottomNavigation

这个就更简单了，没有被jetpack封装过的代码显得如此的简单，清晰（哈哈哈，不是说Jetpack不好，只是用起来太过简洁，让我很难有学习的劲头啊orz）
基于上面的代码，直接改一下Activity就好了
下面是代码:
MainActivity.kt

class MainActivity : AppCompatActivity() {

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

  private fun initViews() {
      val fragments = getFragments()
      vp.adapter = object : FragmentStateAdapter(this) {
          override fun getItemCount() = fragments.size

          override fun createFragment(position: Int) = fragments[position]
      }
      // 禁用左右滑动切换页签
      vp.isUserInputEnabled = false

      nav_view.setOnNavigationItemSelectedListener { item ->
          when (item.itemId) {
              R.id.navigation_home -> vp.currentItem = 0
              R.id.navigation_dashboard -> vp.currentItem = 1
              R.id.navigation_notifications -> vp.currentItem = 2
          }
          true
      }
  }

  private fun getFragments() =
      mutableListOf(HomeFragment(), DashboardFragment(), NotificationsFragment())
}

activity_main.xml

总结

今天是看Jetpack源码的第一天，以我的感觉，Jetpack的navigation就是在原有的实现基础上封装了几层，可能暂时我看的还不深入，所以对Jetpack的认识比较暂时停留在这儿。
还有一点忘说了，BottomNavigationView在绑定ViewPager使用的时候还有个bug，它必须设置禁止手动左右滑动，否则没法与底部导航同步，我看了源码，并没有提供解决办法，所以还是别想着viewpager和jetpack的BottomNavigationView合在一起用了，还是TabLayout和ViewPager合在一起好用！
写到这儿才发现标题是使用BottomNavigationView，说了半天Jetpack，就很尴尬，不管怎么说，积极看源码，顺带着自己debug一下，收获还是会有的。加油！