Day01 踏入Google的設計語言

14th鐵人賽 material design material you

Anna

2022-09-15 11:41:38

1589 瀏覽

分享至

這次Kotlin 實踐 Material Design 懶人包，文章主要關注在 Material Design components 的實作上，所以會有大量實作內容，請大家多多指教。

開始的第一天首先介紹

Material Design是什麼
舊有維護專案想開始使用Material Design Components (MDC)
Start New Material Design 3 (Material You)

壹. Material Design 是什麼

Material Design 是 Google 的設計語言，創建於 2014 年，是Google 制定的一套指南，旨在通過一致的設計實踐改善 Android 應用程序的整體外觀和感覺。
在2021年隨著Android 12和Pixel6 發佈時，推出「Material You」為新一代UI設計，也就Material Design 3，同時官方也發佈Components的相關文件，所以接下來的30天文章要來實作Material Design 3的Components實作。

Material You

一個全新的應用程序設計方法，可以根據每個用戶的主題顏色，進行動態個性化色系的服務。

設計師在主題上如何可視化動態產生的顏色

google有推出新工具 Material Theme Builder，使用上可以在 Figma 安裝或是直接網頁調用。

Material Theme Builder 也有提供導出 Android Views (XML)、Jetpack Compose (Kotlin) 和 Design System Package (DSP)的相關程式式碼，提供開發人與設計人員進行App主題的討論與溝通的工具。

貳. 舊有維護專案想開始使用Material Design Components (MDC)

在Google在2015年I/O大會上介紹過 Design Support Library，這個Library中提供數個設計好的元件供開發者使用，讓APP更美觀並符合Material Design的規範。

但每年隨著google不斷進步，至今 Material Design Components (MDC) 早已取代Design Support Library，如果現在舊有維護專案想開始使用MDC，那接下來就來分享如何開始。

如果還在使用舊版的 Design Support Library

在開始前先說明官方文件中提到 MDC 是使用 AndroidX Library 構建的，所以必須使用AndroidX 的Support Library ，但在使用AndroidX 的Support Library 前會先需升級專案中的compileSdk 28

假如你是既有專案現在升級compileSdk 28，可以先看升級Android 9(API 28)，官方所提供更新在做調整以免升級造成功能專案上的功能異常，最後就可以在根據官方Ｍigrate to AndroidX 了。

一切都準備就緒開始

專案中 build.gradle (Module: 專案名稱.app) dependencies implementation

dependencies {
		刪除 implementation ‘com.android.support:design:28.0.0’
		新增 implementation ‘com.google.android.material:material:version’ # version輸入版本號
}

更新專案Theme，res > values > Themes

刪除 <style name="Theme.App" parent="Theme.AppCompat.*">
新增 <style name="Theme.App" parent="Theme.MaterialComponents.*">

專案中 build.gradle (Project層) includes Google's Maven Repository google()

allprojects {
    repositories {
        **google()**
        **mavenCentral()**
    }
}

升級和設定都準備好後，就可以使用Material Desing Components ，接下來就介紹使用最新的Material Design 3 (Material You)

參. Start New Material Design 3 (Material You)

開始使用最新的Material You的動態主題服務或是設計 Material Design 3 的自定義設定，那就會需要準備以下的設定。

使用最新版本的 Android Material Components 和 AndroidX Jetpack，同時compileSdk升級 32、如果既有專案再升級 Android 12(API 32) 時可以根據官方的更新進行調整

為了能使用最新功能，會需要更新開發軟體IDE Android Studio Chipmunk, version 2021.2.1

一切都準備就緒開始

最新的 Material 和 AndroidX Jetpack 庫現在需要使用 Java 8 設定
檔案位置：build.gradle (Module層)

kotlinOptions {
        jvmTarget = '1.8'
    }

專案中 build.gradle (Module: 專案名稱.app) dependencies implementation 使用 material:1.7.0-alpha02'版本以上

(1).需要注意更新gradle-wrapper.properties 檔案中將 Gradle 版本設定為指定 version 7.3+ 。

distributionUrl = "https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip

(2). Android Gradle Plugin (AGP) version 7.2.0
檔案位置：build.gradle (Project層)

* 這是新版IDE Android studio New Project時預設寫法
plugins {
    id 'com.android.application' version '7.2.0-alpha07' apply false
    id 'com.android.library' version '7.2.0-alpha07' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
}
* 舊的預設寫法
dependencies {
        classpath 'com.android.tools.build:gradle:7.1.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
        classpath 'com.google.gms:google-services:7.1.2'
    }

(3). start includes Google's Maven Repository google()

* 原本檔案位置：build.gradle (Project層)
allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

* 新版IDE Android studio New Project時預設將專案指定Google的Maven放在
檔案位置：settings.gradle

	dependencyResolutionManagement {
	   ...
	    repositories {
	        google()
			mavenCentral()
					...
	    }
	   ...
	}

使用 AppCompatActivity 確保元件可以正常使用
如果無法使用AppCompatActivity，可以替代方案使用AppCompatDelegate讓AppCompat or Material versions of components to be inflated

dependencies {
		implementation 'androidx.appcompat:appcompat:1.5.0'
}

Material3 theme inheritance parent 設定
(1). 如果是起新專案玩玩Material 3，直接就可以更換主題parent="Theme.Material3.Light"

 <style name="Theme.MCDProject" parent="Theme.Material3.Light">
        
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item> 
       
       <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        
        <!-- Customize your theme here. -->
      
    </style>

(2). 如果在既有專案上置換會需要測試，因元件樣式呈現會不一樣，所以在不能完全置換的狀態
可以在既有的 Theme 的 parent = Theme.MaterialComponents 中去新增 Material 3 的相關設定進行測試在置換

<style name="Theme.MCDProject" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <!-- Material3 attributes (needed if parent="Theme.MaterialComponents"). -->
        <item name="textAppearanceDisplayLarge">@style/TextAppearance.Material3.DisplayLarge</item>
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.Material3.SmallComponent</item>
    </style>

參考資料
Getting started with Material Components for Android
Google在2015年I/O大會上介紹過Design Support Library
Android 應用程式模組的預設專案結構
 Google 的 Maven 存放區取得最新版的 Android 程式庫