BottomNavigationView.jpeg
引言
之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果，总是繁琐地还需要写ViewPager的适配器类，显得很是不优雅！今天就来使用现今app开发项目中最常用的BottomNavigationView来实现底部导航栏+fragment切换效果。话不多说，快@你的小伙伴一起来学习吧！
效果预览
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，不做多余操作，加载各自的布局文件即可。
示例：首页。其他的页面也是在布局中添加一个TextView用于显示界面的区别。
<?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="首页" />
</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">首页</string>
<string name="bottom_item_wechat">消息</string>
<string name="bottom_item_project">项目</string>
<string name="bottom_item_system">系统</string>
<string name="bottom_item_setting">设置</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);
}
// 参数一 是一个FrameLayout的ID，用来动态加载Fragment，
private void initLoadFragment(int containerId, int showFragment, Fragment... fragments) {
//获取到FragmentManager实例的同时去开启事物
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
for (int i = 0; i < fragments.length; i++) {
//首先将Fragment添加到事务中
transaction.add(containerId, fragments[i], fragments[i].getClass().getName());
//默认展示 fragments[showFragment]
//这里做首次Fragment的展示，如果不是指定的Fragment就先隐藏，需要的时候再显示出来
if (i != showFragment)
transaction.hide(fragments[i]);
}
//提交事物
transaction.commitAllowingStateLoss();
}
private void selectFragment() {
//注册监听事件
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();
}
}
大功告成！
图示
底部导航栏.jpeg
网友评论