android material design学习(二)
阅读本文前，推荐先阅读
FloatingActionButton
简介
浮动按钮 FloatingActionButton 是材料设计非常重要的一个控件，继承于 ImageView 。它可以显著的提升对行为的强调。目前市面上已经有很多app,web都实现了这个设计。
先看看浮动按钮是什么样的。
实现
确保已经加入了依赖库:
compile 'com.android.support:design:22.2.1'
FloatingActionButton一般需要结合android.support.design.widget.CoordinatorLayout来使用，主要是为了实现一些动效，比如动态的隐藏显示，新布局显示的时候自动位移等等。
直接看布局代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/drawer_layout"
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:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/snackbarPosition"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="center"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@android:color/white"
android:textSize="20sp"
android:text="标题栏"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<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="16dp"
android:elevation="4dp"
app:fabSize="normal"
app:backgroundTint="#673AB7"
android:src="@drawable/ic_add_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginRight="80dp"
android:layout_marginBottom="16dp"
android:elevation="10dp"
android:background="@drawable/ic_android_purple_700_18dp"
app:fabSize="normal"
app:backgroundTint="#673AB7"
app:borderWidth="0dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginBottom="20dp"
android:layout_marginRight="150dp"
android:elevation="4dp"
app:fabSize="mini"
app:backgroundTint="#673AB7"
android:src="@drawable/ic_add_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
我这里放了三个FloatingActionButton，显示效果就如上图所示。当然你也可以用一个父布局把三个FloatingActionButton包裹起来，实现你需要的布局。
我们来分析下FloatingActionButton的一些属性。
FloatingActionButton不设置任何属性的时候，默认是一个圆形按钮，如图
android:background 请注意，这个不是用来修改背景颜色的,是用来设置背景图片的，但是你会发现设置后，会有一个圈环包裹着，很难看。怎么办。设置圆环的宽度。
app:borderWidth="0dp" 设置圆环的宽度， 当设置成0的时候，圆环就没有了。设置成其他的就会成为一个空心环。大家可以设置看效果。
android:src : 设置圆形中部的图片资源，比如上图的的那个白色**"+"号
android:layout_gravity="end|bottom" 设置位置在右下角
android:elevation="4dp" 这个是设置阴影层级的，这个值的作用就是让你有一种FlocatingActionButton 浮在上层的感觉。
app:fabSize="normal" 设置按钮的尺寸，可以设置为normal或者mini**。
app:backgroundTint="#673AB7" 设置按钮的背景颜色，默认是红色的，我设置成了蓝色。
设置完成后运行代码，按钮就已经出现了。
点击事件
FlocatingActionButton的点击事件和其他控件一样，setOnClickListener就可以了。
看代码片段:
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar
.make(drawerlayout, "这是一个学习用的snackbar", Snackbar.LENGTH_LONG)
.setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}).show();
}
});
我们点击按钮，弹出一个Snackbar。首先，我将Snackbar的 view 传入根布局 LinearLayout的引用。
运行效果：
发现我们的FlocatingActionButton被遮住了，我们修改 Snackbar 的 view 参数为 android.support.design.widget.CoordinatorLayout 或者它的子布局控件。
修改代码：
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar
.make(fab, "这是一个学习用的snackbar", Snackbar.LENGTH_LONG)
.setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}).show();
}
});
再次运行效果：
这样就会自动位移了。
与RecyclerView联动
我们想要一个效果：列表下拉滚动的时候FlocatingActionButton隐藏，上拉滚动的时候显示。
这种效果我们需要使用 android.support.v7.widget.RecyclerView 而不是 ListView
RecyclerView
是谷歌在 v7 库推出的用来取代 ListView 的兼容性组件。有更好的灵活性和更高的性能，以及能实现更加丰富动画效果的 API。曾经的ListView 连上下滚动方向监听的 API 都没有，但是现在RecyclerView 可以轻松实现。我们应该在我们的项目中尽量使用RecyclerView来替换ListView。