从零开始玩Android 实战项目 6（底部导航栏切换页面）

Hello 小伙伴们大家好,我是Krain

先简单介绍一下自己的情况：毕业没多久的社畜小牛犊，目前已工作一年的初级Java（可能还算不上），凭借自己对编程开发的热爱踏上这个卷不死就往死里卷的行业，接下来我将以自己CV战士（新手小白）的身份记录成长历程、督促自己学习、遇见错误记录、加深编码记忆、技术相互交流。

特此声明：本人萌新，文章如提及技术分析均为自己理解，有错还请大佬纠正

登录注册搞定，那么就可以开始app的主页面了，页面设计可以多种多样，但大部分app都有一个共同点，就是底部的导航栏，今天，我们就来讲讲底部导航栏切换页面的实现方法。

制作底部导航栏可以有很多不同的方式，最简单的就是在layout中new一个Bottom Navigation Activity，只不过官方直接生成我们既没有了自己制作敲代码的乐趣，并且逻辑没理清楚的小伙伴也不知道如何修改代码成自己预想的样子。

我们还是new一个空的Activity自己动手实践吧，这里介绍BottomNavigationView+FrameLayout的方式，BottomNavigationView是属于谷歌的控件，那么我们在使用之前就需要引入谷歌的依赖

implementation 'com.google.android.material:material:1.4.0'
复制代码

FrameLayout之前没有介绍过，是个最简单的布局，采用层叠的方式显示，简单点说就是后面写的东西会覆盖在前面写的东西上面。

BottomNavigationView控件使用也非常方便，可以自己手动输入，也可以在可视化布局中的Containers里找到，鼠标拖拽放在底部即可。layout布局代码如下


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/home_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white1"
    app:menu="@menu/menu_tab"  //menu_tab为menu文件名并非menu文件中的id名
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/home_menu"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</FrameLayout>
复制代码

细心的小伙伴会发现BottomNavigationView的控件中有个app:menu的属性，这就是导航栏上那一个个小图标，我们需要在layout中新建一个menu的文件夹，在文件夹中新建一个menu文件，用来指定我们的图标、文字的样式以及个数，有几个导航类目就有几个item，我们这里四个页面

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

    <item android:id="@+id/menu_home"
        android:title="首页"
        android:icon="@drawable/ic_baseline_message_stroke"/> //图标
    <item android:id="@+id/menu_video"
        android:title="视频"
        android:icon="@drawable/ic_baseline_message_stroke"/>
    <item android:id="@+id/menu_message"
        android:title="消息"
        android:icon="@drawable/ic_baseline_message_stroke"/>
    <item android:id="@+id/menu_mine"
        android:title="我的"
        android:icon="@drawable/ic_baseline_message_stroke"/>

</menu>
复制代码

给大家推荐两个图标网站

扫描二维码关注公众号，回复： 13705071 查看本文章

阿里的矢量图标库： www.iconfont.cn/
Lottie ： lottiefiles.com/

下载后丢在drawable中，也可以使用编辑器自带的默认图标 drawable -> new -> Vector Asset，我这里图方便图标都用了四个一样的默认图标

布局好了我们就得让他在页面上显示出来了，Activity中初始化控件（findViewById）,找到menu中对应当前页面的item的id（setSelectedItemId）,最后加上item的监听器（setOnNavigationItemSelectedListener）完成切换，话不多说直接上代码

package com.example.firstdemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;

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

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationView = findViewById(R.id.home_menu); //初始化底部导航栏控件
        bottomNavigationView.setSelectedItemId(bottomNavigationView.getMenu().getItem(0).getItemId());//获得当前页面对应的item，getItem中数字0代表下标对应menu文件中第几个item
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        //配置监听器
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_home:   //这里是item的id
                        return true;
                    case R.id.menu_video:
                        startActivity(new Intent(getApplicationContext(), VideoActivity.class));//切换页面
                        overridePendingTransition(0, 0);//过渡动画
                        return true;
                    case R.id.menu_message:
                        startActivity(new Intent(getApplicationContext(), MessageActivity.class));
                        overridePendingTransition(0, 0);
                        return true;
                    case R.id.menu_mine:
                    startActivity(new Intent(getApplicationContext(), MineActivity.class)); 
                        overridePendingTransition(0, 0);  
                        return true;
                }
                return false;
            }
        });
    }
}
复制代码

需要注意，当前页面对应的item不设置切换页面和切换动画，我们一共有四个页面、四个Activity，分别对应四个item，剩下三个Activity代码相同，需要修改getItem（）中的下标数字以及switch中是否设置切换页面

至此我们已经完成点击导航栏切换页面，下篇讲讲不用点击，只需手指左右滑动就能切换页面的方法

从零开始玩Android 实战项目 6（底部导航栏切换页面）

猜你喜欢