Android Kotlin Jetpack Compose UI框架 完全解析
前言
Q1的時候公司列了個培訓計劃，部分人作為講師要上報培訓課題。那時候剛從好幾個Android專案裡抽離出來，正好看到Jetpack釋出了新玩意兒——Compose，我被它的快速實時打包給吸引住了，就準備調研一下，於是上報了此次課題。
名詞解析：
以下用到的專業術語可能會有出入，為了避免混淆，下面做一個名詞解析表：
| 名詞 | 解析 | 備註 |
|---|---|---|
元件 |
可以控制頁面展示的部分UI的邏輯單元 | |
View |
可以展示的UI，並具備自己維護狀態的能力 | |
微件 |
同元件，可以控制頁面展示的部分UI的邏輯單元 |
Compose官方文件中，新發明了一個名詞——“微件” 微件 可以理解為Android目前用到的各種 View
元件。
1 Compose是什麼
Jetpack Compose 是用於構建原生介面的新款 Android 工具包。它可簡化並加快 Android 上的介面開發。使用更少的程式碼、強大的工具和直觀的 Kotlin API，快速讓應用生動而精彩。
這麼一聽感覺有點抽象，不知道再講什麼。
我來翻譯一下：
Jetpack Compose 是一款基於Kotlin API，重新定義Android佈局的一套框架，它可以更快速地實現Android原生應用。節省開發時長，減少包體積，提高應用效能。
節省開發時長，減少包體積，提高應用效能。 這個聽起來很誘人，我們來看看它的效果如何。
1.1 Android Studio 對Compose 的支援
強大的預覽
這一功能基於新版Android Studio 對Compose 的支援。
新版的Android Studio Arctic Fox(現在還是Canary版本) 中添加了許多新工具來支援Jetpack Compose新特性，比如：實時文字、動畫預覽，佈局檢查等等。
1.1.1 強大的預覽
新的Android Studio 增加了對文字更改實時預覽的效果，可以在Preview、模擬器、或者真機上實時預覽。
1.1.2 動畫預覽
可以在AndroidStudio內檢視、檢查或播放動畫，還可以逐針播放。
1.1.3 佈局檢查器
Android Studio Arctic Fox 增加了佈局監測器對Compose的支援，可以分析Compose元件的層級。如下所示：
1.1.4 互動式預覽
在此模式下，你可以與介面元件互動、點選元件，以及檢視狀態如何變化。通過這種方式，你可以快速獲得有關介面如何反應的反饋，並可快速預覽動畫。如要啟用此模式，只需點選“互動”圖示 ，系統即會切換預覽模式。
如需停止此模式，請點選頂部工具欄中的 Stop Interactive Preview。
以上是AndroidStudio對Compose的支援，可以說是大手筆了。
1.2 Jetpack Compose 使用前後對比
你以為Compose只是添加了預覽功能？那可不是。
從普通應用切換到Compose應用，你的應用速度和效能可以得到大幅提升。
我們來看一個Google官方改造的應用示例。
1.2.1 APK 尺寸縮減
使用者最為關心的指標，莫過於 APK 大小。
下面是開啟了 資源縮減 的最小化釋出版 APK (使用了 R8) 通過 APK Analyzer 所測量的結果:
關於上述數字的說明:
1、使用了 APK Analyzer 報告的 "APK file size" (而不是下載時的大小)。 APK 大小分析
2、在使用了 Compose 後，我們發現 APK 大小縮減了 41%，方法數減少了 17%
1.2.2 程式碼行數
原始碼行數雖然不能作為衡量軟體好壞的標準，但是可以對比出一個實驗在“瘦身”上面做了多大的努力，為觀察實驗變化提供了一個統計視角。
從圖中可以看到，XML 行數大幅減少了 76%。再見了，佈局檔案，以及 styles、theme 等其他的 XML 檔案 。
同時，Kotlin 程式碼的總行數也下降了。
這就是 APK 能夠瘦身的很大一部分原因。
1.2.3 構建速度
構建速度是開發者們十分關心的一項指標。
這裡需要做一些說明：
"完全接入 Compose" 使用的是最新版本的 Dagger/Hilt，該版本使用了 Android Gradle Plugin 7.0 中的新 ASM API。而其他版本使用了較舊的 Hilt 版本，其使用了不同的機制，會嚴重拖慢生成 dex 檔案的時間。
除此之外，Kotlin 編譯器與 Compose 編譯器外掛為我們所做的事情，如 位置記憶化、細粒度重組 等工作，構建時間能夠 減少 29%， 可以說十分驚人。
2 如何優雅地使用Compose
上面講了很多Compose的優點，那麼，接下來我們如何使用它呢。
2.1 準備
在開始使用Compose之前，你需要具備一下基礎。
- 下載 Android Studio Arctic Fox 或更高版本
- Kotlin 1.4.32 或更高版本
- Kotlin 語言使用無障礙
2.2 如何快速學習Compose
接下來，我將會給大家介紹一份2021年最新整理出來的《Jetpack Compose 完全開發手冊》，手把手教大家Jetpack Compose從入門到精通。
這份資料旨在給希望瞭解、學習、應用Android Jetpack Compose的小夥伴一個參考資料。
有需要的朋友可以【點選此處】找我免費領取。
資料詳情
第一章 初識 Jetpack Compose
-
為什麼我們需要一個新的UI 工具？
-
Jetpack Compose的著重點
加速開發
強大的UI工具
直觀的Kotlin API
-
API 設計
-
Compose API 的原則
一切都是函式
頂層函式（Top-level function）
組合優於繼承
信任單一來源
-
深入瞭解Compose
Core
Foundation
Material
-
插槽API
第二章 Jetpack Compose構建Android UI
-
Android Jetpack Compose 最全上手指南
Jetpack Compose 環境準備和Hello World
佈局
使用Material design 設計
Compose 佈局實時預覽
……
-
深入詳解 Jetpack Compose | 優化 UI 構建
Compose 所解決的問題
Composable 函式剖析
宣告式 UI
組合 vs 繼承
封裝
重組
……
-
深入詳解 Jetpack Compose | 實現原理
@Composable 註解意味著什麼？
執行模式
Positional Memoization (位置記憶化)
儲存引數
重組
……
第三章 Jetpack Compose 專案實戰演練（附Demo）
-
Jetpack Compose應用1
開始前的準備
建立DEMO
遇到的問題
-
Jetpack Compose應用2
-
Jetpack Compose應用做一個倒計時器
資料結構
倒計時功能
狀態模式
Compose 佈局
繪製時鐘
-
用Jetpack Compose寫一個玩安卓App
準備工作
引入依賴
新建 Activity
建立 Compose
PlayTheme
畫頁面
底部導航欄
管理狀態
新增頁面
-
用Compose Android 寫一個天氣應用
開篇
畫頁面
畫背景
畫內容
……
-
用Compose快速打造一個“電影App”
成品
實現方案
實戰
不足
……
有需要的朋友可以【點選此處】找我免費領取。
3 Compose是否值得一試
前面講到Compose的特性，優缺點，以及如何快速入門、如何正確使用。
那麼Compose是否值得應用到專案中來呢？
這些還需要具體情況具體分析。
如果你是新專案。
我建議你大膽嚐鮮，畢竟聰明的“部分重新整理”機制，是提高頁面效能的重要手段。而且宣告式佈局在未來應該會取代傳統的xml佈局形式，這是大勢所趨。
如果你是現有專案改造。
首先，你可以評估一下是否已經具備開始Compose的基礎能力——kotlin語言的靈活運用。
Compose可以說是為Kotlin量身定製的、與View model緊密結合的一種衍生物，有了Kotlin和View model，Compose的作用可以發揮到極致，也就能實現前面的目標：
- 構建時間能夠 減少
29% - XML 行數大幅減少了
76% - APK 大小縮減了
41% - 方法數減少了
17%
如果你已經具備了上述能力，那麼可以在小範圍進行試點，或者從效能要求比較高的頁面入手。
建議先單個頁面引入，最後再做全量替換。Google官方的改造案例也是這麼做的。
最後，放開手，擼起來吧！
社群需要你我共建，更需要走在前沿的實踐者，期待看到更多、更好的文章出現，這就是我寫作的動力。