Android 學習之《第一行代碼》第二版 筆記（二十二）Material Design 實戰 —— 懸浮按鈕和可交互提示

實現基礎：
Android 學習之《第一行代碼》第二版 筆記（二十一）Material Design 實戰 —— Toolbar 和 滑動菜單

一、懸浮按鈕（FloatingActionButton）

FloatingActionButton 是Design Support 庫中提供的一個控件，可幫助我們比較輕鬆地實現懸浮按鈕的效果，默認使用colorAccent 來作爲按鈕的顏色。

1. 效果圖

2. 代碼

A.）activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
        <!--app:elevation="8dp"設置懸浮按鈕的懸浮高度爲8dp，高度值越大，投影範圍越大，投影效果越淡-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">

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

</android.support.v4.widget.DrawerLayout>

B.）MainActivity.java 處理 FloatingActionButton 的點擊事件

 //獲取FloatingActionButton實例
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
	@Override
    public void onClick(View view) {
    	Toast.makeText(MainActivity.this,"數據恢復啦",Toast.LENGTH_SHORT).show();
    }
});

C. 添加的圖片 drawable-xhdpi
ic_done.png （此處有圖片）

二、可交互提示（Snackbar ）

Snackbar 並不是Toast的替代品，二者應用場景不同。

1. 效果圖

A.）使用FrameLayout

B.）使用 CoordinatorLayout （加強版FrameLayout，可以監聽其所有子控件的各種事件，然後自動幫助我們做出最爲合理的響應）

2. 代碼

A.）activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
        <!--app:elevation="8dp"設置懸浮按鈕的懸浮高度爲8dp，高度值越大，投影範圍越大，投影效果越淡-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">

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

</android.support.v4.widget.DrawerLayout>

B.）MainActivity.java

//獲取FloatingActionButton實例
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
	@Override
    public void onClick(View view) {
    	//調用Snackbar的make()方法來創建一個Snackbar對象
    	//make()方法第一個參數爲當前界面佈局的任意一個View；
    	//第二個參數爲Snackbar中顯示的內容；
   		//第三個參數爲Snackbar顯示的時長。
    	Snackbar.make(view,"刪除數據",Snackbar.LENGTH_SHORT)//調用setAction()方法設置動作，使之可以和用戶進行交互
    		.setAction("復原",new View.OnClickListener(){
        	@Override
        	public void onClick(View view) {
        		Toast.makeText(MainActivity.this,"數據恢復啦",Toast.LENGTH_SHORT).show();
        	}
    	}).show();
    }
});

---

整理學習自郭霖大佬的《第一行代碼》
目前小白一名，持續學習Android中，如有錯誤請批評指正！