簡介
大部分 UI 設計的內容都是靜態的,並且因資料而有所差異。在本節中,我們將藉助內容參數在設計中新增資料,這可讓設計人員指明應在設計中的哪些部分填入資料
在 Figma 中新增參數
現在,我們在元件中新增內容參數。
- 切換至 Fitbit。在 NewsCardTutorial 中,選取「hero-item variant」中的「thumbnail image」圖層 (在 Mac 上為 ⌘ + 點選,在 Windows 和 Linux 上為 Ctrl + 點選)。
在 Relay for Figma 外掛程式中,按一下「+」,然後在下拉式選單中選取
image-content
,然後將名稱變更為「thumbnail」。選取「headline text」圖層,然後按一下「+」並選取
text-content
。在 hero-item 變化版本中,針對「author」和「date」文字圖層重複上述步驟。分別命名為「headline」、「author」和「date」。按一下外掛程式中的縮圖參數。請注意,在每個元件變化版本中,縮圖圖層是一張圖片,並且已選取。
由於這三個圖層的名稱相同 (即「thumbnail」),且資料類型 (image-content) 也相同,因此三個變化版本中的內容參數均已連結。這意味著一個參數會將相同資料提供給多個變化版本。標題、作者和日期參數也是如此。
儲存已命名版本
現在,讓我們將這個版本標示為準備就緒,以便匯入程式碼中。
開啟 Figma Relay 外掛程式 (如果尚未開啟)。
按一下「與開發人員分享」。
在「與開發人員共用」畫面中,輸入版本的名稱和說明。
標題範例:新增參數
說明範例:在資訊卡中新增內容參數
按一下「儲存」。
在 Android Studio 中更新元件
更新 NewsCard 元件:
在 Android Studio 中,確認「Project」工具視窗位於「Android view」。然後,在
app/ui-packages/news_card/
上按一下滑鼠右鍵,然後按一下「Update UI Package」。按一下 圖示來建構專案。這項操作會擷取更新後的 UI 套件,並產生更新版可組合程式碼。
如果您查看
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
,就會看到我們新增的內容參數 (thumbnail
、headline
、author
、date
) 出現在可組合項的參數清單。// View 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; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
整合至應用程式
我們來看看尚未修改 UI 的應用程式。其中包含一般新聞報導清單和語音新聞清單。以下是新增 NewsCard 元件所需的兩個可組合項:
- PostListArticleStories 可組合項負責一般新聞報導。
- postTop 參數代表焦點新聞。
- posts 參數代表其餘新聞。
- PostListAudioStories 可組合項會轉譯語音新聞。 現在,我們將 NewsCard 元件整合至主畫面。
在
app/java/com/example/hellonews/ui/home/HomeScreen.kt
中,將以下匯入項新增至檔案頂端附近其他匯入行的旁邊:匯入com.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
同樣在 HomeScreen.kt 中,向下捲動至「PostListArticleStories」。
@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
針對 postTop,請使用 HeroItem 檢視畫面,將「Text」元件取代為新匯入的「NewsCard」。
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
針對每個「post」,使用 ArticleItem 檢視畫面,將「Text」元件取代為新匯入的「NewsCard」。
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
我們還可以對底端的語音新聞進行相同操作。同樣在
HomeScreen.kt
中,向下捲動至約第 260 行的「PostListAudioStories」。@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
針對每個貼文,使用 AudioItem 檢視畫面,將「Text」 元件取代為新匯入的「NewsCard」。
@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
按一下 即可再次建構專案,並在預覽中檢視結果 (分割畫面檢視):
下一步
接下來,我們會在應用程式上新增一些互動。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 在設計中新增互動處理常式
- 處理設計變化版本
- 在 Android Studio 中將設計轉換為程式碼