Material Design實感設計，浮動按鈕與它的事件處理

Material Design實感設計

「Material Design」官方稱為「實感設計」是Google所公佈一套適用於Android、iOS、網頁、平板或電視等平台的設計規則，它是一個與以前「仿物化」的設計完全不同的概念，iPhone幾年前的圖示、按鈕等介面以仿真為主要目的，像是按鈕有光影、3D、弧度等效果，盡其所能的設計出擬真的圖示與介面。但近年來，設計的概念不再重視如何說服使用者的眼睛，而是以「扁平化」的設計為主流，由iOS後來整個介面的改變可得知。

Google推出的跨裝置適用的設計指南就是以實感設計為基礎，並在Android 5.0(Lollipop)中落實，以扁平化的介面設計為基礎，加上材質分層級的概念的一個整體使用經驗的設計。

自從Android 5.0開始，許多新元件就是因應實感設計而推出的，例如「FloatingActionButton」浮動按鈕、「SnackBar」訊息提示等元件，使用這類由Android 5.0開始才有的實感設計類別，需要導入「com.android.support.design」函式庫，在build.gradle(Module:app)中的dependencies區塊加入，如下：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
}

具浮動按鈕的Activity

當我們使用Android Studio建立活動時，可選擇許多種類的Activity，例如「Basic Activity基本活動」、「Empty Activity空白活動」、「Fullscreen Activity全螢幕活動」或「Google Maps Activity地圖活動」等，如下圖：

使用者可依需求選擇要產生的活動類型，以說明幾個重點項目：

| Basic Activity |

Basic是使用實感設計（Material Design）的基本活動，如預覽圖所示，它使用了ToolBar工具列與FloatingActionButton浮動按鈕，提供使用者最新的互動介面感受，也自動導入「com.android.support.design」函式庫，可使用實感設計帶來的新元件。

| Empty Activity |

產生一個空白的活動，它也是最陽春、不加料的活動，只產生一個繼承Activity的類別、專用的版面配置檔與在AndroidManifest.xml加入活動元素，適合由零開始實作一個完整的活動類別。

產生活動

筆者將在Bmi專案內新增一個預設就具有浮動按鈕的活動類別，名稱為TestActivity，請點擊專案區中的app，再使用功能表的「File/New/Activity/Basic Activity」，並修改類別名稱為「TestActivty」，如下圖：

由上圖的左方示意圖可觀察有一個圓形按鈕在活動的右下方，活動的右上方還有選項的三個點圖示。

自動產生的版面配置檔有兩個，一個是「activity_test.xml」，另一個是「content_test.xml」，如下圖：

完成後預設開啟的檔案是「res/layout/content_test.xml」，它是整個活動的主畫面區塊，內有浮動按鈕，但它不包括上方的ToolBar元件，如下圖：

請再開啟「activity_test.xml」，會在編輯區域中開啟檔案，顯示如下圖：

畫面的最上方是一條橫向長條狀的「Toolbar」，在其下方整塊是主要畫面區塊，另外，右下方有一個小圓形的圖示，稱為「浮動式動作鈕(Floating Action Button」，使用者點擊它進行其他的動作，如寄送Email、分享、新增筆記等。

讀者應該也發現content_test.xml與activity_test.xml所顯示的預覽圖是一樣的，代表了雖然畫面由activity_test.xml設計配置，但因為參照(匯入)了content_test.xml的內容，因此設定畫面中的主要區域是由content_test.xml所負責。

Layout的配置

辨認XML的架構對於進階的開發人員是必要的能力，以便日後能夠自行微調畫面配置中的元件資訊，在此，筆者該檔案中的類別名稱與樹狀結構整理如下圖：

整個畫面主要由「CoordinatorLayout」元件所構成，內有「AppBarLayout」、「include」與「FloatingActionButton」三項元素，說明如下：

❶ AppBarLayout元素

畫面中的最上方橫向長條狀區域，在這個元素中放置了一個Toolbar工具列，是Android應用程式畫面中常用的元件，可加入功能項目，如下圖：

❷ include元素

include元件可加入另一個畫面配置XML檔，在本例其屬性layout的值為「@layout/content_test」，代表這個元素的位置會導入另一個在layout/content_test.xml檔的內容。在專案中連擊「res/layout/content_test.xml」開啟檔案並切換至原始碼，下圖是content_test.xml的原始碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.tom.bmi.TestActivity"
    tools:showIn="@layout/activity_test">
</RelativeLayout>

其內容主要由一個「RelativeLayout」容器元件所構成。

❸ FloatingActionButton元素

浮動式動作鈕是顯示在所有元件的上層的一個快速功能按鈕，用途是類似快捷鈕，方便使用者能快速直覺地使用常用功能，如下圖：

浮動按鈕在版面配置中使用的元素為「com.support.design.widget.FloatingActionButton」類別，預設ID值為「fab」如下圖：

<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="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

類別程式碼說明

請開啟「TestActivity」類別，其onCreate方法內容如下：

上圖在onCreate方法中的第14行呼叫父類別的onCreate方法，主要是進行資料設定，接下來的程式碼設計了三項工作，說明如下：

❶ 設定類別使用的畫面配置檔

setContentView(R.layout.activity_test);

setContentView方法是android.app.Activity類別提供的方法，用來設定Activity本身的畫面配置資源，使用了「res/layout/activity_test」版面資源。

❷ 啟用Toolbar

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

第一行呼叫findViewById方法，findViewById方法亦是由Activity類別設計用來取得畫面配置中的元件，因為findViewById方法回傳的是android.view.View類別，因此需經過轉型而得到Toolbar物件。最後再呼叫setSupportActionBar方法，指定本類別上方橫向長條的元件。

❸ 設定浮動式動作鈕

同樣先呼叫findViewById取得layout中的FloatintActionButton元件－fab，再呼叫其setOnClickListener方法設定事件傾聽者，未來當使用者按下手機畫面中的浮動式動作鈕後，會自動執行傾聽者內實作的onClick方法，上圖使用了Java語言的「匿名類別」與Java 8推出的Lambda新語法。請觀察圖中的淺綠色部份，Android Studio雖然以Lambda方式顯示，但實際上程式碼仍然以舊式的匿名類別方式儲存，請讀者在淺綠色部份按一下滑鼠左鍵，立即會以原始方式顯示，如下圖：

點擊後會展示原始語法，如下圖方塊標示：

上圖onClick方法內的程式碼使用了Snackbar類別的make方法，在晝面下方顯示一條暫時訊息列，後續再介紹Snackbar類別的使用方式。

執行結果

請在Bmi原本的主活動類別MainActivity內的onCreate方法中加入啟動TestActivity的程式碼，以便測試活動，測試完畢後再將程式碼註解掉，如下：

執行結果如下圖，請試著點擊浮動按鈕：

點擊浮動按鈕後在下方所出現的長條提示即是SnackBar元件的效果，它也是Android 5.0實感設計新推出的元件。

Material Design實感設計，浮動按鈕與它的事件處理