Android Material Design：入门指南

Android Material Design：入门指南

引用

CSDN

1.

https://blog.csdn.net/konoaquada/article/details/144585978

Material Design是Google推出的设计语言，通过统一的视觉、交互和运动设计准则，为用户提供一致、美观和直观的体验。它首次在2014年的Google I/O开发者大会上推出，并成为Android应用程序设计的核心原则。本文将详细介绍Material Design的关键特性和核心概念，并提供具体的开发指导。

核心理念

1. 材质隐喻
   Material Design的核心是“数字材质”这一隐喻，模拟了真实世界中的材质。它通过阴影、光线和运动来展现层次感和深度，帮助用户直观地理解界面结构和元素的优先级。

2. 大胆的图形设计
   采用鲜明的色彩和大面积留白，配以直观的排版和清晰的视觉层次，提升界面的可读性和视觉吸引力。

3. 有意义的运动
   动画在Material Design中被用来解释状态变化、显示用户操作的结果以及提供上下文。它的运动自然、流畅，增强了用户对界面的理解。

主要组件

Material Design提供了大量的预定义UI组件，方便开发者创建功能一致且美观的应用界面：

• 按钮
• 浮动按钮 (FAB)：用于主要操作。
• 扁平按钮和轮廓按钮：用于辅助操作。
• 卡片 (Cards)
  用于分隔内容块，展示与某一主题相关的信息。
• 工具栏 (Toolbar)
  包含标题、导航和操作的顶部栏组件。
• 抽屉导航 (Navigation Drawer)
  用于在不同的应用屏幕或功能之间导航。
• 对话框 (Dialogs)
  提供用户确认或输入信息的弹窗。
• Snackbar 和 Toast
  提供短暂的、非阻断的用户反馈。

设计规范

Material Design规范定义了UI设计的每一个细节，包括：

1. 色彩

• 色板：提供标准化的色彩组合。
• 主题：包含主色、辅助色和背景色。

2. 排版

• 提供了一组标准字体，如Roboto和Noto。
• 层次化的标题和段落设计。

3. 图标

• 提供统一的图标集，适用于多种场景。

4. 阴影与深度

• 使用Z轴定义界面中的层次和深度。

开发支持

Material Design在Android开发中得到了全面的技术支持：

• Material Components for Android
  官方提供的一组开源UI组件库，支持快速实现Material Design规范。
• 主题与样式
  Android提供Material Theme，开发者可以轻松配置应用的整体外观。
• 支持库
  即使是较老版本的Android系统，也可以通过Material Design库享受设计规范。

优点

1. 一致性
   提供统一的设计语言，让用户在跨设备、跨应用时获得一致的体验。
2. 用户友好
   简洁的界面和直观的交互设计，让用户操作更加高效。
3. 高效开发
   规范和组件的存在，使开发者能够快速构建高质量的UI。

实际案例

• Android系统的内置应用（如Gmail、Google Photos）遵循Material Design规范。
  
• 广泛应用于第三方Android应用程序设计。

如果你正在开发Android应用，遵循Material Design规范可以显著提升用户体验和视觉一致性。

使用讲解

使用新版本的Android Studio创建的项目现在是默认支持AndroidX库&Material Design的。打开项目你会发现如下配置

1. material 库依赖

    implementation(libs.appcompat)
    implementation(libs.material)
    ......
}

2. style 主题使用material风格

    <!-- Base application theme. -->
    <style name="Base.Theme.MaterialDesign" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>
    <style name="Theme.MaterialDesign" parent="Base.Theme.MaterialDesign" />
</resources>

其他的Theme有如下

3. 颜色说明

Material Design提供了详细的颜色规范，包括主色、辅助色和背景色等。以下是颜色主题配置的说明：

• 主色 (Primary Color)
  应用的主要色调，通常用于工具栏、按钮等重要组件。
• 辅助色 (Secondary Color)
  辅助强调的颜色，用于浮动按钮 (FAB)、切换控件等。
• 背景色 (Background Color)
  应用的背景颜色，确保文本与背景的对比度足够高。

在项目的res/values/colors.xml文件中，可以找到或配置颜色：

    <!-- 定义颜色 -->
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryVariant">#3700B3</color>
    <color name="colorSecondary">#03DAC6</color>
    <color name="colorBackground">#FFFFFF</color>
    <color name="colorSurface">#FFFFFF</color>
    <color name="colorError">#B00020</color>
    <!-- 文字颜色 -->
    <color name="colorOnPrimary">#FFFFFF</color>
    <color name="colorOnSecondary">#000000</color>
    <color name="colorOnBackground">#000000</color>
    <color name="colorOnSurface">#000000</color>
    <color name="colorOnError">#FFFFFF</color>
</resources>

通过这些颜色配置，你可以调整应用的外观以符合品牌需求或用户偏好。

4. 创建一个 Material Button

Material Design提供的组件可以直接使用，以下是创建Material Button的示例：

    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material Button"
    android:layout_margin="16dp"
    app:cornerRadius="8dp"
    android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_check"
    app:iconGravity="textStart"
/>

属性说明：

• app:cornerRadius：设置按钮的圆角大小。
• android:backgroundTint：按钮背景颜色。
• app:icon：设置按钮左侧的图标。
• app:iconGravity：定义图标的位置（如textStart、textEnd）。

5. 添加 Material Card

Material Design中的卡片 (Card) 是一个常见的布局元素，用于展示内容块。

    android:id="@+id/materialCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:strokeColor="@color/colorPrimary"
    app:strokeWidth="2dp">
    <TextView
        android:id="@+id/cardContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a Material Card"
        android:layout_margin="16dp" />
</com.google.android.material.card.MaterialCardView>

属性说明：

• app:cardCornerRadius：卡片圆角半径。
• app:cardElevation：卡片的阴影高度。
• app:strokeColor：边框颜色。
• app:strokeWidth：边框宽度。

6. 应用 Snackbar 提示

Snackbar 是一种轻量级通知组件，用于展示短暂的消息，同时提供可操作的按钮。

示例代码：

snackbar.setAction("Undo") {
    // 按钮点击事件
    Toast.makeText(this, "Action clicked", Toast.LENGTH_SHORT).show()
}
snackbar.show()