Jetpack Compose 最新進展

今天給你們帶來 Jetpack Compose 的最新進展，在今年5月份的 Google I/O 大會上面，Jetpack 團隊首次爲你們介紹了 Jetpack Compose， 一種全新的 Android UI 組件庫。而後介紹事後，Android 文檔也只有一頁的介紹內容，沒有依賴庫地址，沒有樣例，同時瞭解今年 Apple WWDC 的同窗們應該有一種印象，Jetpack Compose 貌似是一個相似於 iOS SwiftUI 的聲明式 UI 庫。

終於時隔5個月以後，在今年的 Android Dev Summit 上面帶來了 Jetpack Compose 的最新進展，同時上線了全新的文檔頁，也提供了樣例代碼供開發者們參考。官網關於 Jetpack Compose 的定義是這樣的：

Jetpack Compose簡化並加速了Android上的UI開發。使用更少的代碼，強大的工具和直觀的Kotlin API，快速使您的應用程序栩栩如生。

接下來我會依據 Android Dev Summit 分享的內容以及本身的理解，爲你們介紹 Jetpack Compose 的最新進展，沒關注的小夥伴記得關注我以及個人公衆號【Android丨Kotlin】鴨！若是以爲這些文章有點意思，記得分享轉發評論點贊鴨！

時間讓咱們回到5個月前的 I/O 大會，當時演講者爲你們分享了這樣一張圖，這是一張 Android 10 年裏的簡要發展歷史，在長達 10 年的發展過程當中，Google 針對不一樣的問題作出了不少的調整，可是惟獨在 UI 構建方面，最初的那一套 UI 構建體系一直沿用至今，幾乎沒有作任何調整。

雖然 Google 移除了 Support 庫，引入了全新的 AndroidX，解決了 Android 因爲版本兼容衍生出的 API 混亂的問題，但 UI 構建的本質沒有改變。

這是 View.java 類，你能夠看到這個類已經龐大到 30000 行代碼了，同時整個 UI 構建都是基於【繼承】所實現的，Widget 繼承 View，Layout 繼承 ViewGroup，ViewGroup 繼承 View 等等，一直以來這樣的構建方式其實都有着開發上的不便捷以及性能上的損耗。

例如咱們都知道 Button 繼承自 TextView，理論上咱們只須要一個文本 + 可點擊的區域就能夠了，可是因爲 TextView 的特性，它自己是能夠長按出現複製、選擇功能的，可是我一個 Button 要這些功能有什麼用呢？應該不會有產品或者設計會須要咱們作一個能夠複製剪切文本的 Button 吧？同窗們應該聽過一句話就是：組合優於繼承，一樣這也是 Jetpack Compose 的核心，全部的 UI 都是經過組合實現，不存在繼承關係。

而且以目前的 UI 構建方式來講，咱們須要寫大量的代碼，寫一個自定義 View 須要實現測量和佈局，響應用戶的行爲須要實現大量的 Listener 事件，同時還要配合 XML 自定義屬性，真的是很是繁瑣。並且以目前的代碼量體積來講，想要優化重構是徹底不現實的，只有發佈一個全新的 UI 構建庫，才能從根本上解決問題，因此 Google 推出了全新的 Android UI 組件庫 Jetpack Compose。

因此基於以上種種緣由，Jetpack Compose 試圖改變原有的 UI 構建方式，同時爲你們帶來如下 4 點全新的改變。

1. UI 的變化更新再也不跟隨 Android 大版本的發佈而更新
2. 編寫 UI 代碼不須要掌握龐大繁瑣的技術棧
3. 簡單直接的狀態控制以及用戶行爲處理
4. 使用更少的代碼來編寫 UI

全新的 Jetpack Compose 受到了 React、Litho、Vue、Flutter 的啓發，採起聲明式的編寫方式，徹底採用 Koltin 開發，並且與現有的 Android 視圖體系徹底兼容。

那麼說了這麼多 Jetpack Compose 的代碼長什麼樣子呢？

如圖所示，首先咱們要定義一個方法並使用 @Composable 標記，方法中聲明咱們的佈局是縱向的（Column），而且四周有 16dp 的間距（Spacing），佈局內容是三個縱向排列的文本（Text），就這麼簡單，不須要 xml 代碼，所見即所得，並且這個 @Composable 方法能夠寫在任一文件中，不須要強制定義在 Activity 中。Jetpack Compose 除了支持 Column、Row、Flex 等佈局方式之外，一樣支持 ConstrainLayout 約束佈局方式，在不久的未來會更新出來。

Jetpack Compose 內置了多種 Material Design 默認樣式，例如 Text 默認 h一、h二、title、body 的字體效果、Button 默認的圓角、線框、無邊框顯示效果等等，一樣 Jetpack Compose 支持 DarkTheme（暗色主題）的配置。

說了這麼多，咱們來看一下從 API 的角度，Jetpack Compose 由哪幾部分構成：

1. Compose UI Core 提供了核心部分包括：輸入、測量、佈局、繪製
2. Compose UI Foundatuin 提供了標準佈局以及交互的定義
3. Compose UI Material 提供了完整的 Material Design 組件

除了內置的 UI 組件以外，Jetpack Compose 中實現自定義 View 的過程也很是簡單，咱們只須要關注 Draw 和 Layout 這兩個方法就行了，這裏我繪製了一個錯誤框，粉色的背景+白色的X，過程和以前同樣，仍是通過 measure、layout、draw ，但在寫法上很是精簡。

伴隨此次 Android Dev Summit ，Jetpack Compose 發佈了 0.1.0-dev02 版本，Android Jetpack 官方文檔上有詳細的依賴配置方式，注意須要配合 Android Studio 4.0 預覽版一塊兒使用哦。

同時在 GitHub Android 官方倉庫中，也開源了一個名叫【Jetnews】的開源項目，幫助你們理解和學習使用 Jetpack Compose 來編寫 UI，倉庫地址是：github.com/android/com…

接下來咱們來聊一下 Jetpack Compose 的標準 UI 構建方式。

Jetpack Compose 採起單一貫下數據流和單一貫上事件流的方式構建 UI。簡單來講，就是由父組件向子組件傳遞數據，子組件經過數據構建 UI，當子組件發送交互事件時，經過Lambda 方法將行爲的發生交與父組件處理，父組件處理後修改數據，再經過單一貫下數據流的原則通知子組件變化。這裏經過一段簡單的代碼，向你們介紹這種構建方式：

一般咱們的數據都是可變化的，根據 Android Arch Componet 中的寫法，可變化和可監聽的數據須要經過 LiveData 封裝，經過 LiveData 的 observe 方法監聽數據的變化從而修改對應的 UI，以此咱們還須要實現對應的 ViewModel 來承載 LiveData。

而在 Jetpack Compose 中，咱們不須要這樣作（注意，這裏要劃重點了！🤣），Jetpack Compose 中引入了一個 @Model 註解，咱們只須要在對應的數據類上面標示該註解，那麼數據類中的全部屬性，就會變成一個可觀察對象。當咱們有了一個可監聽變化數據類，那麼該如何監聽數據的變化呢？

答案是：不須要監聽，直接用就行了！

這裏我又又又寫了一個例子，佈局方面是一個縱向的列表，第一項是咱們以前寫的那個錯誤框，經過給它包裝一層 Clickable 將它變成可點擊的 View，onClick 就是咱們點擊時執行的方法，錯誤框下面是縱向排列的 Text，有多少條數據就有多少條 Text。數據方面 DataList 是咱們建立的一個維護數據的類，你能夠看到它被 @Model 註解所標識，那麼就意味着，咱們 DataList 中的 users 是一個可監聽對象，當咱們執行點擊事件插入數據的時候，位於 @Composable 方法中的 DataList.users 會自動收到更新，而後執行循環體，更新 UI。

你可能會以爲難以想象，沒錯，我第一次看到也是很是驚訝的，只有當你親自擼了一遍代碼以後你纔會相信，原來 @Model 真的如此神奇，強烈推薦你們去試一哈！

最後咱們來聊一下 Jetpack Compose 與現有 UI 構建方式的兼容，直接上圖：

使用 Jetpack Compose 編寫的 View，能夠無縫的經過 xml 在原有試圖上面使用，只須要增長一個 @GenerateView 註解，是否是很方便！

一樣原有的 View 也會支持 Jetpack Compose 寫法。

截止目前，Jetpack Compose 才僅僅發佈 0.1.0-dev02 版本，可是在我這一天的體驗裏面，如此衆多新奇的特性真的讓我很興奮，很難想象當到達 1.0 版本的它，會有多麼強大。在將來的計劃中，Jetpack Compose 會支持 Kotlin 協程、會支持現有的 Android Arch Componet 、會有更完善的動畫機制。因爲篇幅有限，更多詳細的內容，你們能夠登陸 Android 官方文檔，查看詳細教程，同時下載 GitHub 上面的官方樣例，去親自體驗 Jetpack Compose 的衆多特性。

好了，這就是關於 Jetpack Compose 的所有內容，關於更多詳細的內容，你們能夠關注公衆號【Android丨Kotlin】點擊【閱讀原文】在油管上查看。

明天的推送中，我會爲你們帶來關於【Android Studio 4.0】的最近進展，沒關注的小夥伴記得關注我以及個人公衆號【Android丨Kotlin】鴨！若是以爲這些文章有點意思，記得分享轉發評論點贊鴨！

我是 wanbo 你們加油！