AndroidMaterial常⽤组件详解(七)——BottomNavigationVie。。。
⼀、前⾔
在开发中,底部导航栏⼗分常见。⼀般来说,我们可以⾃⼰组合控件实现,⽐如LinearLayout + TextView(使⽤android:drawableTop属性+selector状态切换)、RadioGroup + RadioButton等等组合控件的⽅法⾃定义实现复杂效果。⽽BottomNavigationView控件也是⼀种不错的选择。
⼆、实现⽅式
2.1 基础使⽤
<LinearLayout
android="schemas.android/apk/res/android"
app="schemas.android/apk/res-auto"
layout_width="match_parent"
layout_height="wrap_content">
...
&le.android.material.bottomnavigation.BottomNavigationView
id="@+id/bottom_navigation"
layout_width="match_parent"
layout_height="wrap_content"
menu="@menu/bottom_navigation_menu"/>
</LinearLayout>
在menu⽬录的bottom_l
<?xml version="1.0" encoding="utf-8"?>
<menu android="schemas.android/apk/res/android">
<item
id="@+id/navigation_home"
icon="@drawable/ic_home_black_24dp"
title="@string/title_home"/>
<item
id="@+id/navigation_dashboard"
icon="@drawable/ic_dashboard_black_24dp"
title="@string/title_dashboard"/>
<item
id="@+id/navigation_notifications"
icon="@drawable/ic_notifications_black_24dp"
title="@string/title_notifications"/>
</menu>
注意: BottomNavigationView不⽀持超过5个menu项⽬。
设置⼀个侦听器,该侦听器在选择底部导航项时将得到通知。除⾮还设置了{@link OnNavigationItemReselectedListener},否则当重新选择当前选择的项⽬时,也会通知此侦听器。
BottomNavigationView.setOnNavigationItemSelectedListener{ item ->
when(item.itemId){
R.id.item1 ->{
// Respond to navigation item 1 click
true
}
R.id.item2 ->{
// Respond to navigation item 2 click
true
}
else->false
}
}
设置⼀个侦听器,当重新选择当前选择的底部导航项时将通知该侦听器。
bottomNavigation.setOnNavigationItemReselectedListener{ item ->
when(item.itemId){
R.id.item1 ->{
// Respond to navigation item 1 reselection
}
R.id.item2 ->{
// Respond to navigation item 2 reselection
}
}
}position标签属性
2.2 添加未读提⽰
val menuItemId = Item(0).itemId
var badge = OrCreateBadge(menuItemId)
badge.isVisible =true
// An icon only badge will be displayed unless a number is set:
badge.number =99
已读之后隐藏提⽰
val menuItemId = Item(0).itemId
val badgeDrawable = Badge(menuItemId)
badgeDrawable?.isVisible =false
badgeDrawable?.clearNumber()
删除不再需要的提⽰
val menuItemId = Item(0).itemId
修改提⽰位置
val menuItemId = Item(0).itemId
val badgeDrawable = Badge(menuItemId)
badgeDrawable?.badgeGravity = BadgeGravity
BadgeGravity的取值:
BadgeDrawable.TOP_END,
BadgeDrawable.TOP_START,
BadgeDrawable.BOTTOM_END,
BadgeDrawable.BOTTOM_START
2.3 与navigation使⽤
<?xml version="1.0" encoding="utf-8"?>
&straintlayout.widget.ConstraintLayout android="schemas.android/apk/res/android"
app="schemas.android/apk/res-auto"
id="@+id/container"
layout_width="match_parent"
layout_height="match_parent"
paddingTop="?attr/actionBarSize">
&le.android.material.bottomnavigation.BottomNavigationView
id="@+id/nav_view"
layout_width="0dp"
layout_height="wrap_content"
layout_marginStart="0dp"
layout_marginEnd="0dp"
background="?android:attr/windowBackground"
labelVisibilityMode="labeled"
layout_constraintBottom_toBottomOf="parent"
layout_constraintLeft_toLeftOf="parent"
layout_constraintRight_toRightOf="parent"
menu="@menu/bottom_nav_menu"/>
<fragment
id="@+id/nav_host_fragment"
name="androidx.navigation.fragment.NavHostFragment"
layout_width="match_parent"
layout_height="match_parent"
defaultNavHost="true"
layout_constraintBottom_toTopOf="@id/nav_view"
layout_constraintLeft_toLeftOf="parent"
layout_constraintRight_toRightOf="parent"
layout_constraintTop_toTopOf="parent"
navGraph="@navigation/mobile_navigation"/>
</straintlayout.widget.ConstraintLayout>
l
<?xml version="1.0" encoding="utf-8"?>
<navigation android="schemas.android/apk/res/android"
app="schemas.android/apk/res-auto"
tools="schemas.android/tools"
id="@+id/mobile_navigation"
startDestination="@+id/navigation_home">
<fragment
id="@+id/navigation_home"
name="application4.ui.home.HomeFragment"
label="@string/title_home"
layout="@layout/fragment_home"/>
<fragment
id="@+id/navigation_dashboard"
name="application4.ui.dashboard.DashboardFragment"
label="@string/title_dashboard"
layout="@layout/fragment_dashboard"/>
<fragment
id="@+id/navigation_notifications"
name="ifications.NotificationsFragment"
label="@string/title_notifications"
layout="@layout/fragment_notifications"/>
</navigation>
这⾥要注意,菜单中的每个选项的id必须要和导航图中的每个fragment对应,不然导航是不起作⽤的class MainActivity :AppCompatActivity(){
override fun onCreate(savedInstanceState: Bundle?){
setContentView(R.layout.activity_main)
val navView: BottomNavigationView =findViewById(R.id.nav_view)
val navController =findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)
}
}
2.4 与ViewPager使⽤
var fragments: MutableList<Fragment>=ArrayList()
fragments.add(Fragment1())
fragments.add(Fragment2())
fragments.add(Fragment3())
viewPager.adapter =object:FragmentStatePagerAdapter(supportFragmentManager){ override fun getItem(position: Int): Fragment {
return fragments[position]
}
override fun getCount(): Int {
return fragments.size
}
//动态添加TabItem⽂本
override fun getPageTitle(position: Int): CharSequence?{
(position)
}
}
bottomNavigationView.setOnNavigationItemSelectedListener{ item ->
when(item.itemId){
R.id.item1 ->{
viewPager.currentItem =0
}
R.id.item2 ->{
viewPager.currentItem =1
}
else-> viewPager.currentItem =2
}
}
viewPager.addOnPageChangeListener(object: ViewPager.OnPageChangeListener{ override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int){} override fun onPageSelected(position: Int){
val menuItem = Item(position)
menuItem.isChecked =true
}
override fun onPageScrollStateChanged(state: Int){}
})
//禁⽌ViewPager滑动
viewPager.setOnTouchListener(object: View.OnTouchListener{
override fun onTouch(v: View?, event: MotionEvent?): Boolean {
return true
}
})
2.5 与ViewPager2使⽤
TabLayout使⽤ ViewPager2 与 ViewPager 基本相同,但是实现⽅式不同。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论