Android開(kāi)發(fā)快速實(shí)現(xiàn)底部導(dǎo)航欄示例
Tint 著色器
優(yōu)點(diǎn):去除“無(wú)用”圖片,節(jié)省空間
配合BottomNavigationView,實(shí)現(xiàn)一個(gè)快速,簡(jiǎn)潔的Tab欄
傳統(tǒng)做法:Tab 切換,字體變色、圖片變色。至少給我提供八張圖,四張默認(rèn),四張選中,然后通過(guò) selector 文件設(shè)置
現(xiàn)在BottomNavigationView只需四張圖?。。?/p>


依賴(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>
編寫(xiě)渲染顏色選擇器-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="首頁(yè)" />
<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欄
/* 限制頁(yè)面數(shù),防止界面反復(fù)重新加載 */
viewPager.setOffscreenPageLimit(4);
// ViewPager 滑動(dòng)事件監(jiān)聽(tīng)
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
//這里我做了中間凹凸按鈕,所以要特別處理以下
//如果沒(méi)有我這種情況的,直接加上這個(gè) navBottomMenu.getMenu().getItem(i).setChecked(true); 就不用再加switch語(yǔ)句了
switch (i) {
case 0:
//將滑動(dòng)到的頁(yè)面對(duì)應(yīng)的 menu 設(shè)置為選中狀態(tài)
navBottomMenu.getMenu().getItem(i).setChecked(true);
break;
case 1:
//將滑動(dòng)到的頁(yè)面對(duì)應(yīng)的 menu 設(shè)置為選中狀態(tài)
navBottomMenu.getMenu().getItem(i).setChecked(true);
break;
case 2:
case 3:
//將滑動(dòng)到的頁(yè)面對(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)的適配器
(僅供參考,大家也可以去參考以下別人寫(xiě)的代碼)
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欄,比自己以前寫(xiě)的代碼更加簡(jiǎn)潔明了?。?!
以上就是Android開(kāi)發(fā)快速實(shí)現(xiàn)底部導(dǎo)航欄示例的詳細(xì)內(nèi)容,更多關(guān)于Android底部導(dǎo)航欄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android使用ImageView實(shí)現(xiàn)支持手勢(shì)縮放效果
這篇文章主要介紹了Android使用ImageView實(shí)現(xiàn)支持手勢(shì)縮放效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
Android事件分發(fā)機(jī)制(下) View的事件處理
這篇文章主要介紹了Android事件分發(fā)機(jī)制下篇, View的事件處理的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Android開(kāi)發(fā)之拖動(dòng)條和評(píng)分組件用法分析
這篇文章主要介紹了Android開(kāi)發(fā)之拖動(dòng)條和評(píng)分組件用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android拖動(dòng)條及評(píng)分組件的布局與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07
Android Flutter實(shí)現(xiàn)圖片滑動(dòng)切換效果
Flutter 為了簡(jiǎn)化開(kāi)發(fā),提供了不少轉(zhuǎn)換動(dòng)畫(huà)組件,這類組件通常命名為 xxTransition。本篇要介紹的就是 SlideTransition,并用它實(shí)現(xiàn)圖片滑動(dòng)切換效果,感興趣的可以了解一下2022-04-04
Android開(kāi)發(fā) -- 控件的顯示與隱藏 setVisibility View.VISIBLE View.INVISI
本文簡(jiǎn)單介紹在Android開(kāi)發(fā)中控件的顯示與隱藏幾種常見(jiàn)的屬性,給大家一個(gè)參考,希望對(duì)大家學(xué)習(xí)有所幫助。2016-06-06
制作獨(dú)立的Android模擬器實(shí)現(xiàn)方法
本文主要介紹如何制作獨(dú)立的Android模擬器,這里給大家提供詳細(xì)的制作流程,有需要的小伙伴可以參考下2016-08-08

