Android的底部导航栏 效果如下:
底部导航效果.png
代码如下:
<?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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<!-- 底部导航栏 -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_btn_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
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:layout_alignParentBottom="false"
android:elevation="1dp"
app:elevation="1dp"
app:itemBackground="@null"
app:itemHorizontalTranslationEnabled="false"
app:labelVisibilityMode="labeled"/>
<!-- navigation导航栏 -->
<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_btn_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
常用属性
- app:itemTextColor="" 设置文字颜色
- app:itemIconTint="" 设置图片颜色 使用自己的图片是记得在代码中添加 navBtnView.setItemIconTintList(null);
- app:labelVisibilityMode="labeled" 选中的图标不让变大
-
app:menu="@menu/bottom_nav_menu" 设置底部导航栏条目
在res文件夹下创建menu文件创建menu.xml文件
image.png
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigationbtm_home"
android:icon="@drawable/select_bottom_bar_home"
android:title="@string/title_home" />
<item
android:id="@+id/navigationbtm_find"
android:icon="@drawable/select_bottom_bar_find"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigationbtm_my"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>
icon图片使用的选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@mipmap/icon_main_rent_select"/>
<item android:state_selected="false" android:drawable="@mipmap/icon_main_rent"/>
</selector>
点击事件的监听:
navBtnView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { //navBtnView控件名
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
NavController navController = Navigation.findNavController(MainActivity.this, R.id.nav_host_fragment);
switch (item.getItemId()){
case R.id.navigationbtm_home:
navController.navigate(R.id.navigation_home);
showToast("主页");
break;
case R.id.navigationbtm_find:
showToast("发现");
navController.navigate(R.id.navigation_find);
break;
case R.id.navigationbtm_my:
showToast("我的");
navController.navigate(R.id.navigation_my);
break;
}
return true;
}
});
网友评论