在单activity多frament布局中,因为RadioGroup加FragmentManager比较灵活,以前我都是使用RadioGroup加FragmentManager实现底部导航栏,最近发现BottomNavigationView和Novigation实现底部导航栏的效果也不错,尤其是这样的写法很简便,就记录一下
话不多说直接上代码
1.activity_main布局
NavHostFragment 要导包哈,应该有提示可以自动导包,没有自己去找好了
app:defaultNavHost="true" 这是拦截系统返回键的
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="all">
<fragment
android:id="@+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/mobile_navigation" />
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:background="@color/gary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="@color/white"
app:itemIconTint="@drawable/main_bottom_navigation"
app:itemTextColor="@drawable/main_bottom_navigation"
app:menu="@menu/menu_navigation" />
</LinearLayout>
2.mobile_navigation布局
这里需要注意的是,这里的id要和menu里的id对应
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/main_nav"
app:startDestination="@id/home_page">
<fragment
android:id="@+id/home_page"
android:name="com.sxs.notes.fragment.FragmentHomePage"
android:label="首页"
tools:layout="@layout/fragment_home_page" />
<fragment
android:id="@+id/calendar"
android:name="com.sxs.notes.fragment.FragmentCalendar"
android:label="日历"
tools:layout="@layout/fragment_calendar" />
<fragment
android:id="@+id/grouping"
android:name="com.sxs.notes.fragment.FragmentGrouping"
android:label="分组"
tools:layout="@layout/fragment_grouping" />
<fragment
android:id="@+id/personal"
android:name="com.sxs.notes.fragment.FragmentPersonal"
android:label="个人中心"
tools:layout="@layout/fragment_personal" />
</navigation>
3.main_bottom_navigation
这里我直接用的纯黑,想要什么颜色自己设置就行了
app:itemBackground="@color/white" 背景色
app:itemIconTint="@drawable/main_bottom_navigation" 图标颜色
app:itemTextColor="@drawable/main_bottom_navigation" 文字颜色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#000000" android:state_checked="true" />
<item android:color="#000000" android:state_checked="false" />
</selector>
4.menu_navigation
看到了吧,要和mobile_navigation里的id对应,要不你点击没效果
<?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_page"
android:checked="true"
android:icon="@drawable/bg_home_page"
android:title="" />
<item
android:id="@+id/calendar"
android:icon="@drawable/bg_calendar"
android:title="" />
<item
android:id="@+id/grouping"
android:icon="@drawable/bg_grouping"
android:title="" />
<item
android:id="@+id/personal"
android:icon="@drawable/bg_personal"
android:title="" />
</menu>
5.MainActivity代码
只需要三句话,这可比RadioGroup简单多了
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//实例化BottomNavigationView
BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_nav);
//获取NavController实例
//NavController:负责操作Navigation框架下的Fragment的跳转与退出、动画、监听当前Fragment信息
//这个R.id.fragment8就是Activity布局里fragment控件的id
NavController controller = Navigation.findNavController(this, R.id.fragment);
//在选择菜单时调用,当目的地更改时,BottomNavigationView中的选定项将自动更新
NavigationUI.setupWithNavController(bottomNavigationView, controller);
}
}