一,基本用法
1,首先需要添加依赖:
implementation 'com.google.android.material:material:1.1.0'
2,布局文件中引入:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu" />
3,常用属性:
app:itemTextColor 文字的颜色,可以通过selector来控制选中和未选中的颜色
app:itemIconTint 图标的颜色,可以通过selector来控制选中和未选中的颜色
app:itemIconSize 图标大小,默认24dp
app:iteamBackground 背景颜色,默认是主题的颜色
app:itemRippleColor 点击后的水波纹颜色
app:itemTextAppearanceActive 设置选中时文字样式
app:itemTextAppearanceInactive 设置默认的文字样式
app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动
app:elevation 控制控件顶部的阴影
app:labelVisibilityMode 文字的显示模式
app:menu 指定菜单xml文件(文字和图片都写在这个里面)
4,menu文件:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_rypc"
android:icon="@drawable/main_bottom_rypc_selector"
android:title="@string/bottom_rypc" />
<item
android:id="@+id/navigation_ryzy"
android:icon="@drawable/main_bottom_ryzy_selector"
android:title="@string/bottom_ryzy" />
<item
android:id="@+id/navigation_ryct"
android:icon="@drawable/main_bottom_ryct_selector"
android:title="@string/bottom_ryct" />
<item
android:id="@+id/navigation_mine"
android:icon="@drawable/main_bottom_mine_selector"
android:title="@string/bottom_mine" />
</menu>
在每个item中设置对应的icon和title即可。这里的icon可以是一个drawable,也可以是包含不同状态对应不同图片的selector。设置了menu后一个基本的底部菜单栏就有了。
二,配合Fragment使用
1.设置对应的navigation文件,指定fragment页面
<?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"
app:startDestination="@id/navigation_rypc"
android:id="@+id/main_navigation">
<fragment
android:id="@+id/navigation_rypc"
android:name="com.heziz.yjct.fragment.RypcFragment"
tools:layout="@layout/fragment_rypc"/>
<fragment
android:id="@+id/navigation_ryzy"
android:name="com.heziz.yjct.fragment.RyzyFragment"
tools:layout="@layout/fragment_ryzy"/>
<fragment
android:id="@+id/navigation_ryct"
android:name="com.heziz.yjct.fragment.RyctFragment"
tools:layout="@layout/fragment_ryct"/>
<fragment
android:id="@+id/navigation_mine"
android:name="com.heziz.yjct.fragment.MineFragment"
tools:layout="@layout/fragment_mine"/>
</navigation>
2.activity中的布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#f8f8f8"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/main_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"
android:background="@color/white"
app:labelVisibilityMode="labeled"
app:menu="@menu/main_bottom_icons" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3.Activity中使用
public class MainActivity extends BaseAppCompatActivity {
BottomNavigationView bottomNavigationView;
@Override
protected boolean isRegisterEventBus() {
return false;
}
@Override
protected int setLayout() {
return R.layout.activity_main;
}
@Override
protected void setView() {
initNavigation();
}
@Override
protected void setData() {
}
private void initNavigation() {
NavController controller = Navigation.findNavController(this, R.id.nav_host_fragment);
bottomNavigationView = findViewById(R.id.bottom_navigation);
NavigationUI.setupWithNavController(bottomNavigationView,controller);
// 动态删除底部导航控件
// bottomNavigationView.getMenu().removeItem(R.id.navigation_ryzy);
}
三,注意事项
menu文件中item的id要和navigation文件中fragment的id保持一致,否则无法正常显示
要想取消点击选中后放大效果,只需在dimens文件中新增一下配置,设置字体大小一致
//防止字体出现变大效果
<dimen name="design_bottom_navigation_active_text_size">12dp</dimen>
<dimen name="design_bottom_navigation_text_size">12dp</dimen>
四,显示badge(角标/悬浮徽章)
还在github上查找怎么往BottomNavigationView上添加badge吗?BottomNavigationView默认提供了badge。
1,基本使用
在BottomNavigationView上添加badge很简单,它提供了如下操作badge的方法:
getBadge(int menuItemId) 获取badge
getOrCreateBadge(int menuItemId) 获取或创建badge
removeBadge(int menuItemId) 移除badge
因此添加一个badge只需要如下代码:
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val badge = navView.getOrCreateBadge(R.id.navigation_dashboard)
效果:
设置数量
badge.number = 20
设置数量后效果:
2,常用属性
getBadge和getOrCreateBadge方法返回的都是BadgeDrawable,BadgeDrawable常用的属性/方法如下:
backgroundColor 设置背景色
badgeGravity 设置Badge的显示位置,有四种可先:TOP_START,TOP_END,BOTTOM_START,BOTTOM_END,分别对应左上角,右上角,左下角和右下角。
badgeTextColor 设置文字颜色文章来源:https://www.toymoban.com/news/detail-479525.html
maxCharacterCount 最多显示几位数字,比如该项设置了3,number设置为108,则显示99+文章来源地址https://www.toymoban.com/news/detail-479525.html
到了这里,关于Android底部导航栏之BottomNavigationView的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!