iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
0
Mobile Development

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

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

Material Design

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

那麼上面有提到 Material Design 支援 AndroidiOSFlutterWeb ,那麼我們這次採用的是 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 RepositoryMVN 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,我們習慣的視覺動向是由上到下、由左到右,但是有一些國家的視覺動向是由上到下、由右到左,因此方向是與我們反過來的,那這個選項就是選擇有沒有需要將圖片左右翻轉,去符合這些國家的習慣,那這邊我就先不打勾

Step 3. 檢視 SVG Icon

上個步驟點下 NextFinish 後, SVG Icon 就加入 Project 中了,加入的 SVG 會是一個 xml 檔,裏面會紀錄一些 vector 的數據,可以從這邊去調整圖片的大小和顏色等等

Step 4. 把 SVG Icon 加到 Bottom Navigation Menu 中

接下來就可以在 bottom_navigation_menu.xml 中使用 SVG Icon

Step 5. 回到 activity_main.xml 可以看到 Icon

回到 activity_main.xml 中,可以看到 BottomNavigationBar 出現 Icon 了,大功告成

Material Color

像我這種設計白痴在顏色挑選上常常會跑出一些很醜的顏色,那有沒有哪些工具是可以解救我這種設計白痴呢?

Material Design 做出了一款工具專門幫助我這種智障 - Material Color Tool

Step 1. Color Tool

打開網頁後可以看到一個類似於小學生的填色本,因此我們只要設定好

  • 主體色( Primary )
  • 輔助色( Secondary )
  • 主體色上的字體顏色( Text on Primary)
  • 輔助色上的字體顏色( Text on Secondary )

就可以調出一個不會太糟的顏色...吧...哈哈...嗚嗚嗚

Step 2. 覆蓋 colors.xml

完成之後點選右上角的 EXPORT -> Android,就會輸出一個 colors.xml ,這就是我們剛剛設定完的顏色,所以我們只需要把 App 中的 colors.xml 用這個去覆蓋即可

Step 3. 調整 styles.xml

覆蓋完 colors.xml 後,打開 styles.xml 會發現原本的 themecolor 都找不到,原因是因為 colors 原本的名字被改掉了,所以找不到路徑,因此我們必須對他微調

至於怎麼調可以參考

結語

今天介紹了 Material DesignBottom Navigation MenuMaterial Color Tool 等等工具,明天會開始做 Bottom Navigation MenuFragment 切換

Reference


上一篇
Day 12 | 建立 Kotlin Projcet 與定義海賊爭霸規格
下一篇
Day 14 | 用 Kotlin 實作 BottomNavigationView 與 FragNav
系列文
30天,從0開始用Kotlin寫APP30

尚未有邦友留言

立即登入留言