【Android -- Material Design】BottomNavigationView 的基本使用

不断学习，做更好的自己！💪

视频号	CSDN	简书
欢迎打开微信，关注我的视频号：程序员朵朵	点我	点我

前言

官网：BottomNavigationView

引入 material 包：

implementation 'com.google.android.material:material:1.2.1'

效果图

使用

1. 布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottomNavigationView" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:layout_alignParentBottom="true"
        app:itemTextColor="@drawable/bottom_navigation_item_selector"
        app:menu="@menu/main_bottom_navigation" />

</RelativeLayout>

2. 颜色选择器
   bottom_navigation_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_focused" android:state_checked="true" />
    <item android:color="@color/color_un_focused" android:state_checked="false" />
</selector>

------------------------------------
    <color name="color_focused">#E45242</color>
    <color name="color_un_focused">#222222</color>

3. 菜单
   main_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_message"
        android:enabled="true"
        android:icon="@drawable/sel_home"
        android:title="首页"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_contacts"
        android:enabled="true"
        android:icon="@drawable/sel_mine"
        android:title="我的"
        app:showAsAction="ifRoom" />
</menu>

4. 逻辑代码
   MainActivity.java

public class MainActivity extends BaseActivity {
    private HomeFragment mHomeFragment = HomeFragmentFactory.getInstance().getHomeFragment();
    private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();

    private List<Fragment> mFragments = new ArrayList<>();

    @BindView(R.id.bottomNavigationView)
    BottomNavigationView mNavigationView;

    @Override
    public int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    public void initView() {
        mFragments.add(mHomeFragment);
        mFragments.add(mMineFragment);

        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switchFragment(item.getItemId());
                return true;
            }
        });

        switchFragment(R.id.menu_message);
    }

    /**
     * 切换fragment
     *
     * @param id
     * @return
     */
    private void switchFragment(int id) {
        Fragment fragment = null;
        switch (id) {
            case R.id.menu_message:
                fragment = mFragments.get(0);
                break;

            case R.id.menu_contacts:
                fragment = mFragments.get(1);
                break;

            default:
                break;
        }
        if (fragment != null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.fl_content,fragment).commit();
        }
    }


}