给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 或者其他的。

修改菜单布局文件bottom_nav_menu.xml

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

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

修改菜单布局文件bottom_nav_menu.xml

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

放上完整代码：

修改新建的两个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布局

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