Compose 工具

Android Studio 帶來許多專屬於 Jetpack Compose 的新功能,該公司採用以程式碼為優先的做法,而且不必在設計介面或程式碼編輯器之間選擇,就能提高開發人員的工作效率。

以 View 為基礎的 UI 和 Jetpack Compose 的根本差異在於,Compose 不仰賴 View 來算繪可組合項。藉由這個架構方法,Android Studio 可為 Jetpack Compose 提供額外功能,讓您不必開啟模擬器或連結至裝置。與 Android View 相比,這可讓開發人員更快速的疊代程序實作 UI 設計。

如要為 Jetpack Compose 啟用 Android Studio 專屬功能,您必須在應用程式 build.gradle(.kts) 檔案中新增這些依附元件。您可以使用物料清單 (BOM) 或個別定義依附元件。

物料清單

  val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
  implementation(composeBom)

  debugImplementation("androidx.compose.ui:ui-tooling")
  implementation("androidx.compose.ui:ui-tooling-preview")

個別

  debugImplementation("androidx.compose.ui:ui-tooling:1.6.8")
  implementation("androidx.compose.ui:ui-tooling-preview:1.6.8")

設計

建立符合設計規格的元件、設計系統和畫面。
Preview 參數 多重預覽
@Preview 註解可讓您預覽可組合項。瞭解如何預覽、整理內容,並與其互動。
動畫預覽
Android Studio 可讓您使用「Animation Preview」窗格設計及檢查動畫。這樣就能逐影格預覽動畫影格,並確保動畫符合必要行為。

開發

透過較少的環境切換來加速建構 UI 並測試執行中的應用程式。
即時編輯
瞭解如何使用「即時編輯」並套用變更,在無需整體建構的情況下加速開發流程。
即時範本 溝槽圖示
瞭解如何使用 Android Studio 編輯器視窗中的功能提升工作效率。

偵錯

對 Compose UI 進行偵錯以瞭解應用程式。進一步瞭解如何分析版面配置、重組和組合追蹤,以提升應用程式的 UI 效能。
重組次數 語義
瞭解如何在模擬器或實體裝置上檢查 Compose 版面配置。
系統追蹤
使用組合追蹤功能,在系統追蹤中追蹤可組合函式。

其他工具

Relay 提供設計人員與開發人員之間的 Android UI 元件即時切換。設計人員可以使用 Relay for Figma 外掛程式將 UI 元件加上註解並包裝,以供開發人員使用,包括版面配置、樣式、動態內容和互動行為等資訊。

最新消息和影片