当我们登录google的一些网页会发现,google的Material Design绝不仅仅是在android中使用,而是在他整个产品线都融入了这一风格。大家有兴趣可以看看Google+或者Google Forms,清一色的响应式布局和Material Design风格。这种设计感及用户体验值得我们百度等国内公司学习。
Material Design理念介绍
http://www.uisdc.com/comprehensive-material-design-note
Design Support Library介绍
http://blog.leancloud.cn/3306/?utm_source=tuicool
1.核心思想
Material design的核心思想,就是把物理世界的体验带进屏幕。
2.重要概念
(1)材料
Material design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。
(2)空间
Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。
1.CoordinatorLayout
它接管了子控件之间的动作交互(比如通过滑动改变Toolbar透明度的操作),这些动作可以通过重写CoordinatorLayout.Behavior来完成,然后在xml文件中使用app:behavior属性来指定behavior。
2.AppBarLayout + Toolbar
AppBarLayout是一个容器,它是连接CoordinatorLayout和它子控件的桥梁布局。
Toolbar替代了5.0之前的ActionBar,作为一个普通的控件加载在布局中。它继承自ViewGroup,因此可以在Toolbar内部添加布局。不过一般不建议这么做,因为容易破坏Material Design的设计风格。
使用Toolbar的时候,选用的theme不能带有ActionBar,而且只有在android 23中才可以在xml调用颜色等相关属性。
3.Collapsing ToolbarLayout + NestedScrollView
典型动作是:下拉时Toolbar的被拉长,标题随即放大下沉。依然是通过Behavior来定义滑动动作。 此动作同样通过设置 NestedScrollView的layout_behavior属性来完成。
4.TabLayout
往往和ViewPager和FragmentStatePagerAdapter的子类联合使用。大大简化了自定义Tab和Indicator的工作量。
5.DrawerLayout+NavigationView侧滑菜单
Material Design中核心设计之一,官方集成了侧滑菜单的实现。使用时,只要将父布局设置为DrawerLayout,并在其中添加Content布局和NavigationView即可实现。侧滑菜单包括菜单头和菜单体,菜单体一般使用menu形式。
6.Translucent System Bar
系统状态栏可以实现ios一样的沉浸式效果,通过在styles文件中设置可以完成。具体参考:http://www.jianshu.com/p/0acc12c29c1b
7.RecyclerView
可以代替原来的ListView、GridView,并且增加了瀑布流。使用它时,需要重写RecyclerView.Adapter来进行数据适配,在该Adapter中需重写RecyclerView.ViewHolder;另外可以通过一个LayoutManager类来定制数据的展示形式,如排列方向等。
8.TextInputLayout + EditText
可以在输入栏旁边动态显示状态,可以移动化形式移动hint位置。
9.Snackbar
Toast的加强版,一般显示在屏幕底部,调用方法和Toast很类似:
Snackbar.make(v, “HelloWorld”, Snackbar.LENGTH_LONG).
setAction(“Action”, null).show();
在setAction()方法中的第二个参数还可以设置点击监听器。
10.FloatingActionButton
悬浮按钮,继承自ImageView,用法与普通Button相同。多用于绑定较重要的操作。它可以“镶嵌”在页面的某一个布局上,如下代码:
app:layout_anchor=”@id/app_bar”
app:layout_anchorGravity=”bottom|end”
通过设置anchor属性,将Button绑定在Toolbar上。
11.CardView
继承自FrameLayout,常用来作为item使用,用法与FrameLayout相同。
12.Ripple Drawable资源
水波纹效果动画,在drawable文件夹中用标签实现
13.SVG在Android5.0的使用
SVG格式资源的好处是:它是矢量图,不会因为放大而变模糊;大大提高了性能;不需要为不同大小的屏幕准备多套图片资源。
(1)要实现Material Design效果,就要在项目中添加appcompat-v7包和design support library的依赖。
(2)在项目的style中设置Theme时,均要选用Appcompat类别的Theme。
(3)在布局文件中,一切Material Design的特有属性均要使用“app”的命名空间,而不是“android”。
(4)如果遇到低版本样式不兼容,需要设置values-v21文件夹来区分5.0之前版本的主题。
如果有需要,可以去github上下载我整理的demo,demo集成了Material Design的主要控件,值得一看。
https://github.com/dongjize/material-design-demo