探索 Material 3:全新设计系统和组件库的介绍

探索 Material 3:全新设计系统和组件库的介绍

  • 一、Material 3 简介
    • 1.1 Material 3 的改进和更新
    • 1.2 Material 3 的优势特点
  • 二、Material 3 主题使用
    • 2.1 使用 Material3 主题
    • 2.2 使用 Material3 主题颜色
  • 三、Material 3 组件使用
    • 3.1 MaterialButton:支持个性化主题颜色的按钮
    • 3.2 NavigationRail:导航栏
    • 3.3 SearchBar:搜索栏
    • 3.4 TabBar:标签栏
  • 四、总结

一、Material 3 简介

Material 3 是 Google 推出的 Android 设计语言的最新演进,为开发者提供了一套更为先进和丰富的设计组件。Material 3 不仅仅是设计的变革,更是用户体验的全新定义。它突破了传统设计的边界,引入了更加现代化和灵活的组件,以适应不断演变的应用需求,Material 3 将引领 Android 设计新潮流。

在这里插入图片描述

  • 官网:https://m3.material.io/
  • Github:https://github.com/material-components/material-components-android/

1.1 Material 3 的改进和更新

🌟 色彩系统:Material 3 的色彩系统基于 Material You 的色彩系统,但提供了更多的颜色选择。Material 3 的色彩系统包括以下几种颜色:

  • 基础色:基础色是 Material 3 的核心色彩,包括:Primary(主要色)、Secondary(次要色)、Tertiary(第三色)、Neutral(中性色)。
  • 补充色:补充色用于与基础色搭配,包括:Accent(强调色)、Contrast(对比色)。
  • 过渡色:过渡色用于连接基础色和补充色,包括:Transition 1(过渡色 1)、Transition 2(过渡色 2)。

🌟 字体系统:Material 3 的字体系统基于 Material You 的字体系统,但提供了新的字体选择。Material 3 的字体系统包括以下几种字体:

  • Roboto:Material 3 的默认字体,是一种无衬线字体。
  • Noto Serif:一种衬线字体,用于标题和副标题。
  • Noto Sans:一种无衬线字体,用于正文。

🌟 组件:Material 3 新增了一些新的组件,这些组件可以帮助开发者构建更加现代、美观的应用程序。

  • Typography:Typography 组件用于控制文本的样式和大小。Typography 组件可以设置文本的字体、字号、字重、行高等属性。
  • Surface:Surface 组件用于控制背景的颜色和阴影。Surface 组件可以设置背景的颜色、透明度、阴影等属性。
  • Elevation:Elevation 组件用于控制阴影的高度。Elevation 组件可以设置阴影的高度、颜色等属性。

🌟 动画:Material 3 的动画更加流畅和自然。Material 3 使用了新的动画 API,可以让开发者更轻松地创建动画。

1.2 Material 3 的优势特点

🚀 全新设计语言
Material 3 引入了一种名为 “Material You” 的个性化设计语言。它允许用户根据自己的喜好和风格自定义应用程序的外观和感觉。通过 Material You,开发人员可以利用系统级的颜色、字体和形状,为用户提供个性化的界面体验。

🚀 新的组件库
Material 3 带来了一系列全新的组件,旨在提供更好的可访问性、更高的自定义性和更好的性能。以下是一些常用的组件:

  • AppBar:用于创建应用程序的顶部导航栏,可以包含标题、操作按钮和导航菜单等元素。

  • Button:提供各种样式和交互方式的按钮,包括文本按钮、图标按钮和浮动操作按钮等。

  • Card:用于呈现信息的卡片式容器,可以包含标题、图像和操作按钮等。

  • Dialog:用于在应用程序中显示模态对话框,可用于提醒、确认和输入等场景。

  • Snackbar:用于在屏幕底部显示临时消息或操作结果的轻量级提示框。

  • TextField:提供文本输入框的组件,支持单行和多行输入,以及验证和自动完成等功能。

  • TabBar:用于在页面或应用程序中切换内容的选项卡导航栏。

🚀 自定义主题
Material 3 提供了强大的主题定制功能,开发人员可以根据项目需求自定义应用程序的颜色、字体、形状和其他视觉样式。通过定义主题,可以确保应用程序与品牌标识和用户期望保持一致。

🚀 可访问性支持
Material 3 重视可访问性,提供了一系列工具和指南,帮助开发人员构建无障碍的应用程序。组件库中的每个组件都经过了可访问性测试和优化,以确保所有用户都能够轻松使用应用程序。

二、Material 3 主题使用

Material 3 引入了全新的主题引擎,使开发者能够更灵活地定制应用的外观和交互方式。Material 3 的色彩系统基于色调、明度和饱和度三个属性。色调是颜色的基调,明度是颜色的亮度,饱和度是颜色的纯度。Material 3 的色彩系统使用了一种称为 色调提取 的方法来生成应用程序的色彩。色调提取方法会从用户的壁纸中提取出一种主色调,然后生成应用程序的其他色彩。

在这里插入图片描述

通过以下步骤,你可以开始使用 Material 3 的主题引擎:

2.1 使用 Material3 主题

res/values/styles.xml 中使用 Theme.Material3

<resources>
    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.Material3">
        <!-- Customize your theme here -->
    </style>
</resources>

2.2 使用 Material3 主题颜色

在布局文件中使用主题颜色:

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Material 3!"
    android:background="?attr/colorSurface" />

在 Java 代码中获取主题颜色:

// 获取主题颜色
int colorSurface = getColorFromAttribute(R.attr.colorSurface);

// 设置 TextView 背景颜色
TextView myTextView = findViewById(R.id.myTextView);
myTextView.setBackgroundColor(colorSurface);
// 辅助方法,用于从主题属性获取颜色
private int getColorFromAttribute(int attr) {
    TypedValue typedValue = new TypedValue();
    getTheme().resolveAttribute(attr, typedValue, true);
    return typedValue.data;
}

三、Material 3 组件使用

组件是用于创建用户界面的交互式构建块。它们可以根据其用途分为几类:操作、遏制、通信、导航、选择和文本输入。Material 3 引入了一系列先进的组件,让开发者能够更容易地构建现代化、富有创意的应用。

在这里插入图片描述

以下是一些 Material 3 组件的介绍和使用示例:

3.1 MaterialButton:支持个性化主题颜色的按钮

<com.google.android.material.button.MaterialButton
    android:id="@+id/myButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    app:backgroundTint="?attr/colorPrimary" />

3.2 NavigationRail:导航栏

<com.google.android.material.navigationrail.NavigationRail
    android:id="@+id/navigationRail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/navigation_menu" />

3.3 SearchBar:搜索栏

<com.google.android.material.searchbar.SearchBar
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3.4 TabBar:标签栏

<com.google.android.material.tabs.TabBar
    android:id="@+id/tabBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="scrollable"
    app:tabIndicatorColor="?attr/colorPrimary" />

四、总结

Material 3 的推出标志着 Android 设计语言的新一步演进。在未来,我们可以期待更多创新的组件和功能的引入,以满足不断变化的应用设计和用户需求。

Material 3 是一次令人兴奋的更新,为开发人员提供了全新的设计语言和组件库。通过 Material You 的个性化设计,开发人员可以为用户提供个性化的界面体验。新的组件库、自定义主题和可访问性支持使开发人员能够构建出色的应用程序。如果你是一个关注设计和用户体验的开发人员,那么 Material 3 绝对值得一试。

Material 3 不仅仅是一场设计的革新,更是 Android 应用界面开发的新里程碑。通过更加灵活的主题引擎和丰富的组件,开发者能够创造出更具创意和个性化的应用。在 Material 3 的引领下,Android 应用将更加现代、富有活力。希望这篇博客能够为你提供深入了解 Material 3 的一些基本概念和组件使用方法的指导。在你的下一个项目中,尝试使用 Material 3,为用户带来全新的体验吧!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

栈和队列java实现

栈和队列都是动态集合&#xff0c;且在其上进行DELETE操作所移除的元素是预先设定的。在栈中&#xff0c;被删除的是最近插入的元素&#xff1a;栈实现的是一种后进先出&#xff08;last-in&#xff0c;first-out&#xff0c;LIFO&#xff09; 策略。在队列中&#xff0c;被删去…

AT89S52单片机

目录 一.AT89S52单片机的硬件组成 1.CPU(微处理器) (1)运算器 (2)控制器 2.数据存储器 (RAM) (1)片内数据存储器 (2)片外数据存储器 3.程序存储器(Flash ROM) 4.定时器/计数器 5.中断系统 6.串行口 7.P0口、P1口、P2口和P3口 8.特殊功能寄存器 (SFR) 常用的特殊功…

子虔科技出席2023WAIC“智能制造融合创新论坛”

7月7日&#xff0c;2023世界人工智能大会&#xff08;WAIC&#xff09;闵行会场在大零号湾举办。子虔科技联合创始人周洋作为专家嘉宾受邀参与智能制造融合创新论坛大会。会上探讨了工业和制造业数字化转型的机遇、挑战和对策。其中&#xff0c;周洋提到&#xff0c;工业制造业…

51单片机的智能浇花系统【含proteus仿真+程序+报告+原理图】

1、主要功能 该系统由AT89C51单片机LCD1602显示模块DHT11温湿度模块DS1302时间模块继电器驱动水泵模块光敏传感器等模块构成。适用于智能浇花、自动浇花、智能盆栽等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、土壤温湿度、光照强度等信息 2、DHT11采集温湿度信…

②【Hash】Redis常用数据类型:Hash [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis Hash ②Redis Hash 操作命令汇总1. hset…

Apache Airflow (十三) :Airflow分布式集群搭建及使用-原因及

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

基于Acconeer的A121-60GHz毫米波雷达传感器SDK移植及测距示例(STM32L496为例)

基于Acconeer的A121-60GHz毫米波雷达传感器SDK移植及测距示例&#xff08;STM32L496为例&#xff09; 工程&#xff1a; Keil工程资源 参考资料&#xff1a; A121 datasheet 1.3 A121 HAL Software Integration User Guide A121 STM32CubeIDE User Guide 官方参考示例工程&a…

linux rsyslog综合实战2

本次我们通过rsyslog服务将A节点服务器上的两个(E.g:多个日志也可以)日志(Path:/var/log/245-1.log、245-2.log)实时同步到B节点服务器目录下(Path:/opt/rsyslog/245) 1.rsyslog架构 2.环境信息 环境信息 HostnameIpAddressOS versionModuleNotersyslog1192.168.10.245CentOS…

【Docker】从零开始:3.Docker运行原理

【Docker】从零开始&#xff1a;3.Docker运行原理 Docker 工作原理Docker与系统的关系Docker平台架构图解 Docker 工作原理 Docker与系统的关系 Docker 是一个 Client-Server 结构的系统&#xff0c;Docker 守尹进程运行在王机上&#xff0c; 然后通过 Socket 连接从各尸端坊…

【广州华锐互动】VR溺水预防教育:在虚拟世界中学会自救!

在现代社会中&#xff0c;水上安全和救援行动的重要性不言而喻。尤其在自然灾害、游泳事故或航海事故中&#xff0c;有效的救援行动可以挽救许多生命。然而&#xff0c;传统的救援训练往往存在成本高、风险大、效率低等问题。在这样的背景下&#xff0c;虚拟现实&#xff08;VR…

1.Gin 介绍

1.Gin 介绍 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架&#xff0c;运行速度非常快&#xff0c;如果你是性能和高效的追求者&#xff0c;我们推荐你使用 Gin 框架。 Gin 最擅长的就是 Api 接口的高并发&#xff0c;如果项目的规模不大&#xff0c;业务相对简单&a…

JVM垃圾收集器

什么是垃圾收集器 Java虚拟机的垃圾收集器是内存回收的具体实现&#xff0c;主要用于回收不再使用的对象&#xff0c;释放内存空间。Java虚拟机提供了多种垃圾收集器&#xff0c;不同的垃圾收集器适用于不同的场景和需求。 在C中&#xff0c;对象所占的内存在程序结束运行之前…

【Spring】使用xml配置AOP

文章目录 1.前言2.xml配置AOP3. 总结 1.前言 在之前的学习中,都是使用注解的方式进行AOP的配置.其实使用xml配置文件也可以配置AOP. 2.xml配置AOP xml配置AOP方法如下: 添加相关依赖 <dependencies><dependency><groupId>org.springframework</groupId…

vue实现el-menu与el-tabs联动

效果图如下&#xff1a; 当标签栏很多的时候效果图如下&#xff1a; 左侧菜单布局 &#xff08;$route.path高亮显示激活路由 :default-active"$route.path"&#xff09; <el-menu:default-active"$route.path"class"el-menu-vertical-demo"b…

【Hello Go】Go语言文本文件处理

文本文件处理 字符串处理字符串操作ContainsJoinindexrepeatReplaceSplitTrimFields 字符串转换AppendFormatParse 正则表达式Json处理编码Json通过结构体生产Json通过map生产json 解码Json解析到结构体解析到interface 文件操作相关api介绍建立和打开文件关闭文件写文件读文件…

深度学习卫星遥感图像检测与识别 -opencv python 目标检测 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐…

优秀智慧园区案例 - 三亚市崖州湾科技城智慧园区,先进智慧园区建设方案经验

一、项目背景 三亚崖州湾科技城作为海南自贸港建设的重点园区&#xff0c;是重点推进的海南自贸港先导项目之一。崖州湾科技城全力抢抓有利时机&#xff0c;进一步拓宽发展思路&#xff0c;持续深化体制机制创新&#xff0c;牢牢把握“打造产学研城深度融合的聚集地”这一核心…

nodejs express vue uniapp新闻发布系统源码

开发技术&#xff1a; node.js&#xff0c;mysql5.7&#xff0c;vscode&#xff0c;HBuilder nodejs express vue uniapp 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索新闻&#xff0c;新闻分类&#xff0c;新闻列表 点击新闻进入新闻详情&#xff0…

代码随想录第六十三天 | 单调栈:寻找 左边 / 右边 距离当前元素最近的 更小 元素的 下标(暴力,双指针,单调栈)(84);代码随想录主要题目结束

1、寻找 左边 / 右边 距离当前元素最近的 更小 元素的 下标 1.1 leetcode 84&#xff1a;柱状图中最大的矩形 第一遍代码思路错了&#xff0c;如&#xff1a;输入[2,1,2]&#xff0c;对于2&#xff0c;因为比栈顶元素1大&#xff0c;然后就会直接得出2&#xff08;1&#xff…

vite构建项目不能使用require解决方案

在utils文件夹下创建一个getImgUrl.ts文件 /** vite的特殊性, 需要处理图片 */ export const require (imgPath: string) > {try {const handlePath imgPath.replace(, ..)console.log(handlePath::, imgPath)return new URL(handlePath, import.meta.url).href} catch (…