版權聲明：本文為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文件路徑
2、 Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復制里面的內容，不要整個覆蓋
二、導入步驟
（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）將懸浮按鈕中間的圖標復制到項目中
三、使用方法
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(懸浮按鈕)使用學習<一>