什么是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值由两个分量表示:
-
Elevation:静态的分量
-
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
三大原则
一些有用的规范
Material Design的一些控件
Toolbar
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个顶层(底部)目的地导航到时,可以使用此模式。
- 创建一个菜单资源 ,最多5个导航目标(BottomNavigationView不支持超过5个项目);
- 在内容下面放置BottomNavigationView;
- 将BottomNavigationView上的app:menu属性设置为菜单资源;
- 设置选择监听事件setOnNavigationItemSelectedListener(...)
- 通过app:itemIconTint和app:itemTextColor设置响应用户点击状态。包括Icon以及字体颜色
<!-- 定义bottom_navigation_colors-->
<?xml version="1.0" encoding="utf-8"?>
<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>
<!-- 添加引用 app:itemIconTint="@drawable/bottom_navigation_colors" app:itemTextColor="@drawable/bottom_navigation_colors" -->
设置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 设置角半径
- card_view.setRadius 要在代码中设置角半径,请使用
- card_view:cardBackgroundColor 设置卡片的背景颜色
- card_view:cardElevation 设置Z轴阴影高度
- card_view:cardMaxElevation 设置Z轴阴影最大高度
- card_view:cardUseCompatPadding 设置内边距
- card_view:cardPreventCornerOverlap 在v20和之前的版本中添加内边距,这个属性是为了防止 卡片内容和边角的重叠
Material Button
Material Button是具有更新视觉样式的可自定义按钮组件,且内部内置了多种样式。
TextInputLayout&TextInputEditText
- android:hint 提示文字
- app:counterEnabled 是否添加计数功能,默认是false
- app:counterMaxLength 最大的输入数量(如果计数显示的话,影响显示)
- app:errorEnabled 是否有错误提示
- app:errorTextAppearance 设置错误提示的文字样式
- app:hintAnimationEnabled 是否设置提示文字的动画
- app:hintEnabled 是否启动浮动标签功能,如果不启用的话,所有提示性信息都将在Edittext中显 示
- app:hintTextAppearance 设置提示性文字的样式
- app:passwordToggleContentDescription 该功能是为Talkback或其他无障碍功能提供
- app:passwordToggleEnabled 是否显示后面的提示图片
- app:passwordToggleDrawable 替换后面的提示图片
- app:passwordToggleTint 给后面的提示图片设置颜色
- app:passwordToggleTintMode 控制密码可见开关图标的背景颜色混合模式
- app:counterOverflowTextAppearance 设置计算器越位后的文字颜色和大小(通过style进行设置 的)
- app:counterTextAppearance 设置正常情况下的计数器文字颜色和大小(通过style进行设置的)
TabLayout
- app:tabBackground 设置TableLayout的背景色
- app:tabTextColor 设置未被选中时文字的颜色
- app:tabSelectedTextColor 设置选中时文字的颜色
- app:tabIndicatorColor 设置滑动条的颜
- app:tabTextAppearance="@android:style/TextAppearance.Large" 设置TableLayout的文本主 题,无法通过textSize来设置文字大小,只能通过主题来设定
- app:tabMode="scrollable" 设置TableLayout可滑动,当页数较多时,一个界面无法呈现所有的 导航标签,此时就必须要用。
Bottom Sheet
Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件,可以暂且叫做底 部弹出框吧。 Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置 其状态或者手势操作将其完全展开,或者完全隐藏,或者部分隐藏
Bottom Sheets具有五种状态:
- STATE_COLLAPSED: Bottom Sheets是可见的,但只显示可视(部分)高度。此状态通常是底部 工作表的“静止位置”。可视高度由开发人员选择,应足以表明有额外的内容,允许用户触发某个动 作或扩展Bottom Sheets;
- STATE_EXPANDED: Bottom Sheets是可见的并且它的最大高度并且不是拖拽或沉降;
- STATE_DRAGGING:用户主动向上或向下拖动Bottom Sheets;
- STATE_SETTLING: 拖动/轻扫手势后,Bottom Sheets将调整到特定高度。这将是可视高度,展 开高度或0,以防用户操作导致底部表单隐藏;
- STATE_HIDDEN: Bottom Sheets隐藏。