Material Design – MD的使用

Material Design 简介

Android5.0以后谷歌提供了一套设计UI规范,根据这个设计走,做出来的app不会丑。
在MD里面有很多有用好看的控件。

image.png

Z轴

总所周知安卓坐标系是这样的,但是这时谷歌还提出了Z轴。(在前篇事件分发里,没有设置Z轴,分发事件时,是按照xml顺序分发的。)
image.png

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

1、Elevation:静态的分量(xml里设置) 2、Translation:用于动画的动态的分量(java里代码设置)

也就是说,RelativeLayout布局的时候,本来下层应该覆盖上层。

image.png

但是给上层设置一个z轴高度,上面就覆盖下面了

image.png

海拔对照图

也就是图里的控件,用这个海拔时比较好看。

image.png

有用的控件

ezg7ec6d9.gif

Toolbar

ViewGroup类型的,所以里面可以自己写要啥Title。
image.png

具体属性:
image.png

FloatingActionButton

悬浮的Button按钮
image.png

具体属性:
image.png

Snackbar

弹窗,介于 Toast < Snackbar < dialog

image.png

使用:
image.png

BottomAppBar

底部导航栏
CoordinatorLayout 包裹 BottomAppBar+FloatingActionButton 可以实现这样的一个底部导航栏,省的自己写了

image.png

DrawerLayout

左右两边的拉框

image.png

最外层用这个包裹,然后主体写前面,左右边拉框后面

image.png
点击事件
image.png

CardView

卡片布局

image.png

Chip

这种,以后不必自己写 圆角TextView,还有button的点击效果,还有小图片等等

image.png

MaterialButton

好看的Button

image.png

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar

很多app(B站),这样下拉展开,然后上拉收缩成Title的效果。

image.png

使用代码

image.png

image.png

AppBarLayout下面第一个子View必须设置 app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" 要不然就不能联动的滑动了。

注意点

android 5.0以后才能用。
主题的设置,得设置成 NoActionBar才能用toolbar相关(CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar 这一套组合)
主要是:这两属性
image.png

其他控件还有挺多需要用Theme.MaterialComponents.Light.DarkActionBar这个主题的

image.png
image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享