什么是Material Design

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Tip: 在Android5.0最引人注意的就是MaterialDesign设计风格 Material Design：谷歌拿出媲美苹
果的设计 过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不
必看产品设计，只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难
以体现出Google的风格，如果Google的风格不是混乱和无序的话。 2011年，拉里·佩奇成为 Google
CEO之后，他管理公司的政策从过去的自由、放任，变为紧密、整合。根据我们的报道，
在Google发展的早期，因为鼓励观点的碰撞，结果发展成一种不留情面的争论氛围，高管之间冲
突不断，甚至会拒绝合作。佩奇决心要改变公司的氛围，2013年2月，在纳帕山谷的卡内罗斯客
栈酒店里，他对所有Google高管说，Google要实现10倍的发展速度，要用全新的方法来解决问
题，因此高管之间要学会合作。从现在开始，Google要对争斗零容忍。

• Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维 度
• Material Design还规范了Android的运动元素
• Material Design更加倾向于用色彩来提示

Google 发布的Material Design语言更像是一套界面设计标准

Z轴

在Material Design主题当中给UI元素引入了高度的概念，视图的高度由属性Z来表示，决定了阴影的视觉效果，Z越大，阴影就越大且越柔和。但是Z值并不会影响视图的大小。
视图的Z值由两个分量表示：

1. Elevation：静态的分量
2. Translation：用于动画的动态的分量

Z值的计算公式为： Z=elevation+translationZ

• 通过在xml布局文件当中给一个视图设置android:elevation属性，来设置视图的高度。当然我们也
  可以在代码当中使用View.setElevation()来给视图设置高度。
• 还可以在代码当中设置视图的translationZ分量:View.setTranslationZ()。
• 新的ViewPropertyAnimator.z()以及ViewPropertyAnimator.translationZ()方法能够很容易的改变
  视图的高度。关于这个动画的更多信息，参考ViewPropertyAnimator以及PropertyAnimation相 关的API。
• 还可以给视图设置Android:StateListAnimator属性来设置视图的状态改变动画，比如当点击按钮
  的时候改变其translationZ分量的值。
• Z值的单位是dp

Material Design的一些theme

• Theme.MaterialComponents
• Theme.MaterialComponents.NoActionBar
• Theme.MaterialComponents.Light
• Theme.MaterialComponents.Light.NoActionBar
• Theme.MaterialComponents.Light.DarkActionBar
• Theme.MaterialComponents.DayNight
• Theme.MaterialComponents.DayNight.NoActionBar
• Theme.MaterialComponents.DayNight.DarkActionBar

Toolbar

https://developer.android.com/reference/com/google/android/material/packages
Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

• 设置导航栏图标

• 设置App的logo

• 支持设置标题和子标题

• 支持添加一个或多个的自定义控件

• 支持Action Menu
  在布局文件中设置

• app:navigationIcon 设置navigation button

• app:logo 设置logo 图标

• app:title 设置标题

• app:titleTextColor 设置标题文字颜色

• app:subtitle 设置副标题

• app:subtitleTextColor 设置副标题文字颜色

• app:popupTheme Reference to a theme that should be used to inflate
  popups - shown by widgets in the toolbar.

• app:titleTextAppearance 设置title text 相关属性，如：字体,

• 颜色，大小等等

  app:subtitleTextAppearance 设置subtitletext相关属性，如：字体,颜色，大小等等

• app:logoDescription logo 描述

• android:background Toolbar 背景

• android:theme 主题

FloatingActionButton

FloatingActionButton是一个继承ImageView悬浮的动作按钮，经常用在一些比较常用的操作中，一个
页面尽量只有一个FloatingActionButton，否则会给用户一种错乱的感觉！FloatingActionButton的大
小分为标准型(56dp)和迷你型(40dp)，google是这么要求的，如果你不喜欢可以自己设置其他大小。并
且对于图标进行使用materialDesign的图标，大小在24dp为最佳！

• android:src 设置相应图片
• app:backgroundTint 设置背景颜色
• app:borderWidth 设置边界的宽度。如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而
  且在5.0以后的sdk没有阴影效果。
• app:elevation 设置阴影效果
• app:pressedTranslationZ 按下时的阴影效果
• app:fabSize 设置尺寸normal对应56dp，mini对应40dp
• app:layout_anchor 设置锚点，相对于那个控件作为参考
• app:layout_anchorGravity 设置相对锚点的位置 top/bottom之类的参数
• app:rippleColor 设置点击之后的涟漪颜色

Snackbar

Snackbar就是一个类似Toast的快速弹出消息提示的控件，手机上显示在底部，大屏幕设备显示在左侧。但是在显示上比Toast丰富，也提供了于用户交互的接口

BottomAppBar

Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为，So，
BottomAppBar是一个从标准物质指导的演变。它更注重功能，增加参与度，并可视化地锚定UI

要求Activity的主题必须是MaterialComponents的主题

• style=“@style/Widget.MaterialComponents.BottomAppBar”
• 可以通过FabAlignmentMode，FabCradleMargin，FabCradleRoundedCornerRadius和 FabCradleVerticalOffset来控制FAB的放置；
• （FabAlignmentMode）可以设置为中心或结束。如果FabAttached设置为True，那么Fab将被布置为连接到BottomAppBar；
• FabCradleMargin是设置FAB和BottomAppBar之间的间距，改变这个值会增加或减少FAB和BottomAppBar之间的间距；
• FabCradleRoundedCornerRadius指定切口周围角的圆度；
• FabCradleVerticalOffset指定FAB和BottomAppBar之间的垂直偏移量。如果fabCradleVerticalOffset为0，则FAB的中心将与BottomAppBar的顶部对齐。

NavigationView

NavigationView表示应用程序的标准导航菜单，菜单内容可以由菜单资源文件填充。NavigationView通常放在DrawerLayout中，可以实现侧滑效果的UI。DrawerLayout布局可以有3个子布局，第一个布局必须是主界面且不可以不写，其他2个子布局就是左、右两个侧滑布局，左右两个侧滑布局可以只写
其中一个

• android:layout_gravity 值为start则是从左侧滑出，值为end则是从右侧滑出
• app:menu NavigationView是通过菜单形式在布局中放置元素的，值为自己创建的菜单文件
• app:headerLayout 给NavigationView设置头文件
• app:itemTextColor 设置菜单文字的颜色
• app:itemIconTint 设置菜单图标的颜色
• app:itemBackground 设置菜单背景的颜色

BottomNavigationView

BottomNavigationView创建底部导航栏，用户只需轻点一下即可轻松浏览和切换顶级内容视图，当项
目有3到5个顶层（底部）目的地导航到时，可以使用此模式。

1. 创建一个菜单资源 ，最多5个导航目标（BottomNavigationView不支持超过5个项目）；
2. 在内容下面放置BottomNavigationView； 3. 将BottomNavigationView上的app：menu属性设置为菜单资源；
3. 设置选择监听事件setOnNavigationItemSelectedListener(…)
4. 通过app:itemIconTint和app:itemTextColor设置响应用户点击状态。包括Icon以及字体颜色

 、

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:color="@color/colorAccent" android:state_checked="true" /> 
<item android:color="@android:color/white" android:state_checked="false" /> 
selector>
 
1
2
3
4
5
6
7
8
9

设置style

• style=“@style/Widget.Design.BottomNavigationView” 默认的材质 BottomNavigationView样式由更新的颜色，文字大小和行为组成。默认的 BottomNavigationView具有白色背景以及带有颜色的图标和文本colorPrimary
• style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"此样式继 承默认样式，但将颜色设置为不同的属性。 使用彩色样式获取带有colorPrimary背景的底部
  导航栏，并为图标和文本颜色添加白色阴影。
• style=“@style/Widget.Design.BottomNavigationView” 如果希望底部导航栏具有旧行为， 可以在BottomNavigationView上设置此样式。 但是，还是建议尽可能使用更新后的 Material style

DrawerLayout

DrawerLayout是V4 Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件
如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两
部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单
的点击而变化

• 抽屉式导航栏是显示应用主导航菜单的界面面板。当用户触摸应用栏中的抽屉式导航栏图标 或用
  户从屏幕的左边缘滑动手指时，就会显示抽屉式导航栏
• 抽屉式导航栏图标会显示在使用 DrawerLayout 的所有顶级目的地上。顶级目的地是应用的根级
  目的地。它们不会在应用栏中显示向上按钮。
• 要添加抽屉式导航栏，请先声明 DrawerLayout 为根视图。在 DrawerLayout 内，为主界面内容
  以及包含抽屉式导航栏内容的其他视图添加布局。
• 例如，以下布局使用含有两个子视图的 DrawerLayout：包含主内容的 NavHostFragment 和适用
  于抽屉式导航栏内容的 NavigationView
  
  

CardView

Material Design中有一种很个性的设计概念：卡片式设计（Cards），Cards拥有自己独特的UI特 征,CardView 继承自FrameLayout类，并且可以设置圆角和阴影，使得控件具有立体性，也可以包含其
他的布局容器和控件

• card_view:cardCornerRadius 设置角半径
• CardView.setRadius 要在代码中设置角半径，请使用
• card_view:cardBackgroundColor 设置卡片的背景颜色
• card_view:cardElevation 设置Z轴阴影高度
• card_view:cardMaxElevation 设置Z轴阴影最大高度
• card_view:cardUseCompatPadding 设置内边距
• card_view:cardPreventCornerOverlap
  在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠