Material Design

最新推荐文章于 2025-04-26 16:27:50 发布

ruanjianbu

最新推荐文章于 2025-04-26 16:27:50 发布

阅读量772

点赞数 1

分类专栏： Android 文章标签： Material Design Android

本文链接：https://blog.youkuaiyun.com/ruanjianbu/article/details/86615190

版权

本文深入解析Material Design的设计理念，涵盖核心思想、空间概念、动画效果、颜色运用及NavigationView控件的详细配置步骤，旨在帮助开发者理解和应用这一设计语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、核心思想

Material Design的核心思想，是将物理世界的体验带入屏幕的方寸之间。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

二、空间

除了X和Y属性之外，Android中的视图还具有Z属性。z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。

阴影为物体的深度和方向运动提供了重要的视觉线索。它们是唯一的视觉线索，指示出物体表面之间的距离。物体的高度决定了它的影子的外观。

所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

1、静态海拔

所有的物质元素都有静止的高度。虽然组件在不同的应用程序之间有着一致的静态高度，但它们在不同平台和设备上可能有不同的静态高度。

2、动态的高度补偿

动态海拔偏移量是一个构件相对于静止状态的目标提升。

在这里插入图片描述

三、动画

基于物理的运动

Material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

只要有可能，您的动画应该应用现实世界的物理，因此它们看起来很自然。例如，他们应该在目标变化时保持动量，并在任何变化期间进行平滑过渡。

水波反馈

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了Material design动画的功能性。

在这里插入图片描述

四、颜色

UI调色板

调色板以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。
在这里插入图片描述

主色

主色是应用中出现最频繁的颜色。如果没有使用辅助色的话，也可以用主色来强调元素。使用主色来强调元素，例如按钮和复选框。

辅助色

辅助色用于强调 UI 中的选择部分。辅助色可以是和主色互补的，也可以是和主色类似的，但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比，并作为强调，且应谨慎使用。

五、NavigationView

NavigationView是Design Support库中提供的一个控件，它将左侧滑动菜单页面的实现变得非常简单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu。

接下来我们就学习一下Navigation的用法。

首先在app/build_gradle的dependencies中添加Design Support库和CircleImageView:

implementation 'com.android.support.design:28.0.0'
implementation 'de.hdodenhof:circleimageview:2.1.0'

在Layout中创建nav_header.xml文件，代码如下：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id=