如何優(yōu)雅地使用BottomNavigationView實(shí)現(xiàn)底部導(dǎo)航欄+fragment切換效果

BottomNavigationView.jpeg

引言

??之前總是使用RadioButton+ViewPager來實(shí)現(xiàn)底部導(dǎo)航欄+fragment切換效果，總是繁瑣地還需要寫ViewPager的適配器類，顯得很是不優(yōu)雅！今天就來使用現(xiàn)今app開發(fā)項(xiàng)目中最常用的BottomNavigationView來實(shí)現(xiàn)底部導(dǎo)航欄+fragment切換效果。話不多說，快@你的小伙伴一起來學(xué)習(xí)吧！

效果預(yù)覽

NavigationView.gif

用法

第一步：布局文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="MissingConstraints">

    <FrameLayout
        android:id="@+id/mContainerView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/mBottomNav"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/mBottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:clickable="true"
        android:focusable="true"
        app:itemBackground="@color/bottomNavBackground"
        app:itemTextColor="@drawable/select_bottom_nav_text_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigate_main" />

</androidx.constraintlayout.widget.ConstraintLayout>

第二步：新建Fragment+其Layout布局文件

HomeFragment
WeChatFragment
ProjectFragment
SystemFragment
SettingFragment，不做多余操作，加載各自的布局文件即可。

示例：首頁(yè)。其他的頁(yè)面也是在布局中添加一個(gè)TextView用于顯示界面的區(qū)別。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".fragment.HomeFragment">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首頁(yè)" />

</androidx.constraintlayout.widget.ConstraintLayout>

第三步：新建menu資源文件夾，并新建布局文件

bottom_navigate_main.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/home"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_home"
        android:title="@string/bottom_item_home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/wechat"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_wechat"
        android:title="@string/bottom_item_wechat"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/project"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_project"
        android:title="@string/bottom_item_project"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/system"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_system"
        android:title="@string/bottom_item_system"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/setting"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_setting"
        android:title="@string/bottom_item_setting"
        app:showAsAction="ifRoom" />

</menu>

R.drawable.select_bottom_nac_home選擇器布局文件

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

Values.xml文件中添加如下字段

<string name="bottom_item_home">首頁(yè)</string>
<string name="bottom_item_wechat">消息</string>
<string name="bottom_item_project">項(xiàng)目</string>
<string name="bottom_item_system">系統(tǒng)</string>
<string name="bottom_item_setting">設(shè)置</string>

第四步：在Activity中書寫邏輯代碼

public class MainActivity extends AppCompatActivity {

    private Fragment[] mFragments = new Fragment[5];
    private BottomNavigationView mBottomNav;
    private int mPreFragmentFlag = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        selectFragment();
    }

    private void initView() {
        mBottomNav = findViewById(R.id.mBottomNav);

    }

    private void initFragment() {
        mFragments[0] = new HomeFragment();
        mFragments[1] = new WeChatFragment();
        mFragments[2] = new ProjectFragment();
        mFragments[3] = new SystemFragment();
        mFragments[4] = new SettingFragment();
        initLoadFragment(R.id.mContainerView, 0, mFragments);
    }

    // 參數(shù)一 是一個(gè)FrameLayout的ID，用來動(dòng)態(tài)加載Fragment，
    private void initLoadFragment(int containerId, int showFragment, Fragment... fragments) {
        //獲取到FragmentManager實(shí)例的同時(shí)去開啟事物
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        for (int i = 0; i < fragments.length; i++) {
            //首先將Fragment添加到事務(wù)中
            transaction.add(containerId, fragments[i], fragments[i].getClass().getName());
            //默認(rèn)展示 fragments[showFragment]
            //這里做首次Fragment的展示，如果不是指定的Fragment就先隱藏，需要的時(shí)候再顯示出來
            if (i != showFragment)
                transaction.hide(fragments[i]);
        }
        //提交事物
        transaction.commitAllowingStateLoss();

    }

    private void selectFragment() {
        //注冊(cè)監(jiān)聽事件
        mBottomNav.setItemIconTintList(null);
        mBottomNav.setOnNavigationItemSelectedListener(menuItem -> {
            switch (menuItem.getItemId()) {
                case R.id.home:
                    showAndHideFragment(mFragments[0], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 0;
                    break;
                case R.id.wechat:
                    showAndHideFragment(mFragments[1], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 1;
                    break;
                case R.id.project:
                    showAndHideFragment(mFragments[2], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 2;
                    break;
                case R.id.system:
                    showAndHideFragment(mFragments[3], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 3;
                    break;
                case R.id.setting:
                    showAndHideFragment(mFragments[4], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 4;
                    break;
            }
            return true;
        });
    }

    //加載不同的Fragment
    private void showAndHideFragment(Fragment show, Fragment hide) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (show != hide)
            transaction.show(show).hide(hide).commitAllowingStateLoss();

    }
}

大功告成！

圖示

底部導(dǎo)航欄.jpeg
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。