Material Design中 FAB (Floating Action Button) 的使用

一 什么是 FAB？

FAB 全称：Floating Action Button，是浮动操作按钮，一般作为进阶操作的开关，在用户界面中通常是一个漂浮的小圆圈，达到浮动按钮的效果。它有自身独特的动态效果，比如变形、弹出、位移等等，代表着在当前页面上用户的特定的操作。

二 FloatingActionButton的简单分析

FloatingActionButton继承了ImageButton，那么ImageButton中可以设置的属性也可以很方便的适用在FloatingActionButton上，那么怎么使用这个类呢？

简单布局：

<android.support.design.widget.FloatingActionButton
android:id="@+id/fabId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="@mipmap/heart"
app:backgroundTint="#ff87ffeb"
app:rippleColor="#00aa00"
android:elevation="6dp"
app:pressedTranslationZ="12dp"
/>

针对上面的四个属性简单说明

（1） 默认的背景颜色取的是theme中的colorAccent，所以你可以在style中定义colorAccent的颜色（colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色）

也可以自定义背景颜色backgroundTint

（2） r默认的点击后的颜色取的是theme中的colorControlHighlight。

也可以自定义点击后的颜色变化 rippleColor

（3）设置正常显示的阴影大小 elevation 设置该组件“浮”起来的高度，设置该属性可以让该组件呈现3D效果。

（4）点击时显示的阴影大小 translationZ 设置该组件在Z方向（垂直屏幕方向）上的位移。

效果如下：



注意：测试机5.0以上出现没有阴影问题

解决办法 添加属性app:borderWidth="0dp"

对于5.x设置一个合理的margin

三 FloatingActionButton的简单应用

当列表拉到超过25个item的时候，我们让fab显示，并且提供点击事件，使listview定位到第一个item；

布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="android.com.fab.MainActivity">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="@+id/lvid"
android:layout_width="match_parent"
android:layout_height="wrap_content">

</ListView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fabId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="8dp"
app:fabSize="normal"
android:src="@mipmap/heart"
app:backgroundTint="#ff87ffeb"
app:rippleColor="#00aa00"
android:elevation="6dp"
app:pressedTranslationZ="12dp"
/>
</FrameLayout>

</RelativeLayout>

布局很简单，主要是用FrameLayout将listview和fab显示在同个界面上，fab默认是gone的形式；
MainActivity:

package android.com.fab;

import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

/**
* @author liangguliang
* @deprecated  FloatACtionButton的简单使用
*/

public class MainActivity extends AppCompatActivity {
private FloatingActionButton mFloatingActionButton;
private ListView mListView;
private List<String>arrDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFloatingActionButton= (FloatingActionButton) findViewById(R.id.fabId);
mListView= (ListView) findViewById(R.id.lvid);
initData();
initEvent();

}

private void initData(){
arrDatas=new ArrayList<>();
for(int i=0;i<50;i++){
arrDatas.add("凉菇凉"+i);
}
mListView.setAdapter(new ArrayAdapter(this,android.R.layout.simple_expandable_list_item_1,arrDatas));
}
private void initEvent(){
mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView absListView, int i) {

}

@Override
public void onScroll(AbsListView absListView, int i, int i1, int i2) {
/**
* 当listview定位到25的时候FloatActivonButton显示
*/
if(i+i1>=25){
mFloatingActionButton.setVisibility(View.VISIBLE);
}else{
mFloatingActionButton.setVisibility(View.GONE);
}
}
});
/**
* 当点击FloatActionBtton时候让listview定位到第一个位置
*/
mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//回到第一个
mListView.setSelection(0);
mFloatingActionButton.setVisibility(View.GONE);
}
});
}

}

效果：

总体来说FloatingActionButton是最简单基础的一个控件