Android 用Jektpack Compose 來開發app【01】 - 初期建構篇
4 min read
UIFramework#Android#Kotlin
前言
* 距離上一次發`Jetpack compose`相關的文章已是
2~3年前
其間斷斷續續會稍微碰到
不過都沒有好好的系統性的去研究
剛好近期
有機會開發整個專案全用Compose來完成的經驗
所以經過一番摸索後
有些心得
決定把這個過程寫成筆記分享給大家
專案建置
- 首先會先決定這次要用的library是哪些
這次選用為官方最新推薦的來做挑戰
- 其中某些library 也是最新版本AS創建new project會套用的
像是material3、kts+toml的配置、jetpack compose等等
另外，之前有分享過toml遷移時會遇到的問題
有興趣可以參考看看
- 實際的規劃如下：
{% include table/compose-use.html %}
{% include table/compose-category.html %}
實作Compose主題
- 以前在使用xml時，會透過加入色碼到colors.xml
再把color resource ID 放到styles.xml去達成黑暗模式的主題配置
現在用了compose就可以透過.kt來配置該app的主題
根據每個專案需求不同可自行配置
我個人習慣先根據UX/UX設計稿去設定的ColorScheme、shape、typography、statusBarColor、navigationBarColor...等等
而不是一頁一頁個別去設計
這樣可以節省很多重複開發的時間
step1. 加入compose相關lib以及material3
這邊就依照需求自行導入
實際使用toml是用這種寫法：implementation(libs.androidx.material3)
放在你的build.gradle.kts(:app)中
tips: 上面這邊的多個library在導入androidx-compose-bom時支援自動mapping對應library的版本，所以這邊就不一定需要輸入version.ref
step2. 配置通用的Theme包含color、shape、typography
這邊有關於Material 3 theme的 文檔
step3. 實際使用theme
這邊分別是設定狀態列、導航欄、theme等等
colorscheme就是套用前面實作的
在Activity或Screen中使用：
(Optional) step4. 製作通用toolbar
* 這邊則是做一個通用的toolbar
因為通常由ui/ux設計師出圖的話
多數時候toolbar會是相近的效果呈現
我自己就會先根據設計稿把toolbar寫好通用的
這邊就看大家需不需要做這步
如下：
這邊是實際使用MainAppBarConfig
主要是要在MainAppBarConfig裡面 加入想要的樣式或點擊反應
接著放到Scaffold內的topBar就可以了
結語
* 第一部分就到這邊了
主要是先把前面的基礎建設打穩
後面開發就會很方便、有效率了!