【Android】Material Design编写更好的UI

Toolbar

对于控件ActionBar我们非常熟悉，就是我们常见的标题栏，但ActionBar只能位于活动的顶部，因此我们更建议使用Toolbar。在新建一个项目的时候都是默认显示ActionBar，我们要使用Toolbar就需要先将标题栏改为不显示

先来看看界面各个部位的属性：

在这里插入图片描述

colorAccent：不只用来指定这样一个按钮的颜色，而是更多表达了一个强调的意思，例如一些控件的选中状态也会使用colorAccent的颜色

基本使用：

接下来就看看Toolbar的使用：

<androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/black"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

layout_height：这个属性我们非常熟悉了，但对于后面进行一下解释，?attr/actionBarSize 是一个主题属性引用，它引用了当前主题中定义的 ActionBar 的标准高度

android:theme：将 Toolbar 的主题设置为暗色主题

app:popupTheme：当我们为标题添加菜单按钮的时候按钮也会是暗色的主题，页面就会非常不和谐，因此将标题设置为淡色主题

接下来就看看主活动当中的设置：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {actionBar.setDisplayHomeAsUpEnabled(true); /*actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);*/
}

setDisplayHomeAsUpEnabled()：设置了 ActionBar 的 homeAsUp 属性为 true。homeAsUp 属性的作用是让 ActionBar 的左侧显示一个向上导航的按钮（通常是一个箭头图标），点击这个按钮可以触发向上导航的行为。调用这个方法并传入 true 会启用这个按钮。如果用户点击这个按钮，它会调用 onOptionsItemSelected 方法，并传入 android.R.id.home 作为 itemId 参数。你可以在这个方法中处理点击事件，比如导航回上一个 Activity。

setHomeAsUpIndicator()：就是为这个按钮设置图标，当我们不设置的时候就会使用默认的图标，运行程序，如下图所示：

在这里插入图片描述

尝试为左上角的导航按钮注册点击事件，使按下按钮但回到上一个活动：

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {//android.R.id.home 是 Android 框架中定义的一个资源 ID，它代表了 ActionBar 中的“向上”或“返回首页”按钮的点击事件的IDif (item.getItemId() == android.R.id.home) {finish();return true;}return super.onOptionsItemSelected(item);
}

添加菜单：

我们先设置一个目录：

<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/home"android:icon="@drawable/ic_launcher_foreground"android:title="home"app:showAsAction="always"/><itemandroid:id="@+id/find"android:icon="@drawable/ic_launcher_foreground"android:title="find"app:showAsAction="ifRoom"/><itemandroid:id="@+id/my"android:icon="@drawable/ic_launcher_foreground"android:title="my"app:showAsAction="never"/>
</menu>

将目录加载在Toolbar上：

@Override
public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.menu_main, menu);return true;
}

此时运行程序：

在这里插入图片描述

在这里插入图片描述

为什么会出现这样的分布，就是我们在设置目录的时候设置的app:showAsAction属性，

app:showAsAction 属性可以设置的一些值及其含义：

  • always: 总是显示在 Toolbar 上。不论 Toolbar 上有多少其他菜单项，这个菜单项都会直接显示在 Toolbar 上
  • ifRoom: 如果 Toolbar 上有足够空间，就显示在 Toolbar 上。如果空间不足，它会被放置在溢出菜单（Overflow Menu）中
  • never: 从不直接显示在 Toolbar 上，总是位于溢出菜单中

滑动菜单

DrawerLayout

NavigationView

先给大家介绍如何将一个图片设置为圆形，首先需要添加依赖：

implementation("de.hdodenhof:circleimageview:3.1.0")
  1. 首先我们制定一个目录，将所有的子目录放在一个group（组）当中，为其设置属性为single：
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/home1"android:icon="@drawable/ic_launcher_foreground"android:title="find"/><itemandroid:id="@+id/find1"android:icon="@drawable/ic_launcher_foreground"android:title="find"/><itemandroid:id="@+id/my1"android:icon="@drawable/ic_launcher_foreground"android:title="my"/></group></menu>

android:checkableBehavior属性补充：

  1. None: 这是默认值。当设置为 None 时，视图可以独立地被选中或取消选中，不会影响其他具有相同 android:checkable 属性的视图。
  2. Single: 当设置为 Single 时，如果一个视图被选中，其他所有具有相同 android:checkable 属性的视图将自动取消选中。这个行为通常用于单选按钮（RadioButton）组，确保用户在一组选项中只能选择一个。
  3. All: 这个值实际上并不存在于 android:checkableBehavior 属性中。可能是你想要表达的是 Toggle 行为，当设置为 Toggle 时，视图会在被点击时在选中和未选中状态之间切换，这通常用于复选框（CheckBox）
  1. 我们为滑倒出来的布局设置一个头布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:padding="10dp"android:layout_height="match_parent"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/iconimg"android:layout_width="70dp"android:layout_height="70dp"android:src="@drawable/draw1"android:layout_centerInParent="true"/><TextViewandroid:id="@+id/mailtext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentBottom="true"android:layout_marginStart="10dp"android:layout_marginBottom="241dp"android:text="123456789@qq.com"android:textSize="15sp" /><TextViewandroid:id="@+id/userText"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/iconimg"android:layout_alignParentStart="true"android:layout_marginStart="20dp"android:layout_marginTop="153dp"android:gravity="start"android:text="自然醒"android:textSize="15sp" /></RelativeLayout>
  1. 修改活动中的布局，将之前的线性布局转换为：
<com.google.android.material.navigation.NavigationViewandroid:id="@+id/nav_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu" />
  1. 此时我们就可以通过向右划动将布局显示出来，修改活动的代码：
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
//将一开始的选择默认设置为find1
navigationView.setCheckedItem(R.id.find1);
//注册选项的点击事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {drawrLayout.closeDrawers();return true;}
});

运行程序：

在这里插入图片描述

悬浮按钮和可交互提示

FloatingActionButton

这个控件可以轻松的实现悬浮按钮的效果，使用与Button一样

<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|end"android:layout_margin="30dp"android:src="@drawable/draw11"//设置悬浮的高度                                                         android:elevation="8dp"/>

在这里插入图片描述

SnackBar

在前面我们经常使用Toast来提示用户，但并没有让用户有选择的权力。这个控件就可以让用户可以根据提示进行选择：

FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Snackbar.make(v, "data delete", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(DrawrLayout.this, "data restored", Toast.LENGTH_SHORT).show();}}).show();}
});

此时运行程序：

在这里插入图片描述

按下悬浮按钮就会出现提示，无论你是否按下UNDO按钮到时间都会消失，当按下UNDO按钮就会根据我们的代码出现Toast提示。

CoordinatorLayout

相当于一个增强版的Framelayout,可以监听页面的子控件，然后做出合理响应。例如在上面的示例当中，当悬浮窗位于页面的右下角，按下悬浮按钮，提示弹窗弹出的时候就会遮住一部分按钮，看起来体验非常不好，当布局设置为CoordinatorLayout，按下悬浮按钮，提示弹出的时候按钮也会相应的向上移动。

卡片式布局

实际上MaterialCardView也属于FrameLayout，只是额外提供了阴影和圆角等效果。让内容显示在一张卡片当中，拥有圆角和投影

CardView

  1. 先设置RecyclerView子布局：
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_margin="5dp"app:cardCornerRadius="4dp"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/FruitImage"android:layout_width="match_parent"android:layout_height="100dp"android:scaleType="centerCrop"/><TextViewandroid:id="@+id/FruitText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_margin="5dp"android:textSize="16sp"/></LinearLayout></com.google.android.material.card.MaterialCardView>
  1. 与RecyclerView的制作一样，运行程序：

在这里插入图片描述

文章到这里就结束了！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HMI触屏网关-VISION如何与Node-red通信

HMI触屏网关-VISION如何与Node-red通信

上文&#xff1a;HMI触屏网关-VISION如何与Modbus TCP从机通信-CSDN博客 1. Node-red启用HTTP监听 HTTP监听&#xff0c;用于模拟WebAPI服务端&#xff0c;接收WebAPI客户端GET请求。 启用HTTP监听服务&#xff0c;选择请求方式GET&#xff1b;URL自定义&#xff0c;本示例设…
阅读更多...
LavaDome：一款基于ShadowDOM的DOM树安全隔离与封装工具

LavaDome：一款基于ShadowDOM的DOM树安全隔离与封装工具

关于LavaDome LavaDome是一款针对HTML代码安全和Web安全的强大工具&#xff0c;该工具基于ShadowDOM实现其功能&#xff0c;可以帮助广大研究人员实现安全的DOM节点/树隔离和封装。 在当今的Web标准下&#xff0c;尚无既定方法可以安全地选择性地隔离DOM子树。换句话说&#x…
阅读更多...
【ceph学习】rgw网关进程如何启动

【ceph学习】rgw网关进程如何启动

rgw 网关进程启动 主要在rgw_main.cc的main函数中&#xff0c;主要涉及一些关键线程启动、前端服务器&#xff08;beast等&#xff09;启动、后端存储模块启动&#xff08;rados&#xff09;、perf和log启动等。 流程图关键节点如下&#xff1a; 1、beast的启动 2、rados的启…
阅读更多...
Android Camera系列（一）：SurfaceView+Camera

Android Camera系列（一）：SurfaceView+Camera

心行慈善&#xff0c;何需努力看经—《西游记》 本系列主要讲述Android开发中Camera的相关操作、预览方式、视频录制等&#xff0c;项目结构代码耦合性低&#xff0c;旨在帮助大家能从中有所收获&#xff08;方便copy :&#xff09; &#xff09;&#xff0c;对于个人来说也是一…
阅读更多...
vue 批量导出pdf 压缩包 zip

vue 批量导出pdf 压缩包 zip

vue 批量导出pdf 压缩包 zip 使用插件 html2canvas jspdf jszip &#xff08;百度ai搜出来的是zip-js 这个没法安装&#xff09; file-saver 思路&#xff1a; 1.使用 html2canvasjspdf 将页面转图片转pdf&#xff08;这个怎么转的可以网上搜下很多&#xff09; 2.利用jszipfil…
阅读更多...
【免费分享】易上手的STM32多核心开发板资料包一网打尽，教程+课件+视频+项目+源码

【免费分享】易上手的STM32多核心开发板资料包一网打尽，教程+课件+视频+项目+源码

想要深入学习STM32开发吗&#xff1f;现在机会来了&#xff01;我们为初学者们准备了一份全面的资料包&#xff0c;包括原理图、教程、课件、视频、项目、源码等&#xff0c;所有资料全部免费领取&#xff0c;课程视频可试看&#xff08;购买后看完整版&#xff09;&#xff0c…
阅读更多...
PostgreSQL技术内幕7：PostgreSQL查询编译

PostgreSQL技术内幕7：PostgreSQL查询编译

文章目录 0.简介1.整体过程2.查询分析2.1 Lex2.2 Yacc2.3 PG词法分析和语法分析介绍2.4 PG语义分析 4.查询优化4.1 预处理4.1.1 提升子链接和子查询4.1.2 预处理表达式4.1.3 处理HAVING子句 4.2 改进查询树4.2.1 路径生成4.2.2 代价估计 4.3 计划生成 0.简介 一次完整的SQL执行…
阅读更多...
STM32基础篇：PWR

STM32基础篇：PWR

PWR简介 PWR&#xff08;Power Control&#xff09;&#xff0c;为电源控制模块&#xff0c;负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能。 1、可编程电压监测器 简称PVD&#xff0c;可以监控VDD电源电压。当VDD下降到PVD阀值以…
阅读更多...
爬虫入门学习

爬虫入门学习

流程 获取网页内容 HTTP请求 Python Requests解析网页内容 HTML网页结构 Python Beautiful Soup储存或分析数据 HTTP (Hypertext Transfer Protocol) 客户端和服务器之间的请求-响应协议 Get方法&#xff1a;获得数据 POST方法&#xff1a;创建数据 HTTP请求 请求行 方法类型…
阅读更多...
rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

事情是这样的: 定制了文件系统打包功能;然后我是根据这个指令 fakeroot mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img 起因就是这个fakeroot; 不加的话打出来的rootfs.img是没有用户权限的 然后我根据fakeroot mkfs.cramfs ro…
阅读更多...
AcWing算法基础课-785快速排序-Java题解

AcWing算法基础课-785快速排序-Java题解

大家好&#xff0c;我是何未来&#xff0c;本篇文章给大家讲解《AcWing算法基础课》785 题——快速排序。这篇文章介绍了使用快速排序算法对整数数列进行排序的方法&#xff0c;包括选择基准元素、分区操作和递归排序子数组。通过详细的步骤和示例&#xff0c;解释了快速排序的…
阅读更多...
MySQL之数据库基础

MySQL之数据库基础

目录 一、数据库 1、基本概念 2、常见的数据库 3、MySQL数据库 连接MySQL服务器 数据逻辑存储 二、数据库和表的本质 三、SQL语句 四、服务器&#xff0c;数据库&#xff0c;表的关系 五、存储引擎 查看存储引擎 一、数据库 1、基本概念 一般来说&#xff0c;数据库…
阅读更多...
es映射配置（_mapping）

es映射配置（_mapping）

文章目录 1、创建映射字段2、查看映射关系 1、创建映射字段 PUT /索引库名/_mapping {"properties": {"字段名": {"type": "类型","index": true&#xff0c;"store": true&#xff0c;"analyzer": &q…
阅读更多...
视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点&#xff08;SRC Point&#xff09;视频接入是视频结构化处理的第一步&#xff0c;它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…
阅读更多...
多参数遥测终端科技守护水电站生态流量下泄

多参数遥测终端科技守护水电站生态流量下泄

随着我国水电事业的蓬勃发展&#xff0c;水电站在推动地方经济快速增长、缓解能源压力方面发挥了不可替代的作用。然而带来的生态环境问题日益凸显&#xff0c;因水电站下泄流量不足造成部分河段减水、脱水甚至干涸&#xff0c;影响了河流的正常生态功能和居民的生产、生活。因…
阅读更多...
【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2–GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作 文章目录 【硬件操作入门】2--GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作一、GPIO与门电路1.1、GPIO的应用1.2、GPIO引脚操作1.2.1 设置引脚为GPIO功能…
阅读更多...
day39(8/29)——harbor私有仓库管理

day39(8/29)——harbor私有仓库管理

一、harbor私有仓库管理 是python的包管理工具&#xff0c;和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirror…
阅读更多...
RFID光触发标签在文件柜管理中的创新应用

RFID光触发标签在文件柜管理中的创新应用

在当今信息化时代&#xff0c;文件管理对于企业和机构的重要性不言而喻。传统的文件柜管理方式存在诸多问题&#xff0c;如查找文件困难、管理效率低下、安全性难以保障等。而 RFID 光触发标签技术的出现&#xff0c;为文件柜管理带来了全新的解决方案。 一、传统文件柜管理的…
阅读更多...
Spring扩展点系列-@PostConstruct

Spring扩展点系列-@PostConstruct

简介 spring的Bean在创建的时候会进行初始化&#xff0c;而初始化过程会解析出PostConstruct注解的方法&#xff0c;并反射调用该方法。 PostConstruct 的使用和特点 只有一个非静态方法能使用此注解&#xff1b;被注解的方法不得有任何参数&#xff1b;被注解的方法返回值必…
阅读更多...
实际开发中git在IDEA中的使用

实际开发中git在IDEA中的使用

相信搜索这个的同学代码都已经拉取到本地了&#xff0c;并且已经在idea中打开了。 1.一般我们从远程colone下来的代码默认是在主分支下的&#xff0c;也就是说我们从远程的主分支拉取的代码并且在本地创建了一个主分支。 2.一般主分支是不允许修改的&#xff0c;所以我们可以基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023