Android应用Design Support Library 使用研究

Android 5.0 Lollipop 是重大的一次发布，很大程度上是因为
material design —— 这是一门新的设计语言，它刷新了整个 Android 的用户体验。但是对于开发者来说，要设计出完全符合 material design 哲学的应用，是一个很大的挑战。Android Design Support Library 对此提供了很好的支持，里面汇集了很多重要的 material design 控件，支持所有 Android 2.1 及后续版本。里面你可以看到 navigation drawer view、floating labels、floating action
button、snackbar、tabs，以及一套将它们紧密结合在一起的动作与滚动框架。

一 使用方法

Gradle build script dependency：

compile 'com.android.support:design:23.2.0' //可修改版本号为自己匹配

Design Support Library包含8个控件，具体如下：

Widget Name	Description
android.support.design.widget.TextInputLayout	强大带提示的MD风格的EditText
android.support.design.widget.FloatingActionButton	MD风格的圆形按钮，来自于ImageView
android.support.design.widget.Snackbar	类似Toast，添加了简单的单个Action
android.support.design.widget.TabLayout	选项卡
android.support.design.widget.NavigationView	DrawerLayout的SlideMenu
android.support.design.widget.CoordinatorLayout	超级FrameLayout
android.support.design.widget.AppBarLayout	MD风格的滑动Layout
android.support.design.widget.CollapsingToolbarLayout	可折叠MD风格ToolbarLayout

下面详细说说这些控件的特性和使用注意项。

1，FloatingActionButton

由上面可知FloatingActionButton是继承于ImageView, 所以我们可以像iamgeView一样用，但是这里有几个坑，需要提出来，
1） FloatingActionButton不能建议自定义大小，它的大小由系统写定义了，只有normal 和 mini 两种,默认为normal,如果修改了会出现一些显示问题，

app:fabSize="normal"  ro  app:fabSize="mini"

可以看到系统是按下面定义的：

<resources>
<dimen name="fab_elevation">8dp</dimen>
<dimen name="fab_press_translation_z">9dp</dimen>
<dimen name="fab_size">56dp</dimen>
<dimen name="fab_size_small">40dp</dimen>
<dimen name="fab_icon_size">24dp</dimen>
</resources>

2) 修改背景颜色通过backgroundTint属性，如果设置了app theme 为： android:theme="@style/AppTheme"，那么会默认读取主题中的colorAccent属性

<item name="colorAccent">@color/colorAccent</item>

3）hide 和 show 方法，使用这两个方法显示或隐藏FloatActiongButton时会有动画效果

4）如果要扩大可点击区域可以设置

app:useCompatPadding="true"

下面给出上图中xml用法

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="@drawable/search"
app:fabSize="normal"
app:useCompatPadding="true"
app:backgroundTint="@color/redE11644"
android:layout_margin="@dimen/activity_vertical_margin"
/>

更多用法可以参考Floating-Action-Buttons 这里

2，SnackBar

使用Snackbar我们可以在屏幕底部快速弹出消息，它和Toast非常相似，但是它更灵活一些。

我们看一下如何使用:

Snackbar.make(view, message, duration)
.setAction(action message, click listener)
.show();

注意配合CoordinatorLayout使用，不然会出现Snackbar弹出时挡住其他控件的问题，而在CoordinatorLayout中则不会，这里setAction
主要是能让用户增加一个可以点击的String。

3, CoordinatorLayout

CoordinatorLayout作为“super-powered
FrameLayout”基本实现两个功能： 
1、作为顶层布局 
2、调度协调子布局

CoordinatorLayout 实现了多种Material
Design中提到的滚动效果。目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括：

让浮动操作按钮上下滑动，为Snackbar留出空间。



扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。



控制哪个view应该扩展还是收缩，以及其显示大小比例，包括视差滚动效果动画。



所以我们这里先不单独说CoordinatorLayout， 而是它与其他几个控件配合使用。

4，AppBarLayout
AppBarLayout is a vertical 

LinearLayout

 which
implements many of the features of material designs app bar concept, namely scrolling gestures.

AppBarlayout 就是一个垂直方向布局的LinearLayout,它具有许多Material designs特效。
注意它要作为CoordinatorLayout的直接子View，才会具有这些Material
designs 特效

看看他的一个最简单使用列子：

这个用例很常见，就是在list里面上滑隐藏头部，下滑出现头部

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_scrollFlags="scroll|enterAlways|snap">
.........
</LinearLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/list_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/search"
app:backgroundTint="@color/redE11644"
app:fabSize="normal"
app:useCompatPadding="true" />

</android.support.design.widget.CoordinatorLayout>

为了实现上面效果，AppBarLayout里面布局需要添加Layout_scrollFlags, 它有下面这些属性

scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
snap: 需要滑动到一定距离才会可见或隐藏该Veiw

5, CollapsingToolbarLayout

具有折叠效果的控件，一般需要配合Toolbar 一起使用，下面先看看效果：



CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsinglayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="28dp"
app:expandedTitleMarginBottom="30dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/chrysan"
android:layout_centerHorizontal="true"
app:layout_collapseMode="parallax"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/headerimg"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
app:contentInsetStart="20dp"
app:contentInsetEnd="20dp">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/list_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/search"
app:backgroundTint="@color/redE11644"
app:fabSize="normal"
app:useCompatPadding="true" />

</android.support.design.widget.CoordinatorLayout>

我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。

1、在CollapsingToolbarLayout中：

我们设置了layout_scrollFlags:关于它的值我这里再说一下：
scroll - 想滚动就必须设置这个。
enterAlways
- 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。
exitUntilCollapsed
- 向上滚动时收缩View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed
- 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

其中还设置了一些属性，简要说明一下：
contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

2、在ImageView控件中：

我们设置了：

layout_collapseMode (折叠模式) - 有两个值:
              pin -  设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
       parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和 
                     layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
       layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

3、在Toolbar控件中：

我们设置了layout_collapseMode(折叠模式)：为pin。

综上分析：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。

6, TabLayout

tab是我们很常见的一种布局，配合viewpage使用，现在官方也为我们提供了一个TabLayout,使用起来超方便，先看看效果



看看xml如何使用：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/redE11644"
app:tabTextColor="@color/black"
app:tabMode="scrollable"
app:tabGravity="center">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

</LinearLayout>

在代码里面我们只需一句代码，绑定viewpager

mViewPager.setAdapter(new FargmentAdapter(getChildFragmentManager()));
mTab.setupWithViewPager(mViewPager);

可见简单好用，注意xml文件里面

tabMode有scrollable 和 fixed 两种模式，即tab，可以选择滑动或固定，如果tab过多一般使用scrollable

tabGravity 有center 和 fill 两种模式。

6, TextInputLayout

先看看效果：



由上图知道，就是在一个输入文本宽，在输入的时候适当的给与些提示，下面看看xml文件，使用简单

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">

<android.support.design.widget.TextInputEditText
android:id="@+id/login"
android:hint="请输入用户名："
android:layout_width="match_parent"
android:layout_height="50dp" />

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp">

<android.support.design.widget.TextInputEditText
android:id="@+id/code"
android:hint="请输入密码："
android:layout_width="match_parent"
android:layout_height="50dp" />

</android.support.design.widget.TextInputLayout>

在代码里面只要检测输入提示就可以了，错误提示用setError()方法。