Material Components for Android 入门指南

宣连璐Maura

于 2025-06-02 09:04:32 发布

阅读量390

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00152/article/details/148375559

Material Components for Android 入门指南

material-components-android Modular and customizable Material Design UI components for Android 项目地址: https://gitcode.com/gh_mirrors/ma/material-components-android

前言

Material Components for Android 是 Google 官方提供的 Material Design 组件库，它帮助开发者快速构建符合 Material Design 规范的 Android 应用界面。本文将详细介绍如何开始使用这个强大的 UI 组件库。

环境准备

1. 开发工具要求

要使用最新版本的 Material Components for Android，你需要：

最新版本的 Android Studio
项目配置要求：
- compileSdkVersion 35 或更高
- minSdkVersion 21 或更高

2. Java 8 支持

Material Components 和 AndroidX Jetpack 库现在要求你的应用使用 Java 8 进行编译。确保你的项目配置支持 Java 8。

项目配置

1. 添加依赖

在你的应用模块的 build.gradle 文件中添加以下依赖：

dependencies {
    implementation 'com.google.android.material:material:<最新版本号>'
}

最新版本号可以在官方仓库中查找。建议使用 1.5.0 或更高版本以获得完整的 Material 3 支持。

2. 仓库配置

确保你的项目级 build.gradle 文件中包含 Google 的 Maven 仓库：

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

主题配置

1. 使用 Material 3 主题

推荐将应用主题继承自 Material 3 主题系列：

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- 自定义主题属性 -->
</style>

Material 3 主题提供了完整的 Material Design 系统支持，包括动态色彩等功能。

2. 主题继承关系

以下是 Material 3 主题与传统 Material Components 主题的对应关系：

| Material 3 主题 | 传统 Material 主题 | |----------------|-------------------| | Theme.Material3.Light | Theme.MaterialComponents.Light | | Theme.Material3.Dark | Theme.MaterialComponents | | Theme.Material3.DayNight | Theme.MaterialComponents.DayNight |

3. 自定义主题属性

如果你的应用不能直接继承 Material 3 主题，可以在现有主题中添加必要的 Material 属性，包括：

颜色系统属性（colorPrimary, colorSecondary 等）
文字样式属性（textAppearanceHeadline1 等）
形状系统属性（shapeAppearanceSmallComponent 等）

组件使用示例

1. 文本输入框实现

以下是一个带轮廓的文本输入框实现示例：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="用户名">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

2. 不同样式的文本输入框

如果需要填充样式的文本输入框，可以这样实现：

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.Material3.TextInputLayout.FilledBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="密码">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>

最佳实践

使用 AppCompatActivity：确保所有 Activity 继承自 AppCompatActivity 或使用 AppCompatDelegate，以保证组件能正确工作。
逐步迁移：如果无法一次性迁移到 Material 3，可以逐步替换组件，同时保持现有主题不变。
全面测试：更改主题或添加新组件后，务必进行全面测试，因为 Material 3 可能会改变现有组件的外观和行为。