一、简介
Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和"其他平台"提供更一致、更广泛的"外观和感觉"。
Material Design包含了很多内容,大致分为四部分:
1.主题和布局
2.视图和阴影
3.UI控件
4.动画
UI控件中常用的大概有这么14种:
1、AppBarLayout----是一个垂直的LinearLayout,实现了Material Design中app bar的scrolling gestures特性。
2、ToolBar----工具条。
3、DrawerLayout----抽屉菜单。
4、NavigationView----NavigationView就是左边抽屉拉出来后的布局。
5、RecyclerView----RecyclerView 是 ListView 的升级版本,更加先进和灵活。
6、CardView----这控件其实就是一个卡片。
7、AutoScrollViewPager----是一个Android ViewPager类库,实现页面间的自动滚动和循环轮播,也可以在ViewPager嵌套ViewPager。
8、CoordinatorLayout----只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。
9、CollapsingToolbarLayout----提供一个可以折叠的Toolbar。
10、TabLayout----TabLayout是MaterialDesign之后推出的自定义控件,可以用来完成tab切换 横向滑动 下标显示当前页等等以前很复杂实现的功能。
11、TextInputLayout----是一个用于在EditText上显示floating效果的辅助控件,其效果与扔物线的MaterialEditText效果相似。
12、FloatingActionButton----简称FAB,是浮动操作按钮,一般作为进阶操作的开关,在用户界面中通常是一个漂浮的小圆圈,它有自身独特的动态效果,比如变形、弹出、位移等等,代表着在当前页面上用户的特定的操作。
13、Snackbar----提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈。
14、NestedScrollView----在MD中,RecyclerView代替了ListView,而NestedScrollView代替了ScrollView,他们两个都可以用来跟ToolBar交互,实现上拉下滑中ToolBar的变化。在NestedScrollView的名字中其实就可以看出他的作用了,Nested是嵌套的意思,而ToolBar基本需要嵌套使用。
如何在Android使用Material Design库?
只要之配置文件中加入Material Design依赖进行了。
二、AppBarLayout
AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作,它的布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。
AppBarLayout的子View应该声明想要具有的“滚动行为”,这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。
AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作,为了让AppBarLayout能够知道何时滚动其子View,我们还应该在CoordinatorLayout布局中提供一个可滚动View,我们称之为scrolling view。scrolling view和AppBarLayout之间的关联,通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。
请注意:上面提到的某个可滚动View,可以理解为某个ScrollView。怎么理解上面的话呢?就是说,当某个ScrollView发生滚动时,你可以定制你的“顶部栏”应该执行哪些动作(如跟着一起滚动、保持不动等等)。那某个可移动的View到底是哪个可移动的View呢?这是由你自己指定的!如何指定,我们后面说。
AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用,所以我们先来看下Toolbar。
(1)、Toolbar
Toolbar是android L引入的一个新控件,可以理解为action bar的替换品:提供了action bar类似的功能,但是更灵活。不像actionbar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意位置,可以应用动画,可以跟着scrollView滚动,可以与布局中的其他view交互。当然,你还可以用Toolbar替换掉actionbar,只需调用 Activity.setActionBar()。
所以我们在使用Toolbar之前要把ActionBar给隐藏掉。
隐藏ActionBar的方法有很多,可以通过代码的方式隐藏,也可以通过配置文件的方式,我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的AppTheme标签中加入如下两行:
- false
- true
最后将Toobar作为“ActionBar”来用
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("这里是Title");
toolbar.setSubtitle("这里是子标题");
toolbar.setLogo(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);
效果如下:
示例:http://download.csdn.net/detail/u011781521/9826953
(2)、AppBarLayout
功能:让子View(AppBar)可以选择他们自己的滚动行为。
注意:需要依赖CoordinatorLayout作为父容器,同时也要求一个具有可以独立滚动的兄弟节点(或兄弟节点的子view可以滚动)才能发挥其功能。
2.1将AppBarLayout与ScrollView关联起来
前面说过只有当"ScrollView"滚动时才起效果,那么如何将AppBarLayout与ScrollView关联起来呢?
这个时候我们就可以用NestedScrollView这个来解决这个问题,然后上面还说到AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作,所以我们把NestedScrollView作为CoordinatorLayout的子类。
修改布局文件如下:
运行结果如下:
往上一划,toolbar就隐藏了。示例:http://download.csdn.net/detail/u011781521/9826965
三、CollapsingToolbarLayout
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。
主要功能大概有:
(1) 折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。你可以通过调用setTitle函数来设置title。
(2)内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.
(3)状态栏纱布(Status bar scrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。
(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。将布局参数app:layout_collapseMode设为parallax
(5)将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。
大概页面布局如下:
运行效果如下:
示例:http://download.csdn.net/detail/u011781521/9828929