2022 iThome 鐵人賽

DAY 8

Mobile Development

今年一定減成功!Jetpack Compose 做出重訓紀錄APP系列第 8 篇

Day 8 Jetpack Compose 上手小Tips

14th鐵人賽 jetpack compose kotlin android

ChuLin

團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

2022-09-14 19:45:13

1934 瀏覽

分享至

前言

工欲善其事必先利其器，在正式進入開發之前，來介紹使用 jetpck compose 開發時能加速開發的小技巧，以及我在學習路上用到的好資源。

快速建立 Compose function 招數

快捷鍵

comp + tab/enter

快速建立 Composable function

@Composable
fun () {
    
}

compsable function 命名記得大寫開頭 (小寫的話IDE會提示)

@Composable
fun MyComponent() {
    
}

prev + tab/enter

快速建立帶有 @Preview 的 Composable function

@Preview
@Composable
fun () {
    
}

@Preview
@Composable
fun PrevComponent() {
    
}

fun0 + tab/enter
fun1 + tab/enter
fun2 + tab/enter

快速建立 function block ，數字代表參數數量。
IDE 會將指標放在你該輸入的位置，按下 Enter 就會自動到下一個輸入點，十分方便。

fun (): Unit {
    
}

fun (x: Any): Unit {
    
}

fun (x: Any, y: Any): Unit {
    
}

參數複製

ctrl + click function name
ctrl + B

進入 function 原本定義的位置，可以看到該元件是怎麼實作出來的。
觀察參數能知道有該元件有哪些可以控制的參數，我也常用ctrl + B看看參數是用什麼 function 給出預設值。

範例 1 Alignment 對齊參數

compose 很常用到 Row() 和 Column() 來排列元件，常常要調整Alignment卻想不起來要帶什麼。
ctrl + B 到實作的地方，複製參數行

@Composable
inline fun Row(
    // ...
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    // ...
) {
      // ...
}

貼上要使用的 Row() 參數位置去掉 :參數類型，再調整Arrangement.要引用的值就可以囉!

Row(
    horizontalArrangement = Arrangement.Start,
    verticalAlignment = Alignment.Top
) {
    // ...
}

範例 2 各種 RememberSate()

有些常用的元件能傳入State Type參數，讓我們能在 Compose 之外記得狀態，而實作 function 不需要特別記憶，只要ctrl + B進來瞧瞧。
例如 LazyColumn 滑動狀態：
Ctrl + B > LazyColumn 定義參數區 >複製 state: LazyListState = rememberLazyListState()

@Composable
fun LazyColumn(
    // ...
    state: LazyListState = rememberLazyListState(),
	// ...
) {
	// ...
}

貼在 LazyColumn 外並傳入參數。這樣就可以在 LazyColumn 之外用 state. 來得知 column 滑到哪個index 等資訊。

val state: LazyListState = rememberLazyListState()
LazyColumn(state = state) {
   // ...
}

參數順位

觀察了官方實作的元件我發現在組成自己需要的 composable function 時，留意參數的順序可以讓我們在使用該 function 時讓IDE 自動生成參數名稱和 Lambda。

參數順位 Tips :

必填參數放前面，選填放後面。
composable content 放最後面，因為kotlin function最後一個參數可以放在 Lambda裡，通常composble function都不只一行，比較適合放在大括號中。
使用率越高的參數放越前面：
modifier 放選填第一個。modifier常用來進行布局，常常在多個compose往下傳遞

//自定義的 composable 
@Composable
fun TestComp(
    onClick: () -> Unit, //沒有指定預設值，使用時必須宣告 {}
    para: String,  //沒有指定預設值，使用時必須給String Type
    para2: String?,//沒有指定預設值，使用時必須給 Nullable String Type
	modifier: Modifier = Modifier, 
    param3: String = "", //有預設值，使用時不用指定
    content: @Composable () -> Unit //放最後一個方便傳入 composable fun
) {
    // ...
}

@Composable
fun DemoComp() {
	//打大寫 "TC" IDE 就會自動提示，按下 Enter 自動生成 
    TestComp(onClick ={/*TODO*/}, para =, para2 =){
        
    }
}

好用的學習資源

Jetpack Compose 技術集中站

英文資源 Jetpack Compose Playground

元件實作 code + 呈現效果

裡面最好用的就是元件的實作。會有範例程式碼和效果圖片。

專案範例

還可以看看把compose 用得淋漓盡致的 Side Project ，裡面有寶可夢圖鑑、模仿各大串流影音的UI效果等等。

介紹兩個我覺很酷的專案
ComposeCookBook
用 compose 做出各種主流APP的介面效果 (Gmail、Twitter、Youtube、Spotify、Instagram)

composeclock
超酷炫的粒子動畫效果做出時鐘

中文資源 Jetpack Compose 博物館

類似 Jetpack Compose Playground ，在這裡是中文。

依賴

忘記要加那些依賴和支援的版本可以看這裡。

使用 Jetpack Compose 需要使用的
依賴

在 M3 還有很多在 M2 的元件沒有實作出來，可以使用 accompanist 來補充。
Compose 可以翻譯成作曲，而 accompanist 有伴奏家的意思，從名字上可看出輔助套件的意味。
accompanist

技術原理

介紹技術原理文章整理，看完功力大增!

專案範例

很詳細的用中文件紹專案怎麼實踐，架構等等。推薦 Focus 這篇 UI 美美的專案。

Codelab

Android 官方教學，之前Google 官方有辦 Android Study Jams，這就當時挑戰的教材之一。
這裡集結了和 Jetpack compose 相關的影片、文章、Codelab，可以以比較有系統的方式自學。
英文版更新的較快，預設為中文頁面的人可以切換成英文看看有沒新東西。
Jetpack Compose for Android Developers