在上一篇Android JetPack系列之——Navigation中我们已经知道了Navigation的使用，接下来我们就来实践一下，废话不多说，先上效果图。
这个效果相信大家都不会陌生，这基本上是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的使用就结束了。