Android material3 Design Card使用

Kelly Wu 2023/08/07 19:52:38

0 1691

前言

身為App 開發者除了追求程式穩定和可維護性外，美感也是相當重要的，以使用者角度來看，App如果一點開全白的介面再加上一堆方框的按鈕，下一個動作應該是立刻按下Home鍵。

但以工程師角度來說，再去報一門有關美學的課程也實在不符合成本，剛好查到官方有推出Material設計，他能符合了大部分UI/UX designer的需求，同時跨平台也都支援此設計，由於以前沒有使用過Material Compose相關的經驗，這次使用時也是查閱了許多文件來了解他的版本參數，對比以往layout XML 真的美觀與方便許多。

Jetpack Compose 是 Android 推薦的新型工具包，可用來建構原生 UI，原先會以XML來去建構畫面，而Compose與原本的建構畫面方式大大不同，目前Compose也推出了Material3的版本可使用，此篇會簡單介紹Compose Material3 Card的使用。

環境(以Window電腦開發)

IDE: Android Studio

(此篇採用Go語言架設Api Server無local data，請參閱另一篇:https://www.tpisoftware.com/tpu/articleDetails/2959
)

使用語言:Kotlin

內容

於android 區塊加入必要之設定

於app build.gradle 加入所需dependencies(Retrofit, Compose, liveData runtime), 請依IDE版本選擇適當dependencies

因版本問題可能發生的錯誤
對應版本	圖片來源於官方:https://developer.android.com/jetpack/androidx/releases/compose-kotlin?hl=zh-cn 詳細版本對照也可參考上方連結
解決方法	在application build.gradle 提高 version

最終畫面

先建立ComponentActivity，這邊我使用預設(File/New/Compose/Empty Activity)

昕力大學已有相關教學，可參閱:https://www.tpisoftware.com/tpu/articleDetails/2745

接下來以下內容章節說明
-建立cardItem

-建立Retrofitmanager

-建立APIService
-建立MainRepository

-建立ViewModel
-結合data, 把cardItem包在LazyColumn

-與local server結合

建立cardItem

Material3 在 Card的設計提供了方便和簡易的參數可調整

圖片來源為官方https://m3.material.io/components/cards/specs

先建立CardItem部分，外圍牌卡我僅調整了圓角，大小和padding

官方預設的邊框為null

加入邊框效果如下圖，這邊我設定邊框4dp,顏色為0xFFF5C5D4

與以往畫UI方式不同，Custom card需要設置Attribute之類的，Material Card只需要填入參數就能達到相同效果，方便程度大大的提升
本案加入圖片和三個Text

完整程式碼

API存取

建立Retrofitmanager

建立APIService(response規格請參閱下圖)

Name

http://localhost:3001/homeInfo

Method

GET

Body

name	type		nullable
code	string		false
content	string		false
result	object		true
	favorSongList	array	false
	singer	string
	song	string
	url	string
	intro	string

如上方Api Spec，先parsing 外圍Object，最後須處理Json Array部分

建立MainRepository

取用Api Response 開始實作

建立ViewModel

結合data, 把cardItem包在LazyColumn

這邊我有小小總結與以往Recycler view+adapter的區別

	以往	使用Compose
View	Custom Item layout RecyclerView layout	No
Control	Adapter 需宣告layout manager跟 import adapter使用	只需要將item包在lazy column就能做出相同效果

與local server結合

(此篇採用Go語言架設Api Server無local data，請參閱另一篇:https://www.tpisoftware.com/tpu/articleDetails/2959
)

請注意，本篇採用local執行API server，所以App需要反轉tcp接口，App端才能順利與Api Server溝通。

adb指令參閱:https://gist.github.com/Pulimet/5013acf2cd5b28e55036c82c91bd56d8

window需要在platform-tools下指令，Mac直接反轉即可