【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;本示例设…
阅读更多...
在 Maven 的 POM 文件中配置 npm 镜像源

在 Maven 的 POM 文件中配置 npm 镜像源

在使用 Maven 构建前端项目时&#xff0c;可能会遇到网络问题&#xff0c;导致 Node.js 或 npm 依赖无法下载&#xff0c;特别是在国内网络环境中。如果你在使用 frontend-maven-plugin 插件来管理 Node.js 和 npm&#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阀值以…
阅读更多...
Spring Boot 整合 Sentinel 实现流量控制

Spring Boot 整合 Sentinel 实现流量控制

在微服务架构中&#xff0c;流量控制是保障系统稳定性和高可用性的关键技术之一。阿里巴巴开源的 Sentinel 是一款面向分布式系统的流量防护组件&#xff0c;旨在从流量控制、熔断降级、系统负载保护等多个维度保障服务的稳定性。本文将详细介绍如何在 Spring Boot 项目中整合 …
阅读更多...
挑战黑神话, 不升级武器通关

挑战黑神话, 不升级武器通关

第一关随便打打 第二关,提前杀了疯虎,加攻击, 并且自己的点也早点点上攻击力,推荐还是拿了定风珠打, 否则沙尘暴不好处理,需要多打几个回合.玲珑内丹可以去第一关刷小怪 第三关.早点去拿禁 第四关.躲好蝎子的甩尾之后上去劈棍xyy即可. 第五关. 打了这个红孩儿很久,可以考虑跑蓄…
阅读更多...
爬虫入门学习

爬虫入门学习

流程 获取网页内容 HTTP请求 Python Requests解析网页内容 HTML网页结构 Python Beautiful Soup储存或分析数据 HTTP (Hypertext Transfer Protocol) 客户端和服务器之间的请求-响应协议 Get方法&#xff1a;获得数据 POST方法&#xff1a;创建数据 HTTP请求 请求行 方法类型…
阅读更多...
CPP八股文-模板类.内存管理，指针

CPP八股文-模板类.内存管理，指针

为什么模板类的定义需要放在头文件中&#xff1f; 无论是类模板还是函数模板&#xff0c;都是一个蓝图&#xff0c;本身不是一个类或函数&#xff0c;编译器用模板产生指定的类或函数的特定类型版本。产生模板的特定类型实例的过程称为模板的实例化。所以一般将模板类放在头文…
阅读更多...
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…
阅读更多...
vue仓库的使用

vue仓库的使用

Vue仓库通常指的是使用Vue CLI创建的项目仓库&#xff0c;它包含了项目的所有源代码、配置文件以及依赖项。以下是如何使用Vue仓库的一些基本步骤和最佳实践&#xff1a; 创建Vue项目 首先&#xff0c;你需要安装Vue CLI&#xff0c;然后使用它来创建一个新的Vue项目。 npm i…
阅读更多...
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…
阅读更多...
Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined

Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined

bug背景&#xff1a;vue转react踩坑。在vue数据是响应式的&#xff0c;卸载时不会出现数据已经赋值但是卸载是undefined情况&#xff0c;除非手动更改为undefined。而在react流行的hooks写法&#xff0c;你要一直操作数据&#xff0c;react提供的useEffect方法的return 里其实就…
阅读更多...
视频结构化从入门到精通——视频结构化主要技术介绍

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

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点&#xff08;SRC Point&#xff09;视频接入是视频结构化处理的第一步&#xff0c;它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…
阅读更多...
最新文章

Copyright @ 2022~2023