Android App开发 Toolbar和侧边导航栏

这篇具有很好参考价值的文章主要介绍了Android App开发 Toolbar和侧边导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

一、侧边导航栏

OK,首先,先说下概念,侧边导航栏两张图可以说明概念:
android侧边栏导航,Android APP开发,android
android侧边栏导航,Android APP开发,android
侧边导航栏的添加步骤如下:

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

android侧边栏导航,Android APP开发,android

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

android侧边栏导航,Android APP开发,android

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的意义,一张图让你看明白:
android侧边栏导航,Android APP开发,android
就是侧边导航栏的布局控制。我们按照自己的想法去添加xml,需要创建一个menu文件夹,添加位置如下:
android侧边栏导航,Android APP开发,android
头部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内部的布局分布和固定名称:
android侧边栏导航,Android APP开发,android
接下来说toolbar使用方法:

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

项目github地址: https://github.com/xuhao120833/sidenavigationbar/tree/main文章来源地址https://www.toymoban.com/news/detail-815767.html

到了这里,关于Android App开发 Toolbar和侧边导航栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android App开发基础

    App是在手机上运行的一类应用软件,而应用软件依附于操作系统。 智能手机流行的操作系统有两种,分别是安卓手机的Android和苹果手机的iOS。 App开发为Android上的应用开发,Android系统基于Linux内核,但不等于Linux系统,故App应用无法在Linux系统上运行。 Android Studio是谷歌官方

    2024年02月02日
    浏览(37)
  • android studio开发app实例

    以下是一个简单的Android Studio开发App的实例: 1. 打开Android Studio,并创建一个新项目。 2. 选择一个适当的应用程序名称和包名称,然后选择目标API级别和默认Activity的模板。 3. 在MainActivity.java文件中,添加以下代码以配置MainActivity: ``` import android.os.Bundle; import androidx.appcompa

    2024年02月16日
    浏览(51)
  • Android开发入门——从零开始构建第一个Android App

    作者:禅与计算机程序设计艺术 首先,让我们回顾一下Android系统的特性。Android是一个开源、免费的移动操作系统,最初起源于Google,后被开源。它提供统一的API,使得手机厂商可以针对不同版本的Android系统定制不同的应用。同时,Android也支持对设备硬件进行二次开发,可

    2024年02月07日
    浏览(56)
  • 02 java ---- Android 基础app开发

    目录 相对布局 显示一个美女  显示两个美女 安卓APP启动过程 安卓布局控件 常用布局之相对布局 常用布局之相对布局 padding和margin 按键美化  常用布局之线性布局 安卓按键响应的几种方式 直接设置按键的onClick绑定的函数 自定义类实现按键监听事件的接口 匿名内部类实现

    2024年02月04日
    浏览(60)
  • 基于Android的学生信息管理App设计(Android studio开发)

    目 录 一、 题目选择(题目、选题意义) 3 二、 设计目的 3 1、 初衷 3 2、 结合实际 3 3、 使用工具 3 三、 最终页面效果展示 4 1、 登陆界面 4 2、 主界面 5 3、 各个功能模块 6 四、 各部分设计 11 1、活动页面Activity布局文件 11 2、Activity的编程 13 五、 总结 17 题目:基于Android的

    2024年02月08日
    浏览(96)
  • Android 系统桌面 App —— Launcher 开发(1)

    Launcher就是Android系统的桌面,俗称“HomeScreen”也就是我们开机后看到的第一个App。launcher其实就是一个app,它的作用是显示和管理手机上其他App。目前市场上有很多第三方的launcher应用,比如“小米桌面”、“91桌面”等等 要让app作为Launcher,需要在Manifest中添加两个category:

    2024年02月11日
    浏览(60)
  • Android开发的《大众设计App》项目介绍

    该《大众设计App》的功能介绍如下: 1、登录注册功能 登录、注册页面效果如下所示: 2、用户信息修改功能 (各个修改功能均已实现,因修改栏目较多不再逐一展示) 3、设计衣服的功能 (也是本App的核心功能) 页面效果如下图。分为上下两个区,上面部分是预览设计效果

    2024年02月02日
    浏览(36)
  • Android毕业设计-------基于 Android 剧院购票APP的开发与设计

    摘要:近年来,随着社会的发展和科技方面的创新,越来越多的人选择使用手机应用程序来购买剧场票。本文将探讨基于 Android 平台的剧院购票应用程序的开发和设计。该应用程序将为用户提供浏览剧场列表、查看剧场详情、选择座位并购买剧场票的功能。在开发方面,我们

    2024年01月24日
    浏览(45)
  • Android 1.2.1 使用Eclipse + ADT + SDK开发Android APP

      这里我们有两条路可以选,直接使用封装好的用于开发Android的ADT Bundle,或者自己进行配置 因为谷歌已经放弃了ADT的更新,官网上也取消的下载链接,这里提供谷歌放弃更新前最新版本的 ADT Bundle供大家下载! 32位版: adt-bundle-windows-x86-20140702.zip(百度网盘) 64位版: adt

    2024年02月09日
    浏览(35)
  • 移动开发项目 Android Studio 健康助手APP

    健康助手系统是一款便捷软件,旨在通过提供多方面的的健康便捷的管理服务,让用户的生活更健康,更便捷。用户可以在健康助手APP上购买不同的体检套餐,预约医生,使用地图查找药房等的位置,浏览网页了解健康知识,传播健康文化。 (1)为了更好地了解自己的身体

    2024年02月03日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包