Day 13 | 導入 Material Design 到 Android App 以及使用 Material Color Tools - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 13

Mobile Development

30天，從0開始用Kotlin寫APP系列第 13 篇

Day 13 | 導入 Material Design 到 Android App 以及使用 Material Color Tools

12th鐵人賽 kotlin android mobile development

Robin Chien

2020-09-13 18:31:53

9935 瀏覽

Material Design

Material Design 是 Google 開發出來的 Design system ，目的是要幫助團隊可以建立出
適用於 Android 、 iOS 、 Flutter 和 Web 的跨平台設計規範
這次鐵人賽中也有系列文是專門在介紹 Material Design ，如果對跨平台的 UI / UX 有興趣，一定要去看看這個系列文，我覺得他寫的很讚

UI / UX 設計白皮書 - Material Design 導讀

那麼上面有提到 Material Design 支援 Android 、 iOS 、 Flutter 和 Web ，那麼我們這次採用的是 Android 的版本

Materail Design - Android 版本

導入 Material Design 到專案

要使用 Material Design 就要先導入他需要的 Library 到專案中

Step 1. 將 `google()` 加入到 `build.gradle`

開啟 build.gradle ，檢查 repositories 區塊中是否已經加入 google() ，如果沒有的話請將他加入區塊中

Step 2. 將 `material library` 加入到 `app/build.gradle`

開啟 app/build.gradle ，將 material library 加入到 app/build.gradle 中，在加入時需要給他版本號，版本號可以在 Google's Maven Repository 和 MVN Repository 中找到，那這邊我選擇使用 1.3.0-alpha02

Step 3. AppTheme 繼承 Material Components theme

打開 res/values/styles ，可以看到原本 AppTheme 是繼承 Theme.AppCompat.Light.DarkActionBar

那麼現在要把 Theme.AppCompat.Light.DarkActionBar 修改成 Theme.MaterialComponents.Light.NoActionBar

而 Light、NoActionBar...等等代表的意思可以到 Getting started with Material Components for Android 中察看，這邊就不多花時間介紹了，那到這一步， Materail Design 就等同導入 App 中了

Bottom Navigation

在畫面的切換上，我採用 Material Design 中的 Bottom Navigation

根據官方建議， Bottom Navigation 有幾種適合和不適合的場景

適合

:::success

需要從 App 的任何位置訪問的 Top-level destination
3 ~ 5 個 Destination
適合用在手機或平版上
:::

不適合

:::danger
負責單一任務
不適合把一堆 Settings 放在這邊
:::

加入 Bottom Navigation Bar

Step 1. 建立 Menu Directory

在 res 上點選右鍵，選擇 New -> Android Resource Direction
這時會跳出 New Resource Directory 視窗，點開 Resource type 下拉選單，可以看到裡面有多個選項，那每個選項都是有意義的，這邊選擇 menu，然後就可以點選 OK 按鈕了

Step 2. 建立 `bottom_navigation_menu.xml`

在 menu 上點選右鍵，選擇 New -> Menu Resource File
這時會跳出 New Resource Directory 視窗， File name 輸入 bottom_navigation_menu

Step 3. 加入 `<item>` 標籤到 `bottom_navigation_menu.xml`

因為 App 中會有 3 個畫面

抽取海盜介面
顯示所有海盜介面
使用者登入介面

因此在 bottom_navigation_menu 中會有 3 個 <item> Tag ，每個 <item> 中會有

id
enabled : item 是否要啟用，換句話說就是要不要顯示在 UI 上
title : item 要顯示的文字

Step 4. 將 Bottom Navigation Bar 加入 `activity_main.xml`

那要把 Material 的 Bottom Navigation Bar 加入 Activity 中非常容易，只需要把這段 Code 加入 xml 佈局中

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

另外，這邊需要注意的是 app:menu 中會引用剛剛建起來的 bottom_navigation_menu，要引用才能顯示在 UI 上

Vector Asset

眾所皆知 Android 是開源的 OS ，因此各家廠牌可以用同個 OS 下去改，然後出成他們家的手機，這也就造成 Android 開發者需要花很多時間在處理不同螢幕大小的跑版問題，那過去 Icon 採用 PNG ，如果 Icon 被拉大的話就會失真，因此必須同一個 Icon 需要出 5 個 Size ，那 Android 會去偵測目前螢幕大小適合用哪一種 Size 的 Icon
但螢幕百百種，應此還是多少會有跑版問題發生，因此後來 Android 率先支援 SVG ，SVG ㄅㄣ的好處就是不論拉大或縮小都不會失真，因此可以解決很大一部份的 UI 調整時間，因此下面會介紹怎麼加入 SVG

加入 SVG Drawable

Step 1. 下載 SVG Icon

先到能下載 Icon 的網站，我個人習慣使用 FlatIcon，在下載 Icon 時選擇 SVG

Step 2. 將 SVG 加入 Project

對 res/drawable 資料夾點擊右鍵，選擇 New -> Vector Asset
此時會跳出 Asset Studio ，點選 Asset Type 中的 Local File Radio Button
點選 path，並將剛剛下載的圖案加進來
Size 的部份可以依據需求去做調整
另外最下面有一個 Enable auto mirroring for RTL layout Chechbox，我們習慣的視覺動向是由上到下、由左到右，但是有一些國家的視覺動向是由上到下、由右到左，因此方向是與我們反過來的，那這個選項就是選擇有沒有需要將圖片左右翻轉，去符合這些國家的習慣，那這邊我就先不打勾