当前位置: 首页 > news >正文

探索 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,为用户带来全新的体验吧!

相关文章:

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

探索 Material 3&#xff1a;全新设计系统和组件库的介绍 一、Material 3 简介1.1 Material 3 的改进和更新1.2 Material 3 的优势特点 二、Material 3 主题使用2.1 使用 Material3 主题2.2 使用 Material3 主题颜色 三、Material 3 组件使用3.1 MaterialButton&#xff1a;支持…...

《多GPU大模型训练与微调手册》

全参数微调 Lora微调 PTuning微调 多GPU微调预备知识 1. 参数数据类型 torch.dtype 1.1 半精度 half-precision torch.float16&#xff1a;fp16 就是 float16&#xff0c;1个 sign&#xff08;符号位&#xff09;&#xff0c;5个 exponent bits(指数位)&#xff0c;10个 ma…...

【C++】const与类(const修饰函数的三种位置)

目录 const基本介绍 正文 前: 中: 后: 拷贝构造使用const 目录 const基本介绍 正文 前: 中: 后: 拷贝构造使用const const基本介绍 const 是 C 中的修饰符&#xff0c;用于声明常量或表示不可修改的对象、函数或成员函数。 我们已经了解了const基本用法,我们先进行…...

深度学习在图像识别中的革命性应用

深度学习在图像识别中的革命性应用标志着计算机视觉领域的重大进步。以下是深度学习在图像识别方面的一些革命性应用&#xff1a; 1. **卷积神经网络&#xff08;CNN&#xff09;的崭新时代**&#xff1a; - CNN是深度学习在图像识别中的核心技术&#xff0c;通过卷积层、池化…...

R语言读文件“-“变成“.“

R语言读取文件时发生"-"变成"." 如果使用read.table函数&#xff0c;需要 check.namesFALSE data <- read.table("data.tsv", headerTRUE, row.names1, check.namesFALSE)怎样将"."还原为"-" 方法一&#xff1a;gsub函…...

RabbitMQ 基础操作

概念 从计算机术语层面来说&#xff0c;RabbitMQ 模型更像是一种交换机模型。 Queue 队列 Queue&#xff1a;队列&#xff0c;是RabbitMQ 的内部对象&#xff0c;用于存储消息。 RabbitMQ 中消息只能存储在队列中&#xff0c;这一点和Kafka相反。Kafka将消息存储在topic&am…...

自然语言处理:Transformer与GPT

Transformer和GPT&#xff08;Generative Pre-trained Transformer&#xff09;是深度学习和自然语言处理&#xff08;NLP&#xff09;领域的两个重要概念&#xff0c;它们之间存在密切的关系但也有明显的不同。 1 基本概念 1.1 Transformer基本概念 Transformer是一种深度学…...

Ps:裁剪工具 - 裁剪预设的应用

裁剪工具提供了两种类型的裁剪方式。 一种是仅按宽高比&#xff08;比例&#xff09;进行裁剪&#xff0c;常在对图像进行二次构图时采用。 另一种则按指定的图像尺寸&#xff08;宽度值和高度值&#xff09;及分辨率&#xff08;宽 x 高 x 分辨率&#xff09;进行裁剪。其实质…...

前端工程化-什么是构建工具

了解构建工具之前&#xff0c;我们首先要知道的是浏览器只认识html、css、js&#xff0c;而我们开发时用的vue&#xff0c;react框架都只是为了方便我们开发而使用的工具 使用构建工具的原因 vue或react的企业级项目里都会具备这些功能&#xff1a; 1.使用typescript语言&…...

01-论文阅读-Deep learning for anomaly detection in log data: a survey

01-论文阅读-Deep learning for anomaly detection in log data: a survey 文章目录 01-论文阅读-Deep learning for anomaly detection in log data: a survey摘要I 介绍II 背景A 初步定义B 挑战 III 调查方法A 搜索策略B 审查的功能 IV 调查结果A 文献计量学B 深度学习技术C …...

图像处理02 matlab中NSCT的使用

06 matlab中NSCT的使用 最近在学习NSCT相关内容&#xff0c;奈何网上资源太少&#xff0c;简单看了些论文找了一些帖子才懂了一点点&#xff0c;在此分享给大家&#xff0c;希望有所帮助。 一.NSCT流程 首先我们先梳理一下NSCT变换的流程&#xff0c;只有清楚流程才更好的理清…...

提升办公效率,畅享多功能办公笔记软件Notion for Mac

在现代办公环境中&#xff0c;高效的笔记软件对于提高工作效率至关重要。而Notion for Mac作为一款全能的办公笔记软件&#xff0c;将成为你事业成功的得力助手。 Notion for Mac以其多功能和灵活性而脱颖而出。无论你是需要记录会议笔记、管理项目任务、制定流程指南&#xf…...

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

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

# 聚类系列(一)——什么是聚类?

目前在做聚类方面的科研工作, 看了很多相关的论文, 也做了一些工作, 于是想出个聚类系列记录一下, 主要包括聚类的概念和相关定义、现有常用聚类算法、聚类相似性度量指标、聚类评价指标、 聚类的应用场景以及共享一些聚类的开源代码 下面正式进入该系列的第一个部分&#xff…...

Android DatePicker(日期选择器)、TimePicker(时间选择器)、CalendarView(日历视图)- 简单应用

示意图&#xff1a; layout布局文件&#xff1a;xml <?xml version"1.0" encoding"utf-8"?> <ScrollView xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"…...

linux环境搭建mysql5.7总结

以下安装方式&#xff0c;在阿里云与腾讯云服务器上都测试可用。 一、进入到opt目录下&#xff0c;执行&#xff1a; [rootmaster opt]# wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.26-linux-glibc2.12-x86_64.tar.gz解压&#xff1a; [rootmaster opt]#…...

SQL Server Count()函数

SQL Server Count()函数 SQL Server COUNT() 是一个聚合函数&#xff0c;它返回在集合中找到的项目数。 COUNT() 函数语法&#xff1a; COUNT([ALL | DISTINCT ] expression)ALL 指示COUNT() 函数应用于所有值。ALL是默认值。返回非NULL值的数量&#xff08;包括重复值&…...

架构探索之路-第一站-clickhouse | 京东云技术团队

一、前言 架构, 软件开发中最熟悉不过的名词, 遍布在我们的日常开发工作中, 大到项目整体, 小到功能组件, 想要实现高性能、高扩展、高可用的目标都需要优秀架构理念辅助. 所以本人尝试编写架构系列文章, 去剖析市面上那些经典优秀的开源项目, 学习优秀的架构理念来积累架构设…...

易航网址引导系统 v1.9 源码:去除弹窗功能的易航网址引导页管理系统

易航自主开发了一款极其优雅的易航网址引导页管理系统&#xff0c;后台采用全新的光年 v5 模板开发。该系统完全开源&#xff0c;摒弃了后门风险&#xff0c;可以管理无数个引导页主题。数据管理采用易航原创的JsonDb数据包&#xff0c;无需复杂的安装解压过程即可使用。目前系…...

创新无界:通义灵码在测试过程中展现的独特魅力

通义灵码基于通义大模型&#xff0c;提供代码智能生成、研发智能问答能力。本文就来介绍下通义灵码在测试过程中的应用。 操作手册&#xff1a; 通义灵码, 阿里云提供的一款基于通义大模型的智能编码辅助工具_云效-阿里云帮助中心 1. 什么是通义灵码 是阿里云出品的一款基于通…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...