Material Components for Android助你打造精美App

news2024/11/18 15:43:44

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.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/textfield_label">

  <com.google.android.material.textfield.TextInputEditText
      android: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.TextInputLayout
    style="@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.TextInputEditText
      android: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.coloradmin.cn/o/1417688.html

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

相关文章

RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

💡 RT-DETR改进有效系列目录 💡 前言 Hello，各位读者们好 Hello，各位读者，距离第一天发RT-DETR的博客已经过去了接近两个月，这段时间里我深入的研究了一下RT-DETR在ultralytics仓库的使用，旨在为大家解决为什么用v8的仓库训练的时候模型不收敛，精度差的离谱的问题，…
阅读更多...
sqli.labs靶场（8-17关）

sqli.labs靶场（8-17关）

8、第八关&#xff08;布尔盲注&#xff09; id1显示You are in...........&#xff0c;id1单引号不显示&#xff0c;id1 --显示正常 这个应该是单引号闭合&#xff0c;接下来就和第七关差不多上脚本 爆库名长度&#xff1a;id1%27%20and%20length(database()){i}%20-- 爆库…
阅读更多...
如何在 VM 虚拟机中安装 Red Hat Enterprise Linux 9.3 操作系统保姆级教程（附链接）

如何在 VM 虚拟机中安装 Red Hat Enterprise Linux 9.3 操作系统保姆级教程（附链接）

一、VMware Workstation 虚拟机 先得安装 VM 虚拟机&#xff0c;没有的可以参考这篇文章安装 VM 虚拟机 如何在 VM 虚拟机中安装 Win10 操作系统保姆级教程&#xff08;附链接&#xff09;https://eclecticism.blog.csdn.net/article/details/135713915 二、Red Hat Linux 镜…
阅读更多...
软考 系统分析师系列知识点之知识管理（2）

软考 系统分析师系列知识点之知识管理（2）

接前一篇文章&#xff1a;软考 系统分析师系列知识点之知识管理&#xff08;1&#xff09; 所属章节&#xff1a; 第7章. 企业信息化战略与实施 第7节. 企业信息系统 7.7.5 知识管理 相关试题 1. 知识管理是企业信息化过程中的重要环节&#xff0c;知识可以分为显性知识和隐性…
阅读更多...
计算机网络——IP协议

计算机网络——IP协议

前言 网络层的主要负责地址分配和路由选择,ip负责在网络中进行数据包的路由和传输。 IPv4报文组成&#xff08;了解&#xff09; IPv4首部&#xff1a;IPv4首部包含了用于路由和传输数据的控制信息&#xff0c;其长度为20个字节&#xff08;固定长度&#xff09;。 版本&#…
阅读更多...
leetcode26. 删除有序数组中的重复项

leetcode26. 删除有序数组中的重复项

题目 题目 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &…
阅读更多...
前端——JavaScript

前端——JavaScript

目录 文章目录 前言 一. JavaScript基础 1.JavaScript基本结构 2. JavaScript 执行过程 3. JavaScript 引入方式 二. JavaScript 语法 1.数据类型 2.变量 2.1 var 关键字定义变量 2.2 let 关键字定义变量 2.3 var 与 let 的区别 3.字符串 3.1定义字符串 3.2 字…
阅读更多...
Python爬虫解析库安装

Python爬虫解析库安装

解析库的安装 抓取网页代码之后&#xff0c;下一步就是从网页中提取信息。提取信息的方式有多种多样&#xff0c;可以使用正则来提取&#xff0c;但是写起来相对比较烦琐。这里还有许多强大的解析库&#xff0c;如 lxml、Beautiful Soup、pyquery 等。此外&#xff0c;还提供了…
阅读更多...
除了Adobe之外，还有什么方法可以将Excel转为PDF？

除了Adobe之外，还有什么方法可以将Excel转为PDF？

前言 Java是一种广泛使用的编程语言&#xff0c;它在企业级应用开发中发挥着重要作用。而在实际的开发过程中&#xff0c;我们常常需要处理各种数据格式转换的需求。今天小编为大家介绍下如何使用葡萄城公司的的Java API 组件GrapeCity Documents for Excel&#xff08;以下简…
阅读更多...
数据结构（一）------顺序表

数据结构（一）------顺序表

文章目录 前言一、什么是顺序表二、实现顺序表1.静态顺序表2.动态顺序表总结 前言 制作不易&#xff01;三连支持一下呗&#xff01;&#xff01;&#xff01; 从今天起我们将会进入数据结构的学习&#xff01; 我们先来了解 什么是数据结构 数据结构是计算机存储、组织数…
阅读更多...
2023年算法OOA-CNN-BiLSTM-ATTENTION回归预测（matlab）

2023年算法OOA-CNN-BiLSTM-ATTENTION回归预测（matlab）

OOA-CNN-BiLSTM-Attention鲸鱼算法优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 鱼鹰优化算法&#xff08;Osprey optimization algorithm&#xff0c;OOA&#xff09;由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出&#xff0c;其模拟鱼鹰的捕…
阅读更多...
go语言函数进阶

go语言函数进阶

1.变量作用域 全局变量 全局变量是定义在函数外部的变量&#xff0c;它在程序整个运行周期内都有效。 在函数中可以访问到全局变量。 package mainimport "fmt"//定义全局变量num var num int64 10func testGlobalVar() {fmt.Printf("num%d\n", num) /…
阅读更多...
汽车网络安全dos, someip

汽车网络安全dos, someip

汽车Cyber Security入门之DoS 攻防 - 知乎 3、SOME/IP-TP 近年来火热地谈论下一代EE架构和SOA的时候&#xff0c;总离不开SOME/IP这个进程间通讯协议。在许多应用场景中&#xff0c;需要通过UDP传输大型的SOME/IP有效载荷。鉴于在以太网上传输数据包的大小限制&#xff0c;SO…
阅读更多...
多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DBO-BiLSTM多变量时间序…
阅读更多...
Matlab|【完全复现】基于价值认同的需求侧电能共享分布式交易策略

Matlab|【完全复现】基于价值认同的需求侧电能共享分布式交易策略

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序完全复现《基于价值认同的需求侧电能共享分布式交易策略》&#xff0c;针对电能共享市场的交易机制进行研究&#xff0c;提出了基于价值认同的需求侧电能共享分布式交易策略&#xff0c;旨在降低电力市…
阅读更多...
面经基础版案例(路由，请求渲染，传参，组件缓存)

面经基础版案例(路由，请求渲染，传参，组件缓存)

文章目录 1.案例效果分析2.配置一级路由&#xff08;首页&#xff0c;详情&#xff09;3.配置二级路由4.导航高亮效果5.首页的请求渲染6.传参&#xff08;查询参数 $ 动态路由&#xff09;7.详情页渲染8.组件缓存kepp-alive9.总结 1.案例效果分析 2.配置一级路由&#xff08;首…
阅读更多...
实战 | OpenCV+OCR实现弧形文字识别实例(详细步骤 + 源码)

实战 | OpenCV+OCR实现弧形文字识别实例(详细步骤 + 源码)

导 读 本文主要介绍基于OpenCV+OCR实现弧形文字识别实例，并给详细步骤和代码。源码在文末。 背景介绍 测试图如下，目标是正确识别图中的字符。图片来源： https://www.51halcon.com/forum.php?mod=viewthread&tid=6712 同样，论坛中已经给出了Halcon实现代码，…
阅读更多...
web应用课——（第二讲：CSS）

web应用课——（第二讲：CSS）

目录 一、实战项目一&#xff1a;Acwing名片 二、实战项目二&#xff1a;Bilibili名片 三、样式定义方式 四、选择器 五、颜色 六、文本 七、字体 八、背景 九、边框 十、元素展示格式 十一、内边距与外边距 十二、盒子模型 十三、位置 十四、浮动 十五、flex布…
阅读更多...
老代码为啥如此设计，我是如何解决编译失败的？

老代码为啥如此设计，我是如何解决编译失败的？

周末翻出三年前的杰作“jpy”&#xff0c;专为人工智能开发的dsl语言&#xff0c;不仅编译无法通过&#xff0c;而且一连串的疑问映入眼帘。这…这…这些文件/内容都是干啥的啊&#xff0c;为什么如此设计&#xff1f; 技术千万条&#xff0c;专研第一条&#xff0c;自嗨无笔记…
阅读更多...
Lombok的详细教程

Lombok的详细教程

什么是lombok Lombok是一个Java库&#xff0c;它通过提供一组注释来简化Java类的开发。使用Lombok&#xff0c;开发人员可以通过在类或字段上添加注释来自动生成通用的方法&#xff0c;如getter、setter、equals、hashCode等。这样可以减少冗余的样板代码&#xff0c;提高开发效…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023