Android5.0材料设计（一）

在谷歌2015 I/O 大会时，谷歌发布了Android Design Support Library，在这个单独的 library 里提供了一堆有用的材料设计 UI 组件。

()build.gradle添加 Android Design Support Library 依赖

compile 'com.android.support:design:23.0.1'

()提取Bitmap的颜色

Palette这个类中提取以下突出的颜色：

Vibrant：充满活力的，Vibrant dark：充满活力的黑，Vibrant light：充满活力的亮

Muted：柔和的，Muted dark：柔和的黑，Muted light：柔和的亮

Palette.generateAsync(Bitmap bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {

Palette.Swatch lvs = palette.getLightVibrantSwatch();

Palette.Swatch lms = palette.getLightMutedSwatch();

}
});

()卡片控件CardView

<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="40dp"
app:cardBackgroundColor="#ff00ff"
app:cardCornerRadius="5dp"
app:cardElevation="20dp">

<TextView
android:id="@+id/item_name_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="文字" />

</android.support.v7.widget.CardView>

app:cardBackgroundColor 定义卡片的背景颜色

app:cardCornerRadius 定义卡片的圆角半径

app:cardElevation 定义卡片阴影的高度，数值越大，阴影越明显

()TextInputLayout让EditText 变的更风骚

可以修改EditText 风格，使其变得更加风骚。即：总会显示一个提示或者一个错误信息，只需要TextInputLayout包裹一个EditText即可。

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

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="手机号/会员名/邮箱" />
</android.support.design.widget.TextInputLayout>

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

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"/>
</android.support.design.widget.TextInputLayout>

//显示错误信息
TextInputLayout控件.setErrorEnabled(true);
EditText控件.setError("输入密码错误");

()Floating Action Button (FAB)

FAB是一个有一些阴影的圆形按钮。

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_plus"
app:backgroundTint="#ff0000"
app:borderWidth="10dp"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp" />

android:src 定义FAB的图片资源文件 ID(推荐40dp清晰的png文件)

app:fabSize 定义FAB的大小，normal是在大多数情况下标准尺寸为 56dp 的按钮，mini 是大小为40dp的按钮。

app:backgroundTint 定义FAB的背景颜色，默认粉红色。

app:elevation 定义FAB空闲状态下的阴影深度，推荐为6dp。

app:pressedTranslationZ 定义FAB按下状态的阴影深度，推荐为12dp。

app:borderWidth 定义FAB边框宽度。

()Snackbar

Snackbar是在屏幕的底部一个微小的黑色条显示一条简短的消息，与Toast不同，Snackbar是作为UI的一部分而不是覆盖在屏幕上。

Snackbar.make(View view, CharSequence text, int duration).show();

Snackbar.make(View view, CharSequence text, int duration).setAction(CharSequence text, new View.OnClickListener() {
@Override
public void onClick(View v) {

}
}).show();

参数view是指在view的底部位置显示一个Snackbar。

setAction()是用在设置动作显示在 Snackbar 的右侧并有对应的监听。

()将FAB和Snackbar用CoordinatorLayout关联

CoordinatorLayout是组织它的子views之间协作的一个Layout，它可以给子View切换提供动画效果。

之前点击FAB(FAB位置为底部右边)时Snackbar会遮住FAB，长期的用户体验是很差的。可以将CoordinatorLayout包裹一个FAB，这样FAB随着Snackbar 的出现和消失而移动，并且Snackbar 现在能够滑动消失了。

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

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:src="@drawable/ic_plus"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>

()Toolbar

Toolbar 是一个替代传统的 Action Bar 具有更灵活的行为。必须要将Activity继承AppCompatActivity不然没有setSupportActionBar(),并且要将theme设置为隐藏 Action Bar (@style/Theme.AppCompat.NoActionBar)

<android.support.v7.widget.Toolbar
android:id="@+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp" />

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);

//设置Toolbar的logo  mToolbar.setLogo(getResources().getDrawable(R.mipmap.ic_launcher));

//设置Toolbar的标题
mToolbar.setTitle("Toolbar标题");

setSupportActionBar(mToolbar);

()AppBarLayout

AppBarLayout可以随着内容滚动出屏幕的，以获得额外的空间来显示内容，这是很棒的用户体验。

布局

<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:orientation="vertical">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/app_bar_tbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@android:color/transparent"
android:minHeight="50dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ff0000" />

<android.support.design.widget.TabLayout
android:id="@+id/app_bar_tl"
android:layout_width="match_parent"
android:layout_height="50dp" />

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

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Yo Yo 1" />
.............
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

注:

[]根节点必须是CoordinatorLayout，因为需要将AppBarLayout和NestedScrollView协同工作

[]采用NestedScrollView不用ScrollView，因为CoordinatorLayout不能协作ScrollView只能协作NestedScrollView

[]需要将NestedScrollView设置layout_behavior，因为NestedScrollView是 CoordinatorLayout的最直接的子 view，并且在AppBarLayout的下面

[]ListView 类也是和 CoordinatorLayout 不能协同工作的。只有 RecyclerView 可以

[]AppBarLayout滚动的标志

需要AppBarLayout中的控件滚动需要设置属性app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”，如果不需要滚动就不要设置。（这里将Toolbar设置为滚动）

scroll：想要这个 view 随着内容滚动就需要设置

enterAlwaysCollapsed ：定义了 View (Toolbar)是如何回到屏幕的。当 view(Toolbar)声明了最小高度(minHeight) ,那么 View (Toolbar)只有在回到这个最小的高度的时候才会展开，只有当 view (Toolbar)已经到达顶部之后它才会重新展开全部高度。

上滑，先触发Toolbar的滚动，再触发NestedScrollView滚动。下滑，先触发NestedScrollView的滚动，再触发Toolbar滚动。

enterAlways ：确保了任何向下滚动的操作都会让这个 view (Toolbar)变得可见，达到”快速返回”的效果。

先触发Toolbar的滚动，再触发NestedScrollView滚动。

exitUntilCollapsed ：View(Toolbar)将关闭滚动直到它被折叠起来(有 minHeight) 并且一直保持这样。

上滑，先触发Toolbar的滚动，再触发NestedScrollView滚动。如果Toolbar设置最小高度，那么会保持最小高度，Toolbar不会消失。下滑，先触发NestedScrollView的滚动，再触发Toolbar滚动。

()使工具栏可折叠

可以用 CollapsingToolbarLayout 把 Toolbar 折叠起来用 ，主要的步骤

[]CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中

[]从 Toolbar 中删除 layout_scrollFlags

[]为 CollapsingToolbarLayout 声明 layout_scrollFlags，并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed

<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:orientation="vertical">

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

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_unfold_ctl"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="100dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<android.support.v7.widget.Toolbar
android:id="@+id/app_bar_tbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/transparent"
android:minHeight="50dp"
app:layout_collapseMode="pin" />

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

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

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Yo Yo 1" />
.............
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

注：

[]app:layout_collapseMode

Pin -当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上

Parallax - 在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果.

[]用 CollapsingToolbarLayout 包裹住 Toolbar 后，Toolbar 的文本被隐藏，可以CollapsingToolbarLayout.setTitle(CharSequence title)设置Toolbar 的文本

[]设置展开状态标题文字的位置，app:expandedTitleMargin, app:expandedTitleMarginBottom, app:expandedTitleMarginEnd 以及 app:expandedTitleMarginStart

()AppBarLayout 添加背景图片

可以利用一张图片作为 AppBarLayout 的背景，幸运的是 CollapsingToolbarLayout 是继承自 FrameLayout 所以可以一个 ImageView 作为 Toolbar 的背景图层。

<android.support.design.widget.CollapsingToolbarLayout
....>

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/header"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
....... />

[]去掉蓝色的导航条，其实就是Toolbar 的背景颜色。可以设置arandroid:background=”?attr/colorPrimary”(android:background=”@android:color/transparent”)去掉Toolbar 背景颜色

[]设置ImageView属性app:layout_collapseMode=”parallax” 让ImageView的视差模式变得更优雅一些

[]设置CollapsingToolbarLayout属性app:contentScrim=”?attr/colorPrimary”，让AppBarLayout 收缩的时候由图片自动的变化到普通的颜色