底部导航BottomNavigation的使用

2020-04-02 本文已影响0人 qiHuang112

前言

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/notifications" />
</menu>

icon是矢量图（就是传说中放大无数倍都不会失真的图哈哈哈），下面是代码：
ic_home_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" />
</vector>

ic_dashboard_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,13h8L11,3L3,3v10zM3,21h8v-6L3,15v6zM13,21h8L21,11h-8v10zM13,3v6h8L21,3h-8z" />
</vector>

ic_notifications_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z" />
</vector>

写好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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home"
        android:textColor="@color/textColor"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".activity.MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/nav_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/mobile_navigation"
    app:startDestination="@id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.qi.fragment.home.HomeFragment"
        android:label="@string/home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.qi.fragment.dashboard.DashboardFragment"
        android:label="@string/dashboard"
        tools:layout="@layout/fragment_dashboard" />
    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.qi.fragment.notifications.NotificationsFragment"
        android:label="@string/notifications"
        tools:layout="@layout/fragment_notifications" />
</navigation>

运行一下

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
  tools:context=".activity.MainActivity">

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/nav_view"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:background="#FFFFFF"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:menu="@menu/bottom_nav_menu" />

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/vp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_constraintBottom_toTopOf="@id/nav_view"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

总结

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

底部导航BottomNavigation的使用

前言

1.[Jetpack] Navigation + BottomNavigation

2.[ViewPager] + BottomNavigation

总结

猜你喜欢

热点阅读