Android App开发 Toolbar和侧边导航栏

苏苏码不动了

已于 2023-09-06 16:19:08 修改

阅读量2.6k

点赞数 8

分类专栏： Android APP开发文章标签： android

于 2023-07-17 15:03:25 首次发布

本文链接：https://blog.csdn.net/weixin_43522377/article/details/131764579

版权

Android APP开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这是App开发的第二篇文章，讲Toolbar和侧边导航栏。废话不多说，我们开始。
开始阅读之前，建议先跳到文末，下载完整源码，看一下整个项目的结构，然后再阅读文章，这样更好理解，最好的方法是，边阅读，边在源码中对应找到修改的位置。

一、侧边导航栏

OK，首先，先说下概念，侧边导航栏两张图可以说明概念：
在这里插入图片描述

侧边导航栏的添加步骤如下：

1、App内build.gradle 引入design支持库、drawerlayout布局

在这里插入图片描述

2、后续会用到toolbar导航控件，修改AppTheme为NoActionBar

在这里插入图片描述

3、将activity_main.xml修改成drawerlayout并添加自己想要的布局形式：

drawerlayout就是侧边导航栏必须要用到的一种布局。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerLayout"
    tools:context=".MainActivity">

    <!-- 主内容视图一定要是DrawerLayout的第一个子视图【必须】 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:navigationIcon="@mipmap/toolbar"
            app:subtitle="子标题"
            app:subtitleTextColor="@color/white"
            app:title="标题"
            app:titleTextColor="@color/colorAccent"
            app:popupTheme="@style/OverflowMenuStyle"/>
<!--        popupTheme 用于指定溢出栏未显示在屏幕部分，点击显示之后的显示位置-->
<!--            navigationIcon 指定的是返回建的图标样子-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="内容区域"
            android:textSize="22sp"
            android:layout_gravity="center"/>

    </LinearLayout>

    <!-- app:headerLayout : 指定头部布局的资源文件。
        app:menu : 指定导航菜单的资源文件。
        app:itemBackground : 指定菜单项的的背景。
        app:itemTextColor : 指定菜单项的文字颜色。
        app:itemTextAppearance : 指定菜单项的文字样式。
        app:itemIconTint : 指定菜单项的图标色彩。-->

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        <!-- 这里设置left意思就是 侧边栏从左侧划出，没有控件打开侧边栏的话，可以通过手指从左往右滑动打开侧边栏-->
        app:headerLayout="@layout/nav_drawer_header"
        app:menu="@menu/nav_drawer_menu"
        android:background="#ffffff"
        app:itemTextAppearance="@style/nav_drawer_menu_text_style"
        app:itemIconTint="@color/nav_drawer_menu_text_color" />


</androidx.drawerlayout.widget.DrawerLayout>

    app:headerLayout="@layout/nav_drawer_header"
    app:menu="@menu/nav_drawer_menu"

上面xml文件中 headerLayout、menu的意义，一张图让你看明白：
在这里插入图片描述
就是侧边导航栏的布局控制。我们按照自己的想法去添加xml，需要创建一个menu文件夹，添加位置如下：

头部nav_drawer_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#F4F4F4">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"/>

</LinearLayout>

菜单nav_drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group0">
        <item
            android:id="@+id/menu_info"
            android:icon="@mipmap/ic_launcher"
            android:title="个人信息"/>

        <item
            android:id="@+id/menu_pwd"
            android:icon="@mipmap/ic_launcher"
            android:title="修改密码"/>
    </group>
    <group android:id="@+id/group1">
        <item
            android:id="@+id/menu_setting"
            android:icon="@mipmap/ic_launcher"
            android:title="设置"/>

        <item
            android:id="@+id/menu_about"
            android:icon="@mipmap/ic_launcher"
            android:title="关于"/>

        <item
            android:id="@+id/menu_exit"
            android:icon="@mipmap/ic_launcher"
            android:title="退出"/>
    </group>
</menu>

4、使用：MainActivity里加载布局

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

到这里，侧边栏就已经可以正常在demo App里面显示了，但是还不够，因为显示出来什么都做不了，所以下一步是给侧边栏添加自己想要的点击事件。

5、添加侧边栏点击事件

首先需要获取侧边栏相关的两个操作对象：

    /**导航栏左侧的侧边栏的父容器*/
    private DrawerLayout mDrawerLayout;
    //导航视图
    private NavigationView mNavigationView;
    。。。。。。
            // 侧滑视图操作对象
        mDrawerLayout = findViewById(R.id.drawerLayout);
        mNavigationView = findViewById(R.id.nav_view);
        //这里的id值都是在xml文件里自己指定的，读者不要搞蒙了。
    。。。。。。

然后使用操作对象，绑定事件：

mDrawerLayout 可以用来展开侧边导航栏、关闭侧边导航栏，
结合其它组件的监听事件使用，比如按钮的点击事件、toolbar返回键的点击事件，下面列出这两种：
这里读起来会比较抽象，读者不理解正常，需要结合下源码看看，不然就不知道在说什么，大概理解就是mDrawerLayout 可以放在按钮点击事件、toolbar 返回键点击事件里绑定打开、关闭侧边栏。toolbar后面会讲到，可以先跳到后面看看概念。

按钮：
    private void meunClick(){
        //用户图标的点击事件
        img_menuBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.openDrawer(Gravity.LEFT);
            }
        });
    }

toolbar返回键：
    private void toolbarclick(){
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //finish();
                //Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
                mDrawerLayout.openDrawer(Gravity.LEFT);
                //这里的值必须和xml里侧边栏android:layout_gravity="left" 的值相同，不然app会异常退出
            }
        });
    }

mNavigationView ，专门用来绑定侧边导航栏组成组件的点击事件。写法固定，添加自己想要的逻辑即可。

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch(item.getItemId()){
                    case R.id.menu_info:
                        Toast.makeText(MainActivity.this, "个人信息", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_pwd:
                        Toast.makeText(MainActivity.this, "修改密码", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_setting:
                        Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_about:
                        Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_exit:
                        Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();
                        break;
                }
                //关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

侧边导航栏的基础内容讲到这里就结束了，任何复杂的东西都是从这个简单的基础上添加的。