底部导航模板BottomNavigation的实现

小灰灰 2023-06-16 11:59 1阅读 0赞

### 底部导航模板BottomNavigation的实现 ###

*  Step1\_准备资源
 *  Step2\_关联资源
 *  Step3\_装配组件
 *  Step4\_运行结果

# 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**  
**！！该步骤需要添加依赖！！**

![在这里插入图片描述][20191126143618968.png]  
6.点击以上图标添加3个Fragment对应的Destination  
**注意Navigation中的3个Destination的ID需和对应的Fragment保持一致！**  
**label修改为对应的：旋转、缩放、移动**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]

# 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的布局预览：  
![在这里插入图片描述][20191126152812864.png]

# 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\_运行结果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]  
点击底部导航栏可切换Fragment：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 2]

[20191126143618968.png]: https://img-blog.csdnimg.cn/20191126143618968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191126143952358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE=,size_16,color_FFFFFF,t_70
[20191126152812864.png]: https://img-blog.csdnimg.cn/20191126152812864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191126153119894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191126153252671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE=,size_16,color_FFFFFF,t_70