底部导航模板BottomNavigation的实现

Step1_准备资源

1.新建Empty工程，在res目录下创建三个图标：res—New—Vector Asset
ic_looks_one_black_24dp.xml
ic_looks_two_black_24dp.xml
ic_looks_3_black_24dp.xml

2.新建三个Fragment(with ViewModel)：
FirstFragment&FirstViewModel
SecondFragment&SecondViewModel
ThirdFragment&ThirdViewModel

3.创建menu.xml：res—New—Android Resource File
Resource type：Menu
File name：menu.xml

4.在menu里添加3个Menu item并分别设置title、icon、id：
title：旋转
icon：ic_looks_one_black_24dp.xml
id：firstFragment

title：缩放
icon：ic_looks_two_black_24dp.xml
id：secondFragment

title：移动
icon：ic_looks_3_black_24dp.xml
id：thirdFragment

5.创建navigation.xml：res—New—Android Resource File
Resource type：Navigation
File name：navigation.xml
！！该步骤需要添加依赖！！

6.点击以上图标添加3个Fragment对应的Destination
注意Navigation中的3个Destination的ID需和对应的Fragment保持一致！
label修改为对应的：旋转、缩放、移动

Step2_关联资源

1.在activity_main.xml的ConstraintLayout里添加Containers：BottomNavigationView，将它的menu属性与之前创建的menu.xml进行关联。

2.设置BottomNavigationView的高度为：wrap_content，通过Constraint设置使其保持在页面底部。

3.在ConstraintLayout里添加Containers：NavHostFragment，选择之前设置的navigation.xml并通过Constraint设置使其保持在BottomNavigationView之上，设置高度为0dp(match constraint)

此时的activity_main.xml的布局预览：

Step3_装配组件

MainActivity：

public class MainActivity extends AppCompatActivity {

@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.fragment);
    AppBarConfiguration configuration = new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
    NavigationUI.setupActionBarWithNavController(this,navController,configuration);
    NavigationUI.setupWithNavController(bottomNavigationView,navController);
 }
}

Step4_运行结果

点击底部导航栏可切换Fragment：