Android Studio 工作流程
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
匯入 UI 套件
在 Figma 中建立使用者介面套件後,即可將其匯入 Android Studio 專案。專案建構完成時,Relay 會產生 Jetpack Compose 程式碼。
如何將 UI 套件匯入 Android Studio 專案:
依序選取「File」>「New」>「Import UI Package...」。
輸入包含 UI 套件的 Figma 檔案網址。
點選「Next」。
選取要匯入的 UI 套件。顯示的元件取決於您貼上的元件、網頁或檔案連結。如果已匯入 UI 套件,系統會將其標示為「UPDATED」。否則會顯示為「NEW」。
按一下「Finish」,將所選套件及其依附元件匯入 ui-packages
資料夾。
UI 套件匯入畫面
匯入畫麵包含以下資訊:
- 元件及其變化版本的預覽圖片。
- 標題和說明。
- 變化版本及其屬性的清單。
- 內容參數及其類型的清單。
- 互動處理常式及其類型的清單。
UI 套件工具視窗
Android Studio 外掛程式會新增名為「UI Package」的工具視窗。每次在「UI Package」資料夾中選取檔案時,即可開啟檔案 (例如app/src/main/ui-packages/mycomponent/
)。工具視窗會顯示 UI 套件及其內容的摘要。
建構 Android 專案
建構包含 UI 套件的 Android Studio 專案時,Relay Gradle 外掛程式會從 UI 套件產生並編譯程式碼。字型資產也會下載並複製到專案中。
如果只想建構匯入的 UI 套件,而非整個專案,您可以執行以下特定 Gradle 工作:
generateDebugRelayCode
或 generateReleaseRelayCode
會產生從 UI 套件衍生的程式碼偵錯或發布版本。
generateRelayRuntimeCode
會建立產生的程式碼使用的執行階段程式庫。
在建構程序中:
- 程式碼透過 UI 套件產生,並儲存在不同的資料夾中。
- 系統會將圖片和字型複製到一般產生的資源資料夾。
如需資料夾的位置,請參閱瞭解 UI 套件與產生的程式碼。
更新 UI 套件
新的設計版本準備就緒時,設計人員應建立一個新的 Figma 檔案已命名版本。
在 Android Studio 中,確認「Project」工具視窗位於 Android 檢視畫面中。
在模組的 ui-packages
資料夾下,在要更新的 UI 套件資料夾上按一下滑鼠右鍵,然後選取「Update UI Package(s)」。在以下範例中,我們選取了 5 個要更新的 UI 套件。
您也可以在 ui-packages
資料夾上按一下滑鼠右鍵,以更新所有 UI 套件。
為您推薦
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-03-25 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-03-25 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-03-25 (世界標準時間)。"]]