現代化 Android - Jetpack Compose Part 1 — 簡介
Published in
5 min readOct 28, 2021
2021 年 7月時迎來了 Jetpack Compose 1.0 正式版，而 Android Studio 也正式發布 Arctic Fox 版本，內建支援 Compose preview。
雖然之前 compose 在 alpha 版本時就可以透過 canary 版 A studio 開發，但使用上還是常常遇到未知的 bug (?) 所以作罷繼續等待正式 release
然而正式版的 release 在公司支持嘗試新技術的情況下，這讓等待已久的我馬上就投入 compose 的懷抱中。
什麼是 Jetpack Compose ?
- 新的 Android 開發 UI 框架，100% written in Kotlin
- 使用「宣告式」開發，只需告訴 compose 我們需要「什麼」，由 compose 來「實現」，不用知道如何實作
- 拋棄以往所有的 view 繼承模式，例如 Button extends TextView extends View，所有的 compose 都只是一個「function」，也就是由「組合」來替代「繼承」
下面列出原生 Android 和 Compose 和 Flutter 的簡易比較表：
來試試看
使用前先了解一下 Compose 的基本元件，搭配先前常用的 xml 對照起來會是如何：
- Box <> FrameLayout
- Column <> LinearLayout (Vertical)
- Row <> LinearLayout (Horizontal)
- Text <> TextView
- Image <> ImageView
看起來是不是很直覺呢？個人覺得對新手入門來說寫起來更直覺不用管要用什麼 view、什麼 constraint…當然還有更多 Components 可以使用不一一列舉。
現在就拿 Pinkoi 的商品卡來舉例，假設我今天要實作下面的商品卡，用 Compose 結構會是如何：
所以大概會是下面這樣的結構呈現：
@Composable
fun GridProductCard() {
PinkoiTheme {
Column() {
Box { //商品圖區塊
Image() //商品圖
Image() //免運標籤
Image() //愛心
}
Text() //商品名稱
Text() //設計館名稱
Row { //價格區塊
Text() //特價價格
Text() //原始價格
}
}
}
}上面為了方便呈現結構，移除了 style 的設定，整個商品卡是直向的所以用 Column 包起來，再依照對應區塊放上文字和圖片，看起來是不是很直覺且乾淨呢？
這邊沒有仔細把內容都寫出來，完整的範例可以參考 GitHub Repo：
如果是剛入門 Jetpack Compose ，更多的觀念建議可以先從 Android 官網上查看教學：
https://developer.android.com/jetpack/compose/tutorial
或是從 code lab 中學習：
