Android

Android JetPack学习总结(六)

BottomNavigation

直接用navigation组件来实现底部的导航栏,而不是借助第三方组件。其本身还是要控制多个fragment之间的切换,只不过这些fragment之间本身并没有父子关系。

现在有一个有三个fragment的demo,每一个fragment都对应着一个viewModel,这直接用as生成即可。

image 10

创建三个底部导航栏图标所要用到的矢量图:

image 11

创一个menu类型的资源文件,拖动三个Menu Item到其中,并且设置图标。

注意:item的id一定要和navigation文件中的fragment的id相同。

代码如下:

//menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/firstFragment"
        android:icon="@drawable/ic_baseline_filter_1_24"
        android:title="旋转" />
    <item
        android:id="@+id/secondFragment"
        android:icon="@drawable/ic_baseline_filter_2_24"
        android:title="缩放" />
    <item
        android:id="@+id/thirdFragment"
        android:icon="@drawable/ic_baseline_filter_3_24"
        android:title="移动" />
</menu>

创建一个navigation的资源文件,用于实现三个fragment之间的切换(尽管目前彼此并没有相互联系):

//navigation.xml
<?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/navigation"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.shopkeeper.bottomnavigationdemo.FirstFragment"
        android:label="旋转"
        tools:layout="@layout/first_fragment" />
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.shopkeeper.bottomnavigationdemo.SecondFragment"
        android:label="缩放"
        tools:layout="@layout/second_fragment" />
    <fragment
        android:id="@+id/thirdFragment"
        android:name="com.shopkeeper.bottomnavigationdemo.ThirdFragment"
        android:label="移动"
        tools:layout="@layout/third_fragment" />
</navigation>

在activity中配置这个导航栏(暂不知道工作原理):

//mainActivity.java
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView=findViewById(R.id.bottomNavigationView);
        NavController navController= Navigation.findNavController(this,R.id.fragment2);
//        AppBarConfiguration configuration=new AppBarConfiguration.Builder(navController.getGraph()).build();
        AppBarConfiguration configuration=new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
        NavigationUI.setupActionBarWithNavController(this,navController,configuration);
        NavigationUI.setupWithNavController(bottomNavigationView,navController);
    }

发表评论