Compose 工具

Android Studio 帶來許多專屬於 Jetpack Compose 的新功能,它支援採用程式碼優先方法,同時還能提高開發人員的工作效率,而不需要在設計介面或程式碼編輯器中二選一。

在以 View 為基礎的 UI 和 Jetpack Compose 之間的基本差異,Compose 不仰賴 View 來算繪可組合項。這種架構方法帶來的結果,Android Studio 為 Jetpack Compose 提供額外功能,而不必開啟模擬器或連線至裝置。與 Android View 相比,這個 API 可讓開發人員在更短的時間內實作 UI 設計。

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

物料清單

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

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

個別

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

設計

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

開發

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

偵錯

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

其他工具

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

最新消息和影片