Android Material Design：入门指南

已于 2025-01-02 14:00:02 修改
阅读量1.3k 收藏 18
点赞数 19
文章标签： android
于 2024-12-23 22:20:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fjnu_se/article/details/144678997
版权

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 库依赖

dependencies {

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

2. style 主题使用material风格

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- 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 文件中，可以找到或配置颜色：

<resources>
    <!-- 定义颜色 -->
    <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 的示例：

<com.google.android.material.button.MaterialButton
    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) 是一个常见的布局元素，用于展示内容块。

<com.google.android.material.card.MaterialCardView
    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 是一种轻量级通知组件，用于展示短暂的消息，同时提供可操作的按钮。

示例代码：

val snackbar = Snackbar.make(findViewById(R.id.rootLayout), "This is a Snackbar", Snackbar.LENGTH_LONG)
snackbar.setAction("Undo") {
    // 按钮点击事件
    Toast.makeText(this, "Action clicked", Toast.LENGTH_SHORT).show()
}
snackbar.show()

在这里插入图片描述
原文链接：https://blog.csdn.net/konoaquada/article/details/144585978
作者：曾景昕

fjnu_se
关注
material-components-android：适用于Android的模块化和可自定义的Material Design UI组件
02-02
Android的Material Components是Android设计支持库的直接替代品。 入门 有关如何开始使用Android材质组件的信息，请参阅我们的指南。 提交错误或功能请求 有关使用方面的问题：询问 。 错误或功能请求应在我们的...
第12章 最佳的UI体验——Material Design实战
Roderick888888的博客
04-25 1470
Material Design是由谷歌的设计工程师们基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。那么谷歌凭什么认为Material Design就能解决Android平台界面风格不统一的问题呢？一言以蔽之，好看！这次谷歌在界面设计上确实是下足了功夫，很多媒体评论，MaterialDesign的出现使得Android首次在UI方面超越了iOS。
Android Material Design 中文版
05-10
原质化设计(Material Design)中文版 完整版 Google I/O 2014 发布的 Material Design 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范，对从业人员意义重大
Android学习之Material Components
最新发布
m0_69682018的博客
04-03 894
以下是 Material Design 提供的核心控件列表（基于最新 库），按功能分类整理：依赖版本： 核心特性：注意事项： 特点对比 控件 特点 普通 Switch 原生基础控件，样式简单（直角滑块/无主题适配），无 Material 特性（如动态颜色/涟漪效果）。 SwitchMaterial 支持 Material Design 规范（圆角滑块/动态主题），提供图标支持、触摸涟漪反馈、无障碍优化。 使用场景对比 控件 适用场景 普通 Switch
Android---Material Design
qq_44950283的博客
12-31 1025
Material Design 中文名：材料设计语言，是由 Google 推出的全新的设计语言。Google 表示，这种设计语言旨在为手机、平板、台式机和“其它平台”提供更一致、更广泛的“外观和感觉”。Material Design 不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度；Material Design 还规范了 Android 的运动元素；Material Design 更加倾向于用色彩来提示；
让你的 APP换上Material Design
linhaosheng123456的博客
03-29 1204
转自  ：http://www.jianshu.com/p/f22c0f50ac3f# 字数3293 阅读1357 评论15 喜欢60 Material Design 我的更多 android 博文，关注作者~每周更新一篇 Android干货博文 http://xuyushi.github.io/archives/ 吐槽 作为一个 And
重磅教程！帮你全面彻底搞定Material design的学习笔记
风起云涌
12-30 2454
原文：http://www.uisdc.com/comprehensive-material-design-note PS:  想了解学习Material Design的同学一定要看看这篇文章，非常细致，特地引过来与君共勉。 自从Material design发布以来，可乐橙就在一直收集相关素材与资源，研究别人的作品。这套设计风格非常鲜明，带有浓郁的Google式严谨和理性哲学，深得我
Android中的 Material Design
baidu_41564215的博客
10-24 293
1. 为什么有 Material Design？      安卓标准的界面设计风格没有IOS美观，而且Android平台界面风格不统一。Material Design在2014年推出，解决美观与Android界面风格不统一问题。 2.Toolbar代替ActionBar，更加灵活      更改application的主题：      res--&gt;values--&gt;styl...
掌握Google Material Design：入门指南
资源摘要信息:"Google Material Design 是由谷歌公司推出的一套全面的视觉、动作、和界面设计指南，旨在为开发者提供一个统一且具有吸引力的跨平台用户体验。Google Material Design 源自于纸质设计元素，并将这些...
Android Material Design 启动项目入门指南
资源摘要信息:"material-sample:Android Material Design 启动项目"是一个为Android开发人员提供的启动项目，旨在通过一个具体的示例来展示如何在Android应用中实现Material Design的设计理念和组件。Material ...
MATERIAL DESIGN 超详细指南教程【高清PDF】
03-26
MATERIAL DESIGN
Android Material Design
12-05
本人花钱购买，适合安卓移动端设计，部件很全，有交互动作，省去不少设计时间。
android-material-design
11-21
android material design 设计风格，包括多个自定义控件
Material Inbox：Angular Material示例项目入门指南
Material Design广泛应用于Android应用以及Web和桌面应用程序。 知识点5：Git版本控制系统 Git是一个开源的分布式版本控制系统，广泛用于源代码的管理。Git提供了一个完整的版本历史跟踪，可以方便地进行代码的分支...
Material Design
810364804
06-28 160
Material Design是google io开发者大会推出的新的设计语言，Material Design不像Android过去采用的Holo风格那样深沉，增加或修改了阴影动画功能，使其更加跳动和富有活力。 Android L 开发者预览版包含了支持Material Design的Apps。Material Design是一个综合的视觉指南、运动和交互设计平台。在你的应用中可以按...
Android之Material Design
LVXIANGAN的专栏
12-09 379
什么是Material Design？ 中文：材料设计。它是2014年谷歌为了解决碎片化，统一不同产品存在的不同UI风格而设计了一套扁平化、简约风格的UI控件，类似的其他厂商设计还有：苹果、微软（Mego）等     如何使用Material Design？ 添加兼容函数库的依赖，如compile 'com.android.support:design:23.2.0' 添加V7包(可能)...
Android基础——Material Design
松仔Log的博客
08-02 4405
Material DesignMaterial Design是什么？ToolbarDrawerLayoutNavigationViewFloatingActionButtonSnackbarCoordinatorLayoutCarView Material Design是什么？ Material Design时谷歌推出的一套UI设计规范，主要通过Design Support库来实现。 Toolbar 将ActionBar取消，修改value文件夹下的style.xml，修改parent为NoActionBa
Material Design入门
weixin_30691871的博客
04-05 151
本文主要包括以下内容 ToolBar的使用 RecyclerView的定义与使用 ToolBar 风格 (style) 界面 (layout) 程序 (java) 首先自定义一个theme,并将AppTheme的parent改成我们自定义的theme (style.xml) <resources> &...
tf.keras.layers.Attention
09-10
tf.keras.layers.Attention是一个用于实现注意力机制的Keras层。它接受一个查询张量、值张量和键张量作为输入，并计算一个分布用于加权求和值张量。该层的实现可以按照以下步骤进行： 1. 将查询张量、值张量和键张量作为输入，形状分别为[batch_size，Tq，dim]、[batch_size，Tv，dim]和[batch_size，Tv，dim]。 2. 计算查询张量和键张量之间的点积得分，形状为[batch_size，Tq，Tv]，可以使用tf.matmul(query, key, transpose_b=True)实现。 3. 对得分进行softmax操作，得到一个分布，形状仍为[batch_size，Tq，Tv]，可以使用tf.nn.softmax(scores)实现。 4. 使用该分布对值张量进行加权求和操作，得到注意力输出张量，形状为[batch_size，Tq，dim]。 因此，tf.keras.layers.Attention层能够通过计算查询张量和键张量之间的点积得分，并使用该分数来计算一个分布，然后使用该分布对值张量进行加权求和，从而实现注意力机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值