当前位置: 首页 > 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. 什么是通义灵码 是阿里云出品的一款基于通…...

将Hermes Agent工具链的模型调用切换至Taotoken平台

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 将Hermes Agent工具链的模型调用切换至Taotoken平台 对于正在使用Hermes Agent进行AI应用开发的团队而言&#xff0c;统一管理多个…...

判断AI回答内容真伪的系统分析方法

一、核心挑战 AI生成的内容存在几类典型问题&#xff1a; 幻觉&#xff08;Hallucination&#xff09;&#xff1a;AI以高置信度输出不存在的事实、引用、数据 过时信息&#xff1a;训练数据有截止日期&#xff0c;输出可能已失效 混淆性正确&#xff1a;大方向对&#xff0c…...

突破传统音频捕获:为什么win-capture-audio能彻底改变你的直播体验?

突破传统音频捕获&#xff1a;为什么win-capture-audio能彻底改变你的直播体验&#xff1f; 【免费下载链接】win-capture-audio An OBS plugin that allows capture of independant application audio streams on Windows, in a similar fashion to OBSs game capture and Dis…...

Obsidian剪藏模板生成器:打造自动化知识入库工作流

1. 项目概述&#xff1a;一个为Obsidian用户量身定制的剪藏模板生成器如果你和我一样&#xff0c;是Obsidian的重度用户&#xff0c;同时又经常在网上冲浪&#xff0c;看到好文章、好想法就想立刻保存下来&#xff0c;那你一定对“剪藏”这个动作不陌生。无论是用浏览器插件&am…...

从电话到智能手机:技术如何重塑社交隔离与个人茧房

1. 从“佩格与罗西”到“科赛特”&#xff1a;一场技术赋能的社交隔离演变我姐姐佩格在形成可辨识的个性之前&#xff0c;是那种典型的青春期女孩——在闺蜜圈子里&#xff0c;她活泼、健谈、爱八卦&#xff0c;充满了各种“天哪”的惊叹和咯咯的笑声。但对于圈子外的人&#x…...

SITS2026企业估值翻倍实录:AISMM框架如何在90天内激活隐性资产、重构投资者叙事并提升EV/EBITDA 2.3倍?

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;SITS2026企业估值翻倍实录&#xff1a;AISMM框架如何在90天内激活隐性资产、重构投资者叙事并提升EV/EBITDA 2.3倍&#xff1f; SITS2026是一家专注工业智能传感的B2B科技企业&#xff0c;其核心专利组…...

如何高效构建金融数据API:AKShare实战指南与架构深度解析

如何高效构建金融数据API&#xff1a;AKShare实战指南与架构深度解析 【免费下载链接】akshare AKShare is an elegant and simple financial data interface library for Python, built for human beings! 开源财经数据接口库 项目地址: https://gitcode.com/gh_mirrors/aks…...

FDA Data MCP:基于MCP协议为AI智能体构建监管数据接口的实践指南

1. 项目概述&#xff1a;FDA Data MCP&#xff0c;一个为AI智能体赋能的监管数据接口如果你在制药、生物技术或医疗器械行业工作&#xff0c;无论是负责合规、质量保证&#xff0c;还是供应链管理&#xff0c;你一定对“FDA数据”这四个字又爱又恨。爱的是&#xff0c;它是评估…...

别再只用Wireshark了!用Java+Jpcap手撸一个实时网络流量监控工具(附IDEA项目源码)

从零构建Java网络流量监控系统&#xff1a;超越Wireshark的轻量级解决方案 在当今分布式系统和微服务架构盛行的时代&#xff0c;对网络流量的实时监控已成为开发者必备的技能。虽然Wireshark等成熟工具提供了全面的功能&#xff0c;但对于需要深度定制或希望将网络监控能力集成…...

LogCabin客户端编程:C++ API的完整使用教程

LogCabin客户端编程&#xff1a;C API的完整使用教程 【免费下载链接】logcabin LogCabin is a distributed storage system built on Raft that provides a small amount of highly replicated, consistent storage. It is a reliable place for other distributed systems to…...