BottomNavigationView.jpeg
引言
??之前總是使用RadioButton+ViewPager來(lái)實(shí)現(xiàn)底部導(dǎo)航欄+fragment切換效果掂铐，總是繁瑣地還需要寫(xiě)ViewPager的適配器類(lèi)罕拂，顯得很是不優(yōu)雅！今天就來(lái)使用現(xiàn)今app開(kāi)發(fā)項(xiàng)目中最常用的BottomNavigationView來(lái)實(shí)現(xiàn)底部導(dǎo)航欄+fragment切換效果堡纬。話(huà)不多說(shuō)聂受，快@你的小伙伴一起來(lái)學(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中書(shū)寫(xiě)邏輯代碼
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镜悉，用來(lái)動(dòng)態(tài)加載Fragment祟辟，
private void initLoadFragment(int containerId, int showFragment, Fragment... fragments) {
//獲取到FragmentManager實(shí)例的同時(shí)去開(kāi)啟事物
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í)候再顯示出來(lái)
if (i != showFragment)
transaction.hide(fragments[i]);
}
//提交事物
transaction.commitAllowingStateLoss();
}
private void selectFragment() {
//注冊(cè)監(jiān)聽(tīng)事件
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
