Android material3 Design Card使用

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

前言

 身為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直接反轉即可

成功的話應為200

                                        實作結果

為方便我僅設定五筆data

 

關於Material Design Card


官方建議作法

圖片來源於官方:https://wcc723.gitbooks.io/google_design_translate/content/components-cards.html


結語

由於跟以往不同需要花時間學習Material+Compose如何搭配才能呈現好的App方式,以往都是畫好畫面的layout直接程式碼控制,雖然Compose還是有點不熟悉,但這次專案使用的Compose讓我程式碼以及排版的整潔大為驚嘆。


參考資源

 

Google material Design 中文指南
https://wcc723.gitbooks.io/google_design_translate/content/material-design-introduction.html

Jetpack Compose Component
https://www.composables.com/components/material3/card

Compose Material 3
https://developer.android.com/jetpack/androidx/releases/compose-material3

State and Jetpack Compose
https://developer.android.com/jetpack/compose/state



Kelly Wu