前言
Q1的時候公司列了個培訓計划,部分人作為講師要上報培訓課題。那時候剛從好幾個Android項目里抽離出來,正好看到Jetpack發布了新玩意兒——Compose
,我被它的快速實時打包給吸引住了,就准備調研一下,於是上報了此次課題。
名詞解析:
以下用到的專業術語可能會有出入,為了避免混淆,下面做一個名詞解析表:
名詞 | 解析 | 備注 |
---|---|---|
組件 |
可以控制頁面展示的部分UI的邏輯單元 | |
View |
可以展示的UI,並具備自己維護狀態的能力 | |
微件 |
同組件 ,可以控制頁面展示的部分UI的邏輯單元 |
Compose官方文檔中,新發明了一個名詞——“微件”
微件
可以理解為Android目前用到的各種 View
,也可以理解為H5前端里常說的 組件
。
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
官方的改造案例也是這么做的。
最后,放開手,擼起來吧!
社區需要你我共建,更需要走在前沿的實踐者,期待看到更多、更好的文章出現,這就是我寫作的動力。