【AndroidUI设计】主界面设计-Toolbar的简单使用

news2024/12/24 1:05:22

文章目录

    • 一、引言
    • 二、了解
    • 三、编码
      • 1、UI设计
      • 2、编码

一、引言

  • 描述:需要设计一个主界面,菜单通过主界面的左边界划入,实现点击跳转修改主界面内容的一个效果,并且点击非内容区域恢复原界面的一个效果。做到菜单的弹出,其实还可以加难度,通过向右滑动实现菜单的弹出。这里就作为一个思考问题,其实在我之前的几篇博客里都有使用到这个方法,就看看初学者有没有仔细去了解那些代码,与其双手奉上,不是自己创造
  • 知识点:Toolbar的使用
  • 难度:简单
  • 效果
    在这里插入图片描述

二、了解

       用于应用程序内容的标准工具栏(图片截取自官网关于Toolbar的介绍)。其主要元素组合:导航按钮、品牌徽标图像、标题和副标题、标题和副标题、可选溢出菜单。

  • 导航按钮:向上箭头、导航菜单切换、关闭、折叠、完成或应用选择的其他字形。
  • 品牌徽标图像:延伸到条形的高度,并且可以任意宽。
  • 标题和副标题:是工具栏在导航层次结构中的当前位置以及其中包含的内容的路标
  • 自定义视图:可以向工具栏添加任意子视图,它们将显示在布局中的此位置。
  • 可选溢出菜单:提供一些频繁、重要或典型的操作

在这里插入图片描述

三、编码

1、UI设计

       关于菜单内容,我就随便添加了几个按钮和图片,进行修饰一下,如果需要设计的精美可以查看同栏目下的【AndroidUI设计】个人信息界面 这篇博客,进行进一步的个性化设计。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout_drawer">

    <RelativeLayout
        android:id="@+id/drawerlayout_main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/drawer_layout_rl_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/title_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="XXX软件"/>
        </androidx.appcompat.widget.Toolbar>

        <TextView
            android:id="@+id/main_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="主界面"
            android:textColor="@color/colorAccent"
            android:textSize="22sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/drawerlayout_side_tv"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:orientation="vertical">
        
        <!--    菜单内容    -->

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/b"/>

        <Button
            android:id="@+id/user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="25dp"
            android:text=">我的账号"/>

        <Button
            android:id="@+id/shezhi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="25dp"
            android:text=">设置"/>

        <Button
            android:id="@+id/cy"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="25dp"
            android:text=">创意"/>
    </LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>

2、编码

       关于Toolbar和ActionBar的使用,请参考官方给出的方案。因为最近有点忙,就不进行详细介绍了,直接copy即可(可以直接使用)。

  • 控件初始化

       控件的绑定我就不详细讲了,这在前几篇博客已经讲烂了,始终记住代码规范,主要是方便定位bug位置和简化代码排列。

	private DrawerLayout drawerLayout;
    private Button user,shezhi,cy;
    private TextView title, main;
    
	// 初始化代码
	private void init() {
        user = findViewById(R.id.user);
        shezhi = findViewById(R.id.shezhi);
        cy = findViewById(R.id.cy);
        title = findViewById(R.id.title_name);
        main = findViewById(R.id.main_text);
    }
  • 导航控制

       侧滑菜单的一个控制部分,分别导航按钮的显示和隐藏、内容的切换(这里只是简单的将内容进行了更替,至于具体设计则看需求如何)

	private void initToolbar() {
        final Toolbar toolbar = findViewById(R.id.drawer_layout_rl_toolbar);
        setSupportActionBar(toolbar);                   //传入ToolBar实例
        ActionBar actionBar = getSupportActionBar();    //得到ActionBar实例

        if (actionBar != null){
            //显示导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航按钮图片
            actionBar.setHomeAsUpIndicator(R.drawable.j5);
        }
        drawerLayout = findViewById(R.id.drawerlayout_drawer);
        //设置toolbar的导航按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //显示侧滑菜单
                drawerLayout.openDrawer(GravityCompat.START);
            }
        });

        user.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                title.setText("我的账号");
                main.setText("我的账号");
            }
        });

        shezhi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                title.setText("设置");
                main.setText("设置");
            }
        });

        cy.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                title.setText("创意");
                main.setText("创意");
            }
        });
    }
  • onCreate

生命周期-初始化,仅有一次运行

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

        init();
        initToolbar();
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/673314.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3 One Piece Study

目录 脚手架安装vue3 使用vue-cli创建 使用vite创建 setup 介绍 示例使用 ref函数 介绍 代码示例 reactive函数 介绍 代码示例 脚手架安装vue3 使用vue-cli创建 vue create 项目名 安装完成 进入到刚才创建的项目目录中 cd vue3_test 输入npm run serve测试 使用…

基于Java健康综合咨询问诊平台设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

STM32 HAL库开发——入门篇(2):定时器

目录 一、TIMER定时器概述 1.1 软件定时原理 1.2 定时器定时原理 1.3 STM32定时器分类 1.4 STM32定时器特性表 1.5 STM32基本、通用、高级定时器功能整体的区别 二、基本定时器 2.1 基本定时器简介 2.3 STM32定时器计数模式及溢出条件 2.4 定时器中断实验相关寄存器 …

MySQL创建商品订单数据库

目录 一、商品分类表 ProductClass1. 创建 ProductClass表2. 插入数据3. 展示 二、客户表 Customer记录1. 创建 Customer表2. 插入数据3. 展示 三、商品表 Product1. 创建 Product表2. 插入数据3. 展示 四、员工表Employee1. 创建 Employee表2. 插入数据3. 展示 五、订单主表 O…

kubernetes_核心组件_KubeProxy_KubeProxy三种模式和参数解析

系列文章目录 文章目录 系列文章目录前言一、kube-proxy三种服务负载模式1.1 userspace 模式1.2 iptables 模式1.3 ipvs 模式 二、kube-proxy 启动参数基本参数目录挂盘kubeproxy配置项(ConfigMap)kube-proxy 启动参数 三、kube-proxy 常用命令四、宿主机上的iptables规则&…

数据结构链表(C语言实现)

绪论 机遇对于有准备的头脑有特别的亲和力。本章将讲写到链表其中主要将写到单链表和带头双向循环链表的如何实现。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 附&#xff1a;红色&#xff0c;部分为重点部分&#xff1b;蓝颜色为需要记忆的…

【微服务】一文了解Nginx网关搭建教程

一文了解Nginx网关搭建教程 Nginx网关搭建nginx配置Nginx网关搭建 那么什么是Nginx呢? nginx是一个高性能HTTP服务器,反向代理服务器,邮件代理服务器,TCP/UDP反向代理服务器。 单个系统主要用于处理客户端请求,一个系统处理客户端的请求量是有限的,当客户端的并发量超…

CROSSROADS: 1实战演练

文章目录 CROSSROADS: 1实战演练一、前期准备1、相关信息 二、信息收集1、端口扫描2、访问网站3、dirsearch扫描目录4、查看隐写5、枚举用户6、暴力破解7、访问共享文件夹8、查看第一个flag9、写入shell并连接 二、后渗透1、查看权限和SUID文件2、运行程序3、切换root3、查看第…

2019 - 2023,再见了我的大学四年

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端&#xff08;Node.js 等&#xff09; &#x1f4c3;个人状态&#xff1a; 2023届本科毕业生&#xff0c;已拿多个前端 offer&#x…

【Linux环境基础开发工具】编译器-gcc/g++

写在前面&#xff1a; 上一篇博客&#xff0c; 我们学习了vim编辑工具&#xff0c;学会了怎么写代码&#xff0c; 这篇文章&#xff0c;我将分享代码该怎么编译的问题。 目录 写在前面&#xff1a; 1. gcc和g介绍 2. gcc是如何编译程序的 1. 预处理 2. 编译 3. 汇编 …

CPM-Bee大模型微调

CPM-Bee大模型微调 CPM-Bee简介&#xff1a;环境配置&#xff1a;应用场景&#xff1a;模型训练参数训练命令&#xff1a;推理&#xff1a;评估&#xff1a;结论&#xff1a; CPM-Bee 简介&#xff1a; CPM-Bee是一个完全开源、允许商用的百亿参数中英文基座模型&#xff0c;也…

关于数据库运维系统的一些思考

这是学习笔记的第 2461篇文章 前段时间整理了一下数据库运维系统的一些内容&#xff0c;比自己预期的要难一些。我来简单回顾下一些参考点。 一、立足当下&#xff0c;混沌之中梳理问题 通常我们可以会问为什么&#xff0c;即为什么要做数据库运维系统&#xff0c;但是我们先放…

决策分析——层次分析法

工程测量与经济决策方案 决策分析——层次分析法 一、描述 层次分析法的基本原理&#xff1a;根据问题的性质和要达到的总目标&#xff0c;将问题分解为不同的组成因素&#xff0c;并按照因素间的相互关联影响以及隶属关系将因素按不同层次聚集组合&#xff0c;形成一个多层次…

NUCLEO-F411RE RT-Thread 体验 (8) - GCC环境 TIM定时器的驱动移植以及基本使用

NUCLEO-F411RE RT-Thread 体验 (8) - GCC环境 TIM定时器驱动移植与基本使用 驱动移植 定时器驱动文件位于drv_hwtimer.c中&#xff0c;对应components层的文件位于rt-thread/components/drivers/hwtimer/hwtimer.c中。 修改Makefile&#xff0c;将其编译进去。 在rtconfig.h…

Xception算法解析-鸟类识别实战-Paddle实战

文章目录 项目背景一、理论基础1.前言2.设计理念2.1 多尺寸卷积核2.2 点卷积2.3 卷积核替换2.4 Bottleneck2.5 深度可分离卷积(Depthwise Separable Conv) 3.网络结构4.评估分析 二、数据预处理三、数据读取四、导入模型五、模型训练六、结果可视化七、个体预测结果展示总结 项…

BLE蓝牙模块应用|蓝牙MAC地址二维码扫描打印解决方案

在智能穿戴、智能安防领域&#xff0c;用户需要通过蓝牙MAC地址来完成产品与APP的绑定。为简化产品的使用和管理&#xff0c;厂家会采用蓝牙MAC地址二维码扫描打印解决方案&#xff0c;将蓝牙MAC地址打印成二维码并贴在产品的包装盒或者产品外壳上。本篇带大家了解一下蓝牙MAC地…

基于Java德云社票务系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

干货 | 电力数据流通使用模式及安全指南

以下内容整理自清华大学《数智安全与标准化》课程大作业期末报告同学的汇报内容。 一、电力数据及流通简介 电力数据的流通整体环节也是它生命的全周期。 电力用户大体可以分为四类&#xff0c;分别是个人&#xff0c;工农业企业&#xff0c;商业建筑以及城市基建&#xff0c;这…

火山引擎 Dataleap 数据质量解决方案和最佳实践(一):数据质量挑战

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 什么是数据质量 广义上来说&#xff0c;数据质量的定义是数据满足一组固有特性&#xff08;质量维度&#xff09;要求的程度。业界通常有 6 个维度&#xff1a; 完…

语法降级与Polyfill:消灭低版本浏览器兼容问题

提到前端编译工具链方面&#xff0c;可能大家最新想到的是诸如babel/preset-env、core-js、regenerator-runtime等工具。不过&#xff0c;我们今天要讲的是官方的 Vite 插件vitejs/plugin-legacy&#xff0c;以及如何将这些底层的工具链接入到 Vite 中&#xff0c;并实现开箱即…