前言
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是矢量图（就是传说中放大无数倍都不会失真的图哈哈哈），下面是代码：<?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>
ic_home_black_24dp.xml
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="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" /> </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="M3,13h8L11,3L3,3v10zM3,21h8v-6L3,15v6zM13,21h8L21,11h-8v10zM13,3v6h8L21,3h-8z" /> </vector><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
fragment_home.xmlclass HomeFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { return inflater.inflate(R.layout.fragment_home, container, false) } }<?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
activity_main.xmlclass 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) } }<?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一下，收获还是会有的。加油！
网友评论