Material Components for Android助你打造精美App

Material Components for Android助你打造精美App

简介

Material Components for Android (MDC-Android) 是帮助开发者执行 Material Design 的工具。由谷歌的核心工程师和用户体验设计师团队开发，这些组件使得开发者可以可靠地开发工作流来构建美观且功能齐全的 Android 应用程序。
Material Components for Android 是 Android 设计支持库的即插即用替代品。

快速入门

  1. 迁移指南

要将您的应用程序迁移到Material Components for Android的最新版本（Material 3），请查看我们的指南和代码实验室，以获取帮助。

如果您目前还在使用传统的Design Support Library，请查看我们的传统指南，以帮助您将代码库迁移到Material Components for Android。

  1. Maven库依赖

Material Components for Android可以通过Google的Maven存储库获得。要使用它，请按以下步骤操作：

打开应用程序的build.gradle文件。确保repositories部分包括Google的Maven存储库google()。例如：

      allprojects {repositories {google()mavenCentral()}}

将库添加到dependencies部分：

  dependencies {// ...implementation 'com.google.android.material:material:<version>'// ...}

请访问Google的Maven存储库或MVN存储库以查找库的最新版本。

注意：为了使用新的Material 3主题和组件样式，您应该依赖于1.5.0或更高版本。

新命名空间和AndroidX

如果您的应用程序当前依赖于原始的Design Support Library，则可以使用Android Studio提供的“重构为AndroidX…”选项。这样做将更新您的应用程序依赖项和代码，以使用新打包的androidx和com.google.android.material库。

如果您还不想切换到新的androidx和com.google.android.material包，您可以通过com.android.support:design:28.0.0依赖项使用Material Components。

注意：您不应同时在应用程序中使用com.android.support和com.google.android.material依赖项。

  1. Android 12编译

为了使用最新版本的Material Components for Android和AndroidX Jetpack库，您需要安装最新版本的Android Studio，并将您的应用程序的compileSdkVersion更新到32。

作为迁移到Android 12的一部分，您需要在清单中添加android:exported，以用于使用意图过滤器的任何活动、服务或广播接收器（请参阅文档）。考虑阅读Android 12应用程序迁移指南和行为更改，以获取更多提示和信息。

  1. Java 8编译

最新的Material和AndroidX Jetpack库现在要求您的应用程序使用Java 8进行编译。请参阅Java 8语言功能和API文档，以获取有关Java 8支持以及如何为应用程序启用它的更多信息。

  1. Gradle、AGP和Android Studio
    使用MDC-Android版本1.7.0-alpha02及以上版本时，您需要确保您的项目以以下最低要求构建，以支持最新的构建功能，例如XML宏：

    Gradle版本7.3.3
    Android Gradle插件（AGP）版本7.2.0
    Android Studio Chipmunk，版本2021.2.1

  2. AppCompatActivity

使用AppCompatActivity确保所有组件正常工作。如果无法扩展自AppCompatActivity，请更新您的活动以使用AppCompatDelegate。这将使得能够填充AppCompat或Material版本的组件（取决于您的主题），以及其他重要功能。

  1. Material3主题继承

我们建议您通过将您的应用程序主题更改为继承自Material3主题来执行全局迁移。请务必在测试后彻底检查，因为这可能会更改现有布局组件的外观和行为。

查看新的Material Theme Builder，它可以用于生成基于您的品牌颜色填充所有Material Color System角色的Material3应用程序主题。

Web(https://material.io/material-theme-builder)
Figma(https://goo.gle/material-theme-builder-figma)

注意：如果无法更改您的主题，您可以继续继承自AppCompat或MaterialComponents主题，并向您的主题添加一些新的主题属性。有关更多详细信息，请参阅AppCompat或MaterialComponents主题部分。

  1. Material3主题

以下是您可以使用的Material3主题，以获取最新的组件样式和主题级别属性，以及适用时的MaterialComponents等效项。

更新您的应用程序主题以继承以下主题之一：

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar"><!-- ... -->
</style>

有关如何为应用程序设置主题级别属性的更多信息，请查看我们的主题指南，以及我们的暗色主题指南，了解为什么从DayNight主题继承是重要的。

Material3主题启用自定义视图填充器，用Material组件替换默认组件。目前，它将以下XML组件替换为Material组件：

  • <Button → MaterialButton
  • <CheckBox → MaterialCheckBox
  • <RadioButton → MaterialRadioButton
  • <TextView → MaterialTextView
  • <AutoCompleteTextView → MaterialAutoCompleteTextView

AppCompat或MaterialComponents主题

您可以在不更改应用程序主题的情况下逐步测试新的Material组件。这样，您就可以保持现有布局的外观和行为不变，同时逐个将新组件引入到您的布局中。

但是，您必须将以下新主题属性添加到现有的应用程序主题中，否则您将遇到ThemeEnforcement错误：

<style name="Theme.MyApp" parent="Theme.AppCompat OR Theme.MaterialComponents"><!-- Original AppCompat attributes. --><item name="colorPrimary">@color/my_app_primary</item><item name="colorPrimaryDark">@color/my_app_primary_dark</item><item name="colorSecondary">@color/my_app_secondary</item><item name="android:colorBackground">@color/my_app_background</item><item name="colorError">@color/my_app_error</item><!-- MaterialComponents attributes (needed if parent="Theme.AppCompat"). --><item name="colorPrimaryVariant">@color/my_app_primary_variant</item><item name="colorSecondaryVariant">@color/my_app_secondary_variant</item><item name="colorSurface">@color/my_app_surface</item><item name="colorOnPrimary">@color/my_app_on_primary</item><item name="colorOnSecondary">@color/my_app_on_secondary</item><item name="colorOnBackground">@color/my_app_on_background</item><item name="colorOnError">@color/my_app_on_error</item><item name="colorOnSurface">@color/my_app_on_surface</item><item name="scrimBackground">@color/mtrl_scrim</item><item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item><item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item><item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item><item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item><item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item><item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item><item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item><item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item><item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item><item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item><item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item><item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item><item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item><!-- Material3 attributes (needed if parent="Theme.MaterialComponents"). --><item name="colorPrimaryInverse">@color/my_app_primary_inverse</item><item name="colorPrimaryContainer">@color/my_app_primary_container</item><item name="colorOnPrimaryContainer">@color/my_app_on_primary_container</item><item name="colorSecondaryContainer">@color/my_app_secondary_container</item><item name="colorOnSecondaryContainer">@color/my_app_on_secondary_container</item><item name="colorTertiary">@color/my_app_tertiary</item><item name="colorOnTertiary">@color/my_app_on_tertiary</item><item name="colorTertiaryContainer">@color/my_app_tertiary_container</item><item name="colorOnTertiaryContainer">@color/my_app_on_tertiary_container</item><item name="colorSurfaceVariant">@color/my_app_surface_variant</item><item name="colorOnSurfaceVariant">@color/my_app_on_surface_variant</item><item name="colorSurfaceInverse">@color/my_app_inverse_surface</item><item name="colorOnSurfaceInverse">@color/my_app_inverse_on_surface</item><item name="colorOutline">@color/my_app_outline</item><item name="colorErrorContainer">@color/my_app_error_container</item><item name="colorOnErrorContainer">@color/my_app_on_error_container</item><item name="textAppearanceDisplayLarge">@style/TextAppearance.Material3.DisplayLarge</item><item name="textAppearanceDisplayMedium">@style/TextAppearance.Material3.DisplayMedium</item><item name="textAppearanceDisplaySmall">@style/TextAppearance.Material3.DisplaySmall</item><item name="textAppearanceHeadlineLarge">@style/TextAppearance.Material3.HeadlineLarge</item><item name="textAppearanceHeadlineMedium">@style/TextAppearance.Material3.HeadlineMedium</item><item name="textAppearanceHeadlineSmall">@style/TextAppearance.Material3.HeadlineSmall</item><item name="textAppearanceTitleLarge">@style/TextAppearance.Material3.TitleLarge</item><item name="textAppearanceTitleMedium">@style/TextAppearance.Material3.TitleMedium</item><item name="textAppearanceTitleSmall">@style/TextAppearance.Material3.TitleSmall</item><item name="textAppearanceBodyLarge">@style/TextAppearance.Material3.BodyLarge</item><item name="textAppearanceBodyMedium">@style/TextAppearance.Material3.BodyMedium</item><item name="textAppearanceBodySmall">@style/TextAppearance.Material3.BodySmall</item><item name="textAppearanceLabelLarge">@style/TextAppearance.Material3.LabelLarge</item><item name="textAppearanceLabelMedium">@style/TextAppearance.Material3.LabelMedium</item><item name="textAppearanceLabelSmall">@style/TextAppearance.Material3.LabelSmall</item><item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.Material3.SmallComponent</item><item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.Material3.MediumComponent</item><item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.Material3.LargeComponent</item>
</style>
  1. 添加Material组件

查看Material Design(https://material.io/components?platform=android)，了解所有可用的Material组件列表。每个组件页面都有关于如何在您的应用程序中实现它的具体说明。

让我们以文本字段为例。
通过XML实现文本字段

默认的 outlined文本字段XML定义如下：

<com.google.android.material.textfield.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/textfield_label"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

注意：如果您没有使用继承自Material3主题的主题，您还需要通过style="@style/Widget.Material3.TextInputLayout.OutlinedBox"指定文本字段样式。

还提供其他文本字段样式。例如，如果您想在布局中使用填充文本字段，您可以在XML中将Material3填充样式应用到文本字段上：

<com.google.android.material.textfield.TextInputLayoutstyle="@style/Widget.Material3.TextInputLayout.FilledBox"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/textfield_label"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

Catalog App

展示了一系列演示的Material组件目录，涵盖了各种主题。通过在真实设备上展示不同API级别上的Material Design组件和原则的行为，Material组件目录为开发人员提供了可工作的代码示例。

要尝试MDC目录应用程序，您可以在Android Studio中运行catalog模块，或者运行以下Gradle命令：

./gradlew :catalog:installDebug

https://github.com/material-components/material-components-android/blob/master/docs/catalog-app.md

参考链接

Material Design(https://www.material.io/)
Material Components for Android(https://github.com/material-components/material-components-android)
Android Developer’s Guide(https://developer.android.com/training/material/index.html)
Material Design Guidelines(https://material.google.com/)

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

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

相关文章

期权定价模型系列[9]SABR模型

期权定价模型系列[9]SABR模型

1.简介 SABR模型是由 Hagan在 2002年提出的一种随机波动率模型&#xff0c;在抛弃了原始的BSM 模型中对于波动率为某一常数的假定&#xff0c;假设隐含波动率同样是符合几何布朗运动的&#xff0c;并且将隐含波动率设定为标的价格和合约行权价的函数&#xff0c;结合了隐含波动…
阅读更多...
12.5内存操作流(血干JAVA系列)

12.5内存操作流(血干JAVA系列)

12.5内存操作流 12.5内存操作流ByteArraylnputStream类的主要方法ByteArrayOutputStream 类的主要方法【例12.33】使用内存操作流完成一个大写字母转换为小写字母的程序 12.5内存操作流 在 流 的 操 作 中 除 了 进 行 文 件 的 输 入 与 输 出 操 作 之 外 &#xff0c; 也 可…
阅读更多...
flask初体验

flask初体验

1、定义 Flask是一个Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务。 中文官网 2、初步上手 1、安装flask pip3 install flask 2、创建flask应用 # -*- coding = utf-8 -*- # @Time : 2024/1/28 23:02 # @Author: Frank # @File: main.py…
阅读更多...
说说你对vue的mixin的理解，有什么应用场景

说说你对vue的mixin的理解，有什么应用场景

mixin是什么 Vue中的mixin 局部混入全局混入注意事项: 使用场景源码分析Vue 的几种类型的合并策略 替换型合并型队列性叠加型小结 此文章&#xff0c;来源于印客学院的资料&#xff0c;这里只是分享&#xff0c;便于查漏补缺。 mixin是什么 Mixin 是 面向对象程序设计语言中…
阅读更多...
回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测（含优化前后预测可视化）

回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测（含优化前后预测可视化）

回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测 目录 回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测预测效果基本介绍程序设计参考资料预测效果 <
阅读更多...
爬虫基础-计算机网络协议

爬虫基础-计算机网络协议

一个数据的传输 这些设备的数据转发是通过协议来完成的&#xff0c;整个互联网可以说是完全由网络协议来维持的 不同的协议分工不同&#xff0c;比如ip协议确保了ip寻址&#xff0c;tcp协议确保了数据完整性 IP地址和URL ip地址 整个网络传输可以比作快递&#xff0c;数据就…
阅读更多...
使用毫米波雷达传感器的功能安全兼容系统设计指南1（TI文档）

使用毫米波雷达传感器的功能安全兼容系统设计指南1（TI文档）

摘要 功能安全标准规定了在系统中实施安全的要求&#xff0c;并有助于概括该系统要达到的安全目标。包括功能安全的系统设计不仅要降低操作不当的风险&#xff0c;还要检测故障并将其影响降到最低。随着汽车和工业系统的自主性越来越强&#xff0c;严格的功能安全要求被强制执行…
阅读更多...
（28）Linux 信号保存 信号处理 不可重入函数

（28）Linux 信号保存 信号处理 不可重入函数

首先介绍几个新的概念&#xff1a; 信号递达(Delivery)&#xff1a;实际执行信号的处理动作。信号未决(Pending)&#xff1a;信号从产生到递达之间的状态。信号阻塞(Block)&#xff1a;被阻塞的信号产生时将保持在未决状态&#xff0c;直达解除对该信号的阻塞&#xff0c;才执…
阅读更多...
【大厂AI课学习笔记】1.2 人工智能的应用（1）

【大厂AI课学习笔记】1.2 人工智能的应用（1）

目录 1.2 人工智能的应用 1.2.1 产业中人工智能的应用 金融 教育 医疗 交通 制造 ——智慧金融 智能风控 智能理赔 智能投研 &#xff08;声明&#xff1a;本学习笔记学习原始资料来自于腾讯&#xff0c;截图等资料&#xff0c;如有不合适摘录的&#xff0c;请与我联…
阅读更多...
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖微信小程序端(十五)

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖微信小程序端(十五)

用户端历史订单模块 1. 查询历史订单1.1 需求分析和设计1.2 代码实现1.2.1 user/OrderController1.2.2 OrderService1.2.3 OrderServiceImpl1.2.4 OrderMapper1.2.5 OrderMapper.xml1.2.6 OrderDetailMapper 2. 查询订单详情2.1 需求分析和设计2.2 代码实现2.2.1 user/OrderCon…
阅读更多...
SpringBoot常见错误

SpringBoot常见错误

SpringBoot常见错误 1、SpringBoot启动时报错 错误: 找不到或无法加载主类 com.xxx.xxx.Application springboot启动时报错错误&#xff1a;找不到或无法加载主类 com.xxx.xxx.Application。 解决方法就是打开idea的控制台&#xff0c;输入以下三行命令&#xff1a; mvn cl…
阅读更多...
nginx安装ssl模块http_ssl_module

nginx安装ssl模块http_ssl_module

查看nginx安装的模块 /usr/local/nginx/sbin/nginx -V若出现“–with-http_ssl_module”说明已经安装过&#xff0c;否则继续执行下列步骤 进入nginx源文件目录 cd /usr/local/nginx/nginx-1.20.2重新编译nginx ./configure --with-http_ssl_module如果组件linux缺少&…
阅读更多...
综合案例 - 商品列表

综合案例 - 商品列表

文章目录 需求说明1.my-tag组件封装&#xff08;完成初始化&#xff09;2.may-tag封装&#xff08;控制显示隐藏&#xff09;3.my-tag组件封装&#xff08;v-model处理&#xff1a;信息修改&#xff09;4.my-table组件封装&#xff08;整个表格&#xff09;①数据不能写死&…
阅读更多...
《HTML 简易速速上手小册》第3章：HTML 的列表与表格（2024 最新版）

《HTML 简易速速上手小册》第3章：HTML 的列表与表格（2024 最新版）

文章目录 3.1 创建无序和有序列表&#xff08;&#x1f4dd;&#x1f31f;&#x1f44d; 信息的时尚搭配师&#xff09;3.1.1 基础示例&#xff1a;创建一个简单的购物清单3.1.2 案例扩展一&#xff1a;创建一个旅行计划清单3.1.3 案例扩展二&#xff1a;创建一个混合列表 3.2 …
阅读更多...
【数据分享】1929-2023年全球站点的逐年平均气温数据（Shp\Excel\免费获取）

【数据分享】1929-2023年全球站点的逐年平均气温数据（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01;本次我们为大家带来的就是具体到气象监…
阅读更多...
win11 系统 WSL2 备份与还原

win11 系统 WSL2 备份与还原

win11 系统想要使用 linu 开发环境&#xff0c;除了虚拟机&#xff0c;就是 wsl 好使了。 但是 wsl 如过用了一段时间里面环境工程配置迁移麻烦如果重装系统后能直接备份还原就方便了。 确定你的版本 使用 WinR 打开输入框 输入 cmd 命令 打开命令提示符界面 wsl -l -v查看…
阅读更多...
【备战蓝桥杯】——循环结构

【备战蓝桥杯】——循环结构

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-bFHV3Dz5xMe6d3NB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 文章目录 QT tcp与udp网络通信以及定时器的使用1、QT网络与通信简单介绍2、QT TCP通信1、 服务器的流程2、 客户端的流程3、服务器的编写4、客户端的编写 3、QT UDP通信1、客户端流程2、客户端编写3、UDP广播4、UDP组播 4、定时器的用法1、…
阅读更多...
【ArcGIS微课1000例】0098：查询河流流经过的格网

【ArcGIS微课1000例】0098：查询河流流经过的格网

本实验讲述，ArcGIS中查询河流流经过的格网，如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流（黄河）和格网数据，如下图所示： 接下来，将查询河流流经过的格网有哪些并…
阅读更多...
SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

新建一个模块&#xff0c;做自动配置 config&#xff1a;需要准备两个类&#xff0c;一个自动配置类&#xff0c;一个配置类 CommonAutoConfig&#xff1a;此类用于做自动配置类它会去读取resoutces下的META-INF.spring下的org.springframework.boot.autoconfigure.AutoConfig…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023