给Android Studio自带Bottom Navigation Activity模板添加一个导航栏

关于Bottom Navigation Activity

Bottom Navigation Activity是Android Studio自带的一个模板，用它可以很方便地使用BottomNavigationView + Fragment快速制作一个APP的框架，它可以非常方便自动生成导航栏和对应的Fragment界面，同时没有自己创建的Fragment界面重叠和代码冗余的问题，规避了很多古老的Fragment的bug，非常适合新手和小白入门者。

Android Studio发展到现在的版本，已经全自动生成这个模板的代码了。但是其没有给开发者一个设置底栏数量的选项，默认是自动生成三个底栏。

很多初学者很难搞懂其中代码原理，但是实际项目中，若是需要四个，那就需要我们自己添加代码。话不多说，下面进入正文。

添加新的Fragment

在Android Studio中创建Bottom Navigation Activity项目后，先添加一个新的Fragment，注意是带ViewModel的。

大家可以根据实际取名，我给新的Fragment取名NewFragment，注意生成的xml布局文件，为了方便开发，要对默认的修改一下，我这里起名为fragment_new

之后，发现项目下多了三个文件，其中两个是java代码，一个是xml布局文件。

同样为了方便开发，我们像官方代码一样，新建一个包。右键 ui 这个文件夹，就会出现对应选项。

取一个名字，因为不能和java关键字冲突，我起名newthing，然后把这两个新的java文件放进去，点重构就行。

到这，文件就新建好了，且包也建立好了。

修改模板代码

先修改布局文件fragment_new

结合官方代码，依葫芦画瓢，就很简单了，注意事项在注释中给出。这里主要是简单实现，后面结合项目实际情况可以把 ConstraintLayout 改成我们经常使用的 LinearLayout 或者其他的。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--    注意id不要和其他布局文件重复，要改成自己的-->
    <TextView
        android:id="@+id/text_new"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textAlignment="center"
        android:textSize="20sp"
        android:text="这个是新建的"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

修改菜单布局文件bottom_nav_menu.xml

在存放资源文件的res文件中，找到menu文件夹，给bottom_nav_menu.xml中添加一个item

直接放完整代码，方便大家复制。

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

<!--    新的导航栏组件，id可以随便取，图标可以改，文字可以改-->
    <item
        android:id="@+id/navigation_new"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="新的" />

</menu>

修改菜单布局文件bottom_nav_menu.xml

依然在res文件中，找到navigation文件夹，注册一个Fragment进去。

放上完整代码：

<?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/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.myapplication.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.myapplication.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.myapplication.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />

<!--    注意id和layout，以及name要对应自己的文件-->
    <fragment
        android:id="@+id/navigation_new"
        android:name="com.example.myapplication.ui.notifications.NewFragment"
        android:label="the new"
        tools:layout="@layout/fragment_new" />
</navigation>

修改新建的两个java文件

修改好布局文件后，下面可以修改两个新建好的java文件了。

先修改NewViewModel，可以先实现，再去弄明白原理，所以可以把这个类里所有代码都删除，然后完整复制下面的代码进去。

package com.example.myapplication.ui.newthing;

import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class NewViewModel extends ViewModel {

    private MutableLiveData<String> mText;

    public NewViewModel() {
        mText = new MutableLiveData<>();
        mText.setValue("This is new fragment");//根据自己喜欢放界面的测试文字
    }

    public LiveData<String> getText() {
        return mText;
    }
}

下面修改NewFragment这个类。

package com.example.myapplication.ui.newthing;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;

import com.example.myapplication.R;

public class NewFragment extends Fragment {

    private NewViewModel newViewModel;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        newViewModel =
                ViewModelProviders.of(this).get(NewViewModel.class);
        //上面的方法已经过时，但是不妨碍我们使用它，可以以后再修改，现在主要是入个门
        View root = inflater.inflate(R.layout.fragment_new, container, false);
        final TextView textView = root.findViewById(R.id.text_new);
        //下面代码中observe()方法里的this，可能在IDE里是有红色波浪线的，但是却是可以编译的。
        //也可以直接把this改成getViewLifecycleOwner() 就不会报错了
        newViewModel.getText().observe(this, new Observer<String>() {
            @Override
            public void onChanged(@Nullable String s) {
                textView.setText(s);
            }
        });
        return root;
    }
}

修改主文件MainActivity

在AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder这句话后面添加一个新的布局。全部代码如下，复制即可。

package com.example.myapplication;

import android.os.Bundle;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications,R.id.navigation_new)
                .build();//在这里的最后面添加 R.id.navigation_new 布局
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(navView, navController);
    }

}

结果

编译运行，点击第四个图标，就会出现新建的Fragment。可以结合自己的实际需求修改图标和文字。

发现的问题

用这个代码，发现了一个比较重要的问题，发出来让大家参考。
我用的SDK是29，最大兼容SDK 24。具体表现为，Fragment距离顶栏有一片空白，导致界面排版不美观，看下图。

如果大家出现这个问题可以看我的另一篇文章来解决。
Android Studio自带Bottom Navigation Activity模板顶栏空白解决方案

推荐的activity_main布局

暂时还没有时间写，等缓缓吧。