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

作者 | 2017-06-05

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區塊加入,如下:

具浮動按鈕的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的原始碼:

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

❸ FloatingActionButton元素

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

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

 

類別程式碼說明

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

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

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

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

❷ 啟用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實感設計新推出的元件。

相關文章:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *