android设置应用的底部导航栏,使用Kotlin开发Android应用(9) - 底部导航栏BottomNavigationView...

Use BottomNavigationView and Fragment to make home page

使用BottomNavigationView底部导航栏和Fragment碎片创建首页

一个简单的例子

创建activity

class HomeActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_home)

val navView: BottomNavigationView = findViewById(R.id.nav_view)

val navController = findNavController(R.id.nav_host_fragment)

val appBarConfiguration = AppBarConfiguration(

setOf(

R.id.navigation_movie,

R.id.navigation_rank,

R.id.navigation_cinema,

R.id.navigation_my

)

)

setupActionBarWithNavController(navController, appBarConfiguration)

navView.setupWithNavController(navController)

navView.getOrCreateBadge(R.id.navigation_movie)?.number = 2

}

}

在activity代码中，配置AppBarConfiguration和NavController

布局文件：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingTop="?attr/actionBarSize">

android:id="@+id/nav_view"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:background="?android:attr/windowBackground"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:menu="@menu/bottom_nav_menu" />

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_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:navGraph="@navigation/mobile_navigation" />

菜单文件 res/menu/bottom_nav_menu.xml

android:id="@+id/navigation_movie"

android:icon="@drawable/ic_movie"

android:title="@string/movie" />

···

导航文件 res/menu/mobile_navigation.xml

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_movie">

android:id="@+id/navigation_movie"

android:name="com.edgar.movie.ui.movie.MovieFragment"

android:label="@string/movie"

tools:layout="@layout/fragment_movie" />

...

创建对应的Fragment

class MovieFragment : Fragment() {

private lateinit var movieViewModel: MovieViewModel

override fun onCreateView(

inflater: LayoutInflater,

container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

movieViewModel =

ViewModelProviders.of(this).get(MovieViewModel::class.java)

val root = inflater.inflate(R.layout.fragment_movie, container, false)

val textView: TextView = root.findViewById(R.id.text)

movieViewModel.text.observe(viewLifecycleOwner, Observer {

textView.text = it

})

return root

}

}

Fragment的布局文件

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=".ui.movie.MovieFragment">

android:id="@+id/text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textAlignment="center"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

BottomNavigationView

com.google.android.material.bottomnavigation.BottomNavigationView

主要的xml属性:

itemBackground 底部导航栏的背景颜色,默认是主题的颜色

itemIconSize 图标大小

itemIconTint 图标颜色

itemRippleColor 图标颜色

itemTextColor 文字颜色

labelVisibilityMode 标签文本显示的方式

labeled 显示文本

selected 只显示选中的文本

unlabeled 不显示文本

auto 自动

重要的方法:

void removeBadge (int menuItemId) 移除角标

BadgeDrawable getOrCreateBadge(int menuItemId) 获取某个item的角标

void setOnNavigationItemReselectedListener 设置item被重选的监听器

void setOnNavigationItemSelectedListener 设置item被选中的监听器

注意事项:

底部导航栏默认高度是56dp,

菜单只能是3-5个

Reference 参考