Android Kotlin Jetpack Compose UI框架 完全解析


前言

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、模擬器、或者真機上實時預覽。

111.gif

1.1.2 動畫預覽

可以在AndroidStudio內查看、檢查或播放動畫,還可以逐針播放。

222.gif

1.1.3 布局檢查器

Android Studio Arctic Fox 增加了布局監測器對Compose的支持,可以分析Compose組件的層級。如下所示:

333.gif

1.1.4 交互式預覽

在此模式下,你可以與界面組件互動、點擊組件,以及查看狀態如何變化。通過這種方式,你可以快速獲得有關界面如何反應的反饋,並可快速預覽動畫。如要啟用此模式,只需點擊“互動”圖標 ,系統即會切換預覽模式。

89074-iw717wisn5b.png

如需停止此模式,請點擊頂部工具欄中的 Stop Interactive Preview。

以上是AndroidStudio對Compose的支持,可以說是大手筆了。

1.2 Jetpack Compose 使用前后對比

你以為Compose只是添加了預覽功能?那可不是。

從普通應用切換到Compose應用,你的應用速度和性能可以得到大幅提升。

我們來看一個Google官方改造的應用示例。

1.2.1 APK 尺寸縮減

用戶最為關心的指標,莫過於 APK 大小。

下面是開啟了 資源縮減 的最小化發布版 APK (使用了 R8) 通過 APK Analyzer 所測量的結果:

63402-996raj8mnrr.png

97775-9mv5wydrwu8.png

關於上述數字的說明:

1、使用了 APK Analyzer 報告的 "APK file size" (而不是下載時的大小)。 APK 大小分析

2、在使用了 Compose 后,我們發現 APK 大小縮減了 41%,方法數減少了 17%

1.2.2 代碼行數

源代碼行數雖然不能作為衡量軟件好壞的標准,但是可以對比出一個實驗在“瘦身”上面做了多大的努力,為觀察實驗變化提供了一個統計視角。

78697-3u9txjsjll3.png

從圖中可以看到,XML 行數大幅減少了 76%再見了,布局文件,以及 styles、theme 等其他的 XML 文件 。

同時,Kotlin 代碼的總行數也下降了。

這就是 APK 能夠瘦身的很大一部分原因。

1.2.3 構建速度

構建速度是開發者們十分關心的一項指標。

31273-ry24br610mn.png

這里需要做一些說明:

"完全接入 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

  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”
    成品
    實現方案
    實戰
    不足
    ……

有需要的朋友可以【點擊此處】找我免費領取。

3 Compose是否值得一試

前面講到Compose的特性,優缺點,以及如何快速入門、如何正確使用。

那么Compose是否值得應用到項目中來呢?

這些還需要具體情況具體分析。

如果你是新項目

我建議你大膽嘗鮮,畢竟聰明的“部分刷新”機制,是提高頁面性能的重要手段。而且聲明式布局在未來應該會取代傳統的xml布局形式,這是大勢所趨。

如果你是現有項目改造。

首先,你可以評估一下是否已經具備開始Compose的基礎能力——kotlin語言的靈活運用

Compose可以說是為Kotlin量身定制的、與View model緊密結合的一種衍生物,有了KotlinView modelCompose的作用可以發揮到極致,也就能實現前面的目標:

  • 構建時間能夠 減少 29%
  • XML 行數大幅減少了 76%
  • APK 大小縮減了 41%
  • 方法數減少了 17%

如果你已經具備了上述能力,那么可以在小范圍進行試點,或者從性能要求比較高的頁面入手。

建議先單個頁面引入,最后再做全量替換。Google官方的改造案例也是這么做的。

最后,放開手,擼起來吧!

社區需要你我共建,更需要走在前沿的實踐者,期待看到更多、更好的文章出現,這就是我寫作的動力。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM