FloatingActionButtonDemo【懸浮按鈕的使用，順帶snackBar的使用】

版權聲明：本文爲HaiyuKing原創文章，轉載請註明出處！

前言

FloatingActionButton簡稱FAB。

一. 對於App或某個頁面中是否要使用FloatingActionButton必要性：

FAB表明一個App或一個頁面中最主要的操做，若是一個App的每一個頁面都有FAB,則一般表示該App最主要的功能是經過該FAB操做的。

爲了突出FAB的重要性，一個頁面最好只有一個FAB。

二. FloatingActionButton大小

一般有兩種尺寸：

1. 56 * 56dp ：默認的大小，最經常使用的尺寸。
2. 40 * 40 dp ：Mini版。
固然也能夠改它的大小。

FAB中間的圖標，google推薦的大小是：24 * 24dp

三. 哪些操做推薦使用FloatingActionButton

如： 添加，收藏，編輯，分享，導航等，而如：刪除，警告，錯誤，剪切等操做，則不推薦使用FloatingActionButton。

--摘自《FloatingActionButton(懸浮按鈕)使用學習<一>》

效果圖

代碼分析

FloatingActionButton和普通的Button沒有什麼兩樣，惟一區別就是FloatActionButton屬於Design Support庫中的一個控件，若是搭配CoordinatorLayout的話，就能夠被CoordinatorLayout監聽。

佈局文件中，通常FloatActionButton和FrameLayout搭配便可，可是考慮到Design Support庫的優點，建議將FrameLayout替換成CoordinatorLayout。

CoordinatorLayout能夠說是一個增強版的FrameLayout，這個佈局也是由Design Support庫提供的。它在普通狀況下跟FrameLayout基本一致。特殊在於CoordinatorLayout能夠監聽其全部子控件的各類事件，而後自動幫助咱們作出最爲合理的響應。好比Demo中剛纔彈出的Snackbar提示將懸浮按鈕遮擋住了，而若是咱們能讓CoordinatorLayout監聽到Snackbar的彈出事件，那麼CoordinatorLayout就會自動將內部的FloatingActionButton向上偏移，從而確保不會被Snackbar遮擋住。

--摘自《第一行代碼（第2版）》

使用步驟

1、項目組織結構圖

注意事項：

一、  導入類文件後須要change包名以及從新import R文件路徑

二、  Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），若是項目中存在，則複製裏面的內容，不要整個覆蓋

2、導入步驟

（1）在build.gradle中引入design支持庫【版本號跟appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.floatingactionbuttondemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //引入design庫 implementation 'com.android.support:design:27.1.1'
}

（2）修改styles.xml文件中的樣式爲NoActionBar【爲了使用ToolBar】

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

（3）在佈局文件中添加FloatingActionButton控件

這裏沒有用到app:layout_anchor="@id/xxxx" app:layout_anchorGravity="bottom|end"這兩個屬性。app:layout_anchor這個設置錨定在了某個id的佈局下方。

<?xml version="1.0" encoding="utf-8"?>
<!-- 通常狀況是使用FrameLayout，不過既然FloatingActionButton是design庫中的，那麼也將FrameLayout替換成design庫中的CoordinatorLayout -->
<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:background="#F4F4F4">

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

        <!-- 這裏只是放一個Toolbar，不作任何處理 -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_base"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            android:background="#ffffff"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:title="ToolBar"
            />

        <Button
            android:id="@+id/btn_open"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="打開Snackbar"
            android:layout_marginTop="15dp"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/floater_edit" app:backgroundTint="#50A3F5" android:layout_gravity="bottom|end" android:layout_margin="16dp"
        />

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

 （4）將懸浮按鈕中間的圖標複製到項目中

3、使用方法

package com.why.project.floatingactionbuttondemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton mFab; private Button mBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initEvents();
    }

    private void initViews() {
        mFab = findViewById(R.id.fab_btn);
        mBtn = findViewById(R.id.btn_open);
    }

    private void initEvents() {
        mFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"刪除成功",Snackbar.LENGTH_SHORT).setAction("撤銷", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"撤銷成功",Toast.LENGTH_SHORT).show(); } }).setActionTextColor(Color.parseColor("#ffffff")).show(); } }); 
        mBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"刪除成功",Snackbar.LENGTH_SHORT).setAction("撤銷", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"撤銷成功",Toast.LENGTH_SHORT).show(); } }).show();
            }
        });
    }
}

混淆配置

無

參考資料

《第一行代碼（第2版）》

FloatingActionButton(懸浮按鈕)使用學習<一>

項目demo下載地址

https://github.com/haiyuKing/FloatingActionButtonDemo