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是最简单基础的一个控件