美文网首页
Android 导航 BottomNavgiationView

Android 导航 BottomNavgiationView

作者: 嗯哼_e683 | 来源:发表于2020-10-12 14:21 被阅读0次

    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;
                }
            });
    

    相关文章

      网友评论

          本文标题:Android 导航 BottomNavgiationView

          本文链接:https://www.haomeiwen.com/subject/ofwupktx.html