Android開發(fā)快速實(shí)現(xiàn)底部導(dǎo)航欄示例

更新時(shí)間：2022年04月27日 17:25:26 作者：ZH-黑夜

這篇文章主要為大家介紹了Android開發(fā)快速實(shí)現(xiàn)底部導(dǎo)航欄的示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Tint 著色器

優(yōu)點(diǎn)：去除“無用”圖片，節(jié)省空間

配合BottomNavigationView，實(shí)現(xiàn)一個(gè)快速，簡(jiǎn)潔的Tab欄

傳統(tǒng)做法：Tab 切換，字體變色、圖片變色。至少給我提供八張圖，四張默認(rèn)，四張選中，然后通過 selector 文件設(shè)置

現(xiàn)在BottomNavigationView只需四張圖?。?！

依賴（AndroidX）

implementation 'com.google.android.material:material:1.1.0-alpha01'

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/white"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/fLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/nav_bottom_menu"
        android:background="@color/bg" />
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_above="@+id/nav_bottom_menu"
        android:background="#FFE1E0E0" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_bottom_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@null"
        app:itemIconTint="@color/tint_selector_menu_color"
        app:itemTextColor="@color/tint_selector_menu_color"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/nav_bottom_menu" />
    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="12dp"
        android:src="@drawable/ic_log"
        app:riv_corner_radius="200dp" />
</RelativeLayout>

編寫渲染顏色選擇器-tint_selector_menu_color

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

menu 文件中 icon-nav_bottom_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/iv_home"
        android:icon="@drawable/iv_home"
        android:title="首頁" />
    <item
        android:id="@+id/iv_wechat"
        android:icon="@drawable/iv_wechat"
        android:title="視頻" />
    <item
        android:id="@+id/riv_script"
        android:icon="@null"
        android:title="@null" />
    <item
        android:id="@+id/iv_pipi"
        android:icon="@drawable/iv_pipi"
        android:title="電影" />
    <item
        android:id="@+id/iv_mine"
        android:icon="@drawable/iv_mine"
        android:title="我的" />
</menu>

BottomNavigationView的點(diǎn)擊事件

這里配合Fragmen

/* Menu顯示彩色圖標(biāo) */
        //navBottomMenu.setItemIconTintList(null);
 /* 導(dǎo)航欄點(diǎn)擊事件 */
        navBottomMenu.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.iv_home: {
                        FragmentManager.startFragmentHome(Fragment_A.class);
                        return true;
                    }
                    case R.id.iv_wechat: {
                        FragmentManager.startFragmentHome(Fragment_B.class);
                        return true;
                    }
                    case R.id.iv_pipi: {
                        FragmentManager.startFragmentHome(Fragment_C.class);
                        return true;
                    }
                    case R.id.iv_mine: {
                        FragmentManager.startFragmentHome(Fragment_D.class);
                        return true;
                    }
                    default:
                        break;
                }
                return false;
            }
        });

配合ViewPager實(shí)現(xiàn)Tab欄

 /* 限制頁面數(shù)，防止界面反復(fù)重新加載  */
    viewPager.setOffscreenPageLimit(4);
 // ViewPager 滑動(dòng)事件監(jiān)聽
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
            }
            @Override
            public void onPageSelected(int i) {
            //這里我做了中間凹凸按鈕，所以要特別處理以下
            //如果沒有我這種情況的，直接加上這個(gè)  navBottomMenu.getMenu().getItem(i).setChecked(true); 就不用再加switch語句了
                switch (i) {
                    case 0:
                        //將滑動(dòng)到的頁面對(duì)應(yīng)的 menu 設(shè)置為選中狀態(tài)
                        navBottomMenu.getMenu().getItem(i).setChecked(true);
                        break;
                    case 1:
                        //將滑動(dòng)到的頁面對(duì)應(yīng)的 menu 設(shè)置為選中狀態(tài)
                        navBottomMenu.getMenu().getItem(i).setChecked(true);
                        break;
                    case 2:
                    case 3:
                        //將滑動(dòng)到的頁面對(duì)應(yīng)的 menu 設(shè)置為選中狀態(tài)
                        navBottomMenu.getMenu().getItem(i + 1).setChecked(true);
                        break;
                    default:
                        break;
                }
            }
            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
    }

對(duì)應(yīng)的適配器

（僅供參考，大家也可以去參考以下別人寫的代碼）

public class FragPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    public FragPagerAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

BottomNavigationView實(shí)現(xiàn)的Tab欄，比自己以前寫的代碼更加簡(jiǎn)潔明了?。。?/p>

以上就是Android開發(fā)快速實(shí)現(xiàn)底部導(dǎo)航欄示例的詳細(xì)內(nèi)容，更多關(guān)于Android底部導(dǎo)航欄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: