1. 程式人生 > 其它 >谷歌大佬強勢分享《Jetpack Compose 權威指南》,帶你參透宣告式UI的終極奧義!

谷歌大佬強勢分享《Jetpack Compose 權威指南》,帶你參透宣告式UI的終極奧義!

一、為什麼要選擇Compose?

宣告式 UI 的大哥 Flutter 已經出道很久了,再學習 Compose 還有意義嗎,Flutter 還是 Compose

我先丟擲我的結論:

  • 如果你想運用到實際的生產環境中,Flutter 肯定是更好的選擇,因為更多的人幫你踩過了坑。
  • 如果你想 Kotlin 一把梭,只是學習嚐鮮,結合 Android JetpackCompose 可以很好的作為你的技術儲備。

簡單的聊聊 Compose 中還不錯的地方。

1. Android開發習慣的繼承

相信很多同學都有這樣的習慣:

  • 使用 Kotlin 開發
  • 必須協程
  • 複雜的佈局會使用 ConstraintLayout
  • ...

是的,這些東西我們依然在 Compose 中運用,從而降低我們的上手難度。

2. Android Jetpack 的支援

在 Compose 剛剛釋出的時候,Android Jetpack 中的很多其他庫都第一時間給予了 Compose 支援,從而豐富了 Compose 的開發生態。

目前,能夠直接在 Compose 上使用的 Jetpack 庫有:

  1. Navigation
  2. Paging
  3. ViewModel
  4. LiveData
  5. hilt
  6. lifecycle

理論上來講,Android Jetpack 上跟 UI 不相關的庫 Compose 應該都是支援的,在我寫的 Hoo 中,就使用了Paging、Navigation、ViewModel 和 LiveData等 Android Jetpack 庫,再有協程和 Kotlin 的加持,整個開發過程中輕鬆不少!

3. 更少的程式碼

Compose 可以使我們更加專注於 UI 的開發,宣告式UI 可以顯著的減少方法數和包體積。在谷歌官方的 《Jetpack Compose 使用前後對比》 一文說道:

Tivi應用在使用了 Compose 後,我們發現 APK 大小縮減了 41%,方法數減少了 17%

其實這些都是可以預見的,比如更加簡單的動畫和觸控事件的 Api。

4. Preview

Compose支援程式碼的Preview,如圖:

Compose 程式碼寫完後,可以直接在右邊預覽,但是更新速度差點意思,不如 Flutter 的熱過載方便。

5. 其他

其他的一些點可能就跟 Flutter 有點像了。

  • Compose 的主題原生支援黑夜模式,開發者定製主題的時候提供兩套顏色即可,想起之前,起點讀書支援黑夜模式可是花了很大的功夫。

  • 通過 Scaffold,可以輕鬆整合很多 Material 元件,比如 TopbarFloatingActionButtonBottomNavigationBar 等,這些都可以幫助我們節省出不少的時間。

  • 另外,在 Compose 中不能輕鬆實現效果的時候,藉助於 AndroidView,可以去呼叫Android原生View。

二、如何快速學習Compose

接下來,我將會給大家介紹一份谷歌大佬強勢分享《Jetpack Compose 權威指南》,手把手教大家Jetpack Compose從入門到精通。

這份資料旨在給希望瞭解、學習、應用Android Jetpack Compose的小夥伴一個參考資料。

資料詳情

第一章 初識 Jetpack Compose

  1. 為什麼我們需要一個新的UI 工具?

  2. Jetpack Compose的著重點
    加速開發
    強大的UI工具
    直觀的Kotlin API

  3. API 設計

  4. Compose API 的原則
    一切都是函式
    頂層函式(Top-level function)
    組合優於繼承
    信任單一來源

  5. 深入瞭解Compose
    Core
    Foundation
    Material

  6. 插槽API

第二章 Jetpack Compose構建Android UI

  1. Android Jetpack Compose 最全上手指南
    Jetpack Compose 環境準備和Hello World
    佈局
    使用Material design 設計
    Compose 佈局實時預覽
    ……

  2. 深入詳解 Jetpack Compose | 優化 UI 構建
    Compose 所解決的問題
    Composable 函式剖析
    宣告式 UI
    組合 vs 繼承
    封裝
    重組
    ……

  3. 深入詳解 Jetpack Compose | 實現原理
    @Composable 註解意味著什麼?
    執行模式
    Positional Memoization (位置記憶化)
    儲存引數
    重組
    ……

第三章 Jetpack Compose 專案實戰演練(附Demo)

  1. Jetpack Compose應用1
    開始前的準備
    建立DEMO
    遇到的問題

  2. Jetpack Compose應用2

  3. Jetpack Compose應用做一個倒計時器
    資料結構
    倒計時功能
    狀態模式
    Compose 佈局
    繪製時鐘

  4. 用Jetpack Compose寫一個玩安卓App
    準備工作
    引入依賴
    新建 Activity
    建立 Compose
    PlayTheme
    畫頁面
    底部導航欄
    管理狀態
    新增頁面

  5. 用Compose Android 寫一個天氣應用
    開篇
    畫頁面
    畫背景
    畫內容
    ……

  6. 用Compose快速打造一個“電影App”
    成品
    實現方案
    實戰
    不足
    ……

如有需要參考的可以直接去我GitHub訪問查閱,希望能幫助到大家學習提升。