在 Figma 中,變體用於將不同變化版本的 相同的元件 例如不同的狀態或大小Relay 保留 翻譯成程式碼時的元件變化版本本節將介紹 Relay 處理設計中的變化版本
起點
![顯示樹系變化的新聞資訊卡](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=0000&hl=zh-tw)
我們會先從 Figma 檔案開始,其中包含一個新聞資訊卡元件,其中包含三個 子類:
- hero-item 會列出最重要的新聞報導
- article-item 適用於一般文章
- audio-item 是用於聆聽文章,而非朗讀的文章
複製 Figma 範例
我們會使用現有的 Figma 檔案做為本教學課程的範例。請確認 您登入 Figma 帳戶。
- 將 HelloNews.fig 下載至電腦。
在 Figma 中,前往檔案瀏覽器。將滑鼠遊標懸停在左側 草稿。「+」圖示即會出現,依序點選「+」圖示和「匯入」。 選取剛下載的 HelloNews.fig 檔案。這可能需要 間隔可介於 10 秒到 1 分鐘之間
在 Figma 中開啟已匯入的檔案。
建立 UI 套件
Relay for Figma 外掛程式會為元件新增額外資訊, 與開發人員合作,並在他們的程式碼中使用我們的元件。
- 在檔案中開啟 Relay for Figma 外掛程式 (在選單列中:依序選取「Plugins」>「Relay」 Figma 專用)。點選「開始使用」。
選取元件,然後按一下「Create UI Package」。
選取 UI 套件後,在摘要方塊中加入說明。適用對象 例如:「新聞資訊卡元件,用來顯示清單中的新聞項目」。
儲存已命名版本
建立 UI 套件後,請準備元件,以便與開發團隊共用。
- 開啟 Figma Relay 外掛程式 (如果尚未開啟)。
- 按一下「與開發人員分享」。
- 在「與開發人員共用」畫面中,您可以在「儲存版本記錄」部分輸入新的版本名稱和說明。
按一下 [儲存]。
標題範例:首次新增資訊卡
說明範例:新聞文章項目第一次反覆出現
下載 Android Studio 專案
在本教學課程的 Android Studio 部分中,我們將使用預先設定完成的 Android Studio 專案。此專案包含會顯示新聞報導的應用程式 使用純文字格式
- 下載 HelloNews.zip 範例檔案。
- 按兩下檔案解壓縮,建立名稱為 HelloNews。然後移至主資料夾。
- 返回 Android Studio。前往「檔案」>開啟並前往住家 資料夾並選取「HelloNews」,然後按一下「開啟」。
- 開啟專案時,Android Studio 會詢問您是否信任 專案。按一下「Trust Project」。
匯入 Android Studio
現在將 Figma 元件匯入專案中。
返回 Figma,複製新聞資訊卡教學課程 Figma 檔案的網址。我們會 即可使用這個網址匯入元件顯示右上角的 在 Figma 中,按一下「Share」按鈕。在隨即開啟的對話方塊中,按一下 複製連結。
在 Android Studio 中切換至 HelloNews 專案。前往「檔案」>新增 >匯入 UI 套件...。
貼上 Figma 檔案的網址,然後按一下「Next」。
- 敬上
- 檔案擷取完畢後 (可能需要一段時間),請按一下 完成。
按一下
來建立專案請稍候片刻。
預覽應用程式並化合物
在 Android 檢視畫面中,開啟
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, 您會看到這個應用程式的預覽畫面,其中顯示數篇新聞報導 純文字格式,在語音故事上方顯示平面故事。開啟
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
。這個 是針對 Figma 元件產生的 Jetpack Compose 程式碼從 預覽,可以看到 NewsCard 元件的三個變化版本 轉譯成程式碼讓我們進一步瞭解程式碼。View
列舉可讓我們選擇要用於這個元件的變化版本。 列舉名稱及其值衍生自我們 Figma 元件。這是用於 NewsCard 中的view
參數 可組合函式。NewsCard 可組合函式是透過 UI 套件產生。該訊息包含
View
類型的參數,用於將新聞資訊卡的變體設為 例項化。package com.example.myapplication.newscard import ... // Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list. * * This composable was generated from the UI Package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem ) {...}
下一步
我們目前還無法使用 NewsCard。元件不知道 顯示不同的新聞報導,在 Figma 中只使用相同硬式編碼的報導。所以 現在要加入這個元件 大家都得到相同的新聞報導 可以重複執行我們需要方法指定要在 NewsCard 的哪些部分填入 擷取 YAML 檔案
在本節中,我們會將內容參數新增至 NewsCard 元件。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 內容參數
- 捲動
- 在 View 中使用 Compose