Android App开发 Toolbar和侧边导航栏

这是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;
            }
        });

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

二、toolbar

toolbar是Android后期版本出的用来替代actionbar的导航控件,优点是actionbar只能放在界面顶部,toolbar可以放在界面任何位置。
首先先用一张图明白toolbar内部的布局分布和固定名称:
在这里插入图片描述
接下来说toolbar使用方法:

这块我想了一下,已经有文章说得非常好了,我就没必要再写了,toolbar的配置和基础使用参见这一篇干货文章:
https://www.jianshu.com/p/a67662e6eab4

项目github地址: https://github.com/xuhao120833/sidenavigationbar/tree/main

猜你喜欢

转载自blog.csdn.net/weixin_43522377/article/details/131764579
今日推荐