探索 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 主题颜色

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

<TextViewandroid: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.MaterialButtonandroid: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.NavigationRailandroid: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.SearchBarandroid:id="@+id/searchBar"android:layout_width="match_parent"android:layout_height="wrap_content" />

3.4 TabBar：标签栏

<com.google.android.material.tabs.TabBarandroid: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，为用户带来全新的体验吧！

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

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

相关文章

15 Go的并发

15 Go的并发

概述 在上一节的内容中&#xff0c;我们介绍了Go的类型转换&#xff0c;包括&#xff1a;断言类型转换、显式类型转换、隐式类型转换、strconv包等。在本节中&#xff0c;我们将介绍Go的并发。Go语言以其强大的并发模型而闻名&#xff0c;其并发特性主要通过以下几个元素来实现…
阅读更多...
微机原理_15

微机原理_15

一、单项选择题&#xff08;本大题共 15 小题&#xff0c;每小题 3 分&#xff0c;共 45分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案。 以下叙述正确的&#xff08;&#xff09; A.微机的字长可以是8、16、24、32位 B.微机的字长可以是8、16、32、64位 C.微…
阅读更多...
实验（四）：指令部件实验

实验（四）：指令部件实验

一、实验内容与目的 实验要求&#xff1a; 利用CP226实验仪上的小键盘将程序输入主存储器EM&#xff0c;通过指令的执行实现微程序控制器的程序控制。 实验目的&#xff1a; 1.掌握模型机的操作码测试过程&#xff1b; 2.掌握模型机微程序控制器的基本结构以及程序控制的基本原…
阅读更多...
界面控件DevExpress WPF流程图组件，完美复制Visio UI！(一)

界面控件DevExpress WPF流程图组件，完美复制Visio UI！(一)

DevExpress WPF Diagram&#xff08;流程图&#xff09;控件帮助用户完美复制Microsoft Visio UI&#xff0c;并将信息丰富且组织良好的图表、流程图和组织图轻松合并到您的下一个WPF项目中。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至…
阅读更多...
pytorch中.to(device) 和.cuda()的区别

pytorch中.to(device) 和.cuda()的区别

在PyTorch中&#xff0c;使用GPU加速可以显著提高模型的训练速度。在将数据传递给GPU之前&#xff0c;需要将其转换为GPU可用的格式。 函数原型如下&#xff1a; def cuda(self: T, device: Optional[Union[int, device]] None) -> T:return self._apply(lambda t: t.cuda…
阅读更多...
-bash: ./deploy.sh: /bin/bash^M: bad interpreter: No such file or directory

-bash: ./deploy.sh: /bin/bash^M: bad interpreter: No such file or directory

文章目录 场景解决 场景 jenkins 发布失败, 报错ERROR: Exception when publishing, exception message [Exec exit status not zero. Status [126]], 这说明远程服务器的deploy.sh执行失败, 首先检查权限&#xff0c;没有发现问题&#xff0c;然后手动执行一遍又报错"-ba…
阅读更多...
steamui.dll找不到指定模块，要怎么修复steamui.dll文件

steamui.dll找不到指定模块，要怎么修复steamui.dll文件

当我们使用Steam进行游戏时&#xff0c;有时可能会面对一些令人无奈的技术问题。一种常见的问题是“找不到指定模块steamui.dll”&#xff0c;这可能是由于缺少文件、文件损坏或软件冲突等原因导致。但别担心&#xff0c;这篇文章将提供几种解决此问题的方法&#xff0c;并针对…
阅读更多...
Apache Airflow (十三) ：Airflow分布式集群搭建及使用-原因及

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

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

线程池[重点]

线程池概述 线程池就是一个可以复用线程的技术。 不使用线程池的问题 &#xff1a;如果用户每发起一个请求&#xff0c;后台就创建一个新线程来处理&#xff0c;下次新任务来了又要创建新线程&#xff0c;而创建新线程的开销是很大的&#xff0c;这样会严重影响系统的性能。 …
阅读更多...
第六年到第十年是分水岭

第六年到第十年是分水岭

我今年懈怠了&#xff0c;觉得就这样了&#xff0c;看到知乎上有个大神的帖子&#xff0c;深受触动&#xff0c;前五年都差不多&#xff0c;第六年到第十年才是分水岭&#xff0c;是否愿意继续努力&#xff0c;才是关键。拷贝如下&#xff1a; 作者&#xff1a;技术王 来源&…
阅读更多...
身为程序员哪一个瞬间让你最奔溃 ？

身为程序员哪一个瞬间让你最奔溃 ？

身为程序员&#xff0c;有时候最让我感到沮丧的瞬间之一是遇到难以追踪和解决的 Bug。这些 Bug 可能出现在我写的代码中&#xff0c;也可能是由于不可预测的外部因素引起的。其中一个让我最奔溃的瞬间是在一个大型项目中&#xff0c;我遇到了一个非常复杂的Bug&#xff0c;这个…
阅读更多...
数据可视化加定语

数据可视化加定语

自动化成果数据可视化 资产物料可视化 数据服务可视化 微服务架构的可观测性
阅读更多...
Modbus TCP/RTU协议转PROFINET协议网关

Modbus TCP/RTU协议转PROFINET协议网关

阅读更多...
uniapp生命周期详解

uniapp生命周期详解

Uniapp的生命周期可以从以下三方面进行理解&#xff1a; 应用生命周期 应用生命周期是指应用程序从启动到关闭的整个过程&#xff0c;包括应用程序的启动、前后台切换、退出等。Uniapp提供了以下生命周期钩子函数&#xff1a; onLaunch&#xff1a;应用程序启动时触发&#…
阅读更多...
Linux--网络概念

Linux--网络概念

1.什么是网络 1.1 如何看待计算机 我们知道&#xff0c;对于计算机来说&#xff0c;计算机是遵循冯诺依曼体系结构的&#xff08;即把数据从外设移动到内存&#xff0c;再从内存到CPU进行计算&#xff0c;然后返回内存&#xff0c;重新读写到外设中&#xff09;。这是一台计算机…
阅读更多...
HCIP-一、RSTP 特性及安全

HCIP-一、RSTP 特性及安全

一、RSTP 特性及安全 实验拓扑实验需求及解法 实验拓扑 实验需求及解法 //1.SW1/2/3是企业内部交换机&#xff0c;如图所示配置各设备名称。 //2.配置VLAN&#xff0c;需求如下&#xff1a; //1&#xff09;SW1/2/3创建vlan10 [SW1]vlan batch 10 [SW2]vlan batch 10 [SW3]vla…
阅读更多...
【JavaSE】-4-循环结构

【JavaSE】-4-循环结构

循环结构 循环结构是三大流程控制结构的最后一种&#xff0c;相比于顺序结构和分支结构&#xff0c;循环结构略复杂一些。 前面课程中已经说过&#xff0c;循环结构的特点是能够重复的执行某些代码。 循环结构的基本概念&#xff1a; 循环体&#xff1a;重复执行的代码称为循环…
阅读更多...
深入理解Java AQS：从原理到源码分析

深入理解Java AQS：从原理到源码分析

目录 AQS的设计原理1、队列节点 Node 和 FIFO队列结构2、state 的作用3、公平锁与非公平锁 AQS 源码解析1、Node节点2、acquire(int)3、release(int)4、自旋&#xff08;Spin&#xff09;5、公平性与 FIFO 基于AQS实现的几种同步器1、ReentrantLock&#xff1a;可重入独占锁2、…
阅读更多...
HugeGraph安装与使用

HugeGraph安装与使用

1、HugeGraph-Server与HugeGraph-Hubble下载 HugeGraph官方地址&#xff1a;https://hugegraph.apache.org/ 环境为&#xff1a;linux 官网是有模块版本对应关系,尽量下载较新版本,hubble1.5.0之前是studio功能比较少。官网已经下架server,其他模块下载也比较慢。可以在网上找…
阅读更多...
生成式 AI 落地制造业的关键是什么？亚马逊云科技给出答案

生成式 AI 落地制造业的关键是什么？亚马逊云科技给出答案

编辑 | 宋慧 出品 | CSDN 云计算 作为实体经济的重要组成部分&#xff0c;制造业一直以来都是国家发展的根本和基础。近年制造业的数字化转型如火如荼&#xff0c;今年爆火的生成式 AI 也正在进入制造业的各类场景。全球的云巨头亚马逊云科技从收购芯片公司自研开始&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023