Material Design是Google I/O 2014发布推行的，旨在统一Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范。具有比较浓重的程序感的设计风格，也在不断的完善。当然作为开发的我最直观的感受就是它提供的一系列组件及交互动画。
0.引入项目中使用
因为MD是在Android 5.0后全面推出的，因此为了兼容5.0以下的手机，在项目中使用时要依赖design包:
compile 'com.android.support:support-v4:latest-version'1.CoordinatorLayout
CoordinatorLayout(协调者布局)继承自ViewGroup,称为MD中最重要的控件也不为过。把CoordinatorLayout作为根布局容器，其内部的子控件按照一定的规律排列组合，可以仅仅通过xml布局文件就能产生一些动画效果，让交互变得更生动一些。
官方文档的介绍，这是一款强大的有些类似FrameLayout的组件，当然它所提供的各种交互特性是FrameLayout不及的。最常见的操作是将AppBarLayout、CollapsingToolbarLayout、Toolbar和NestedScrollView组合在一起，随着页面的滑动做出各种效果。先贴上这样的一种布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.mercury.newfeature.FloatingActionButtonActivity" >
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay" >
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/mm"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#6600ff00"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/dd"
app:layout_scrollFlags="scroll"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="我固定不动"/>
</android.support.design.widget.AppBarLayout >
<android.support.v4.widget.NestedScrollView
android:id="@+id/nsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/large_text" />
</android.support.v4.widget.NestedScrollView >
</android.support.design.widget.CoordinatorLayout >
这个布局演示了各种组件可以灵活的组合，实际项目不太会做这种效果。下面简单说一下各个子组件。
2. AppBarLayout
继承自LinearLayout,并且只能作为CoordinatorLayout里的第一个子view（文档说明）使用，如果在其它ViewGroup中使用，其大部分特性不会生效。并且其内部的子控件要通过
LayoutParams#setScrollFlags(int)或者在布局文件中指定app:layout_scrollFlags来定义其想要的滑动行为。
3. CollapsingToolbarLayout
继承自FrameLayout，作为AppBarLayout的一级子控件使用。从字面意思也可以看出，用于包裹Toolbar实现折叠效果的。其内部的Toolbar如果设置了title不为空，则title的字体大小会随着手势滑动，也就是该组件的收缩和舒展而变大变小，它给子控件提供了一个很重要的属性:
app:layout_collapseMode.可以将上面的布局文件稍作改动，让CollapsingToolbarLayout只包裹Toolbar，改变该属性观察有什么效果。注意CollapsingToolbarLayout的 layout_scrollFlags设置为scroll|exitUntilCollapsed，表明它是可以随着手势向上滚动的，并且不会完全滚出屏幕，最终折叠后的高度=Toolbar定义的高度.这里我们给Toolbar定义成其它颜色方便观察。
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed" >
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#6600ff00"
app:layout_collapseMode="none"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout >3.1 app:layout_collapseMode="parallax"此模式是视差模式,随父控件进行高度缩放。此处如果子控件只有一个Toolbar,因为没有什么内容显示,效果不明显.只可以看到Toolbar没有完全隐藏,留了一点宽度.
如果加一张图片滚动演示，效果会明显一些。
3.2 app:layout_scrollFlags="pin"如图, 相当于让CollapsingToolbarLayout临时托管了Toolbar的标题内容, 执行平移和缩放动画.Toolbar最后就像钉子一样订在了最上面。所以不管如何滑动，Toolbar的背景始终没变。
3.3 app:layout_scrollFlags="none" 就是Toolbar会随着手势向上缩放最终消失。
4.NestedScrollView
NestedScrollView 类似于ScrollView, 配合AppBarLayout执行动画使用.其内部的内容会滑动,正是这种滑动才会引起AppBarLayout里的组件改变各种效果。
和ScrollView一样,NestedScrollView也是继承了FrameLayout,在xml文件中一定要添加
app:layout_behavior="@string/appbar_scrolling_view_behavior"属性才会滚动。如果在CoordinatorLayout中用ScrollView或LinearLayout代替NestedScrollView，即使添加了layout_behavior属性也不会产生交互。
5.FloatingActionButton
FloatingActionButton 继承自ImageButton，也间接继承自ImageView，因此它拥有ImageView的一切属性，本质上也是作为一种图形控件使用。仅仅是阴影效果的话用layer-list也可以实现，实际上这个控件实现了用圆形背景包裹src图片，以更统一的风格作为列表类界面的悬浮控件，并且提供了一些attrs特性来在xml中自定义，来进行一些交互操作，典型的就是旧版安卓版知乎.我们的项目中采用FloatingActionButton取代了以前首页商品列表悬浮的购物车图标。简单的xml代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.mercury.newfeature.FloatingActionButtonActivity" >
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/mm"
app:layout_scrollFlags="scroll|snap"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout >
<android.support.v4.widget.NestedScrollView
android:id="@+id/nsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/large_text" />
</android.support.v4.widget.NestedScrollView >
<!-- app:backgroundTint - 设置FAB的背景颜色。
app:rippleColor - 设置FAB点击时的背景颜色。
app:borderWidth - FAB边缘宽度, 在有的4.1的sdk上FAB会显示为正方形，或在5.0以后的sdk没有阴影效果。可以设置为 borderWidth="0dp"解决此问题。
app:elevation - 默认状态下FAB的阴影大小。
app:pressedTranslationZ - 点击时候FAB的阴影大小。
app:fabSize - 设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
src - 设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
app:backgroundTint="#1ae385"
app:rippleColor="#f3c796"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:elevation="25dp"/>
</android.support.design.widget.CoordinatorLayout >Snackbar.make(v, "这是一个SnackBar", Snackbar
.LENGTH_SHORT)
.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "哈哈", Toast.LENGTH_SHORT)
.show();
}
})
.show();
6.TextInputLayout
这其实是一个扩展自LinearLayout的组件，不过是与EditText（或者其子类）结合使用的，并且只能包含一个EditText，如果超过一个EditText会抛出IllegalArgumentException。
TextInputLayout的使用也非常简单，布局文件直接包裹一个EditText即可。它主要是提供了文本框输入的一种交互效果，让输入框的提示在焦点获取和消失时的显示与隐藏切换的更加自然。如果将此动画关闭的话会显得比较生硬。除此之外还提供了错误提示和密文输入控制可见与否的开关（默认此功能关闭并且图标为眼睛）。需要注意的是:如果要改变EditText的hint的颜色，需要修改TextInputLayout中的
textColorHint，因为真正起作用的是容器里的属性。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
