內容參數

簡介

使用更多參數更新 NewsCard

大部分 UI 設計的內容都是靜態的，並且會根據 資料。在本節中，我們將透過內容參數在設計中加入資料， 讓設計人員指定應在設計中的哪些部分填入資料

在 Figma 中新增參數

現在，我們在元件中新增內容參數。

  1. 切換至 Fitbit。在 NewsCardTutorial 中，選取「thumbnail image」圖層 hero-item 子類 (在 Mac 上為 ⌘ + 點選，在 Windows 和 Linux 上為 Ctrl + 點選) 圖片)。

  2. 在 Relay for Figma 外掛程式中，按一下 +，然後選取 image-content 下拉式選單，將名稱變更為「縮圖」。

    已新增含「thumbnail」參數的 Figma 外掛程式

  3. 選取「headline text」圖層，然後按一下「+」並選取 text-content。重複播放 hero-item 中 author 和 date 文字圖層的步驟 變數。分別命名為「headline」、「author」和「date」。

    已新增含「headline」、「author」和「date」參數的 Figma 外掛程式

  4. 按一下外掛程式中的縮圖參數。請注意 元件子類，縮圖圖層是圖片，並且已選取。

    這三個圖層的名稱相同 (即「縮圖」)，而且資料都相同 類型 (image-content) 則代表內容參數已全部連結至 三個變化版本這意味著一個參數會將相同資料提供給多個 子類標題、作者和日期參數也是如此。

    已選取含全部三個縮圖圖層的 Figma 外掛程式

儲存已命名版本

現在，讓我們將這個版本標示為準備就緒，以便匯入程式碼中。

  1. 開啟 Figma Relay 外掛程式 (如果尚未開啟)。

  2. 按一下「與開發人員分享」。

  3. 在「分享給開發人員」畫面中，輸入版本的名稱和說明。

    標題範例：新增參數

    說明範例：在資訊卡中新增內容參數

  4. 按一下 [儲存]。

在 Android Studio 中更新元件

更新 NewsCard 元件：

  1. 在 Android Studio 中，確認「Project」工具視窗位於「Android view」。 接著，在 app/ui-packages/news_card/ 上按一下滑鼠右鍵，然後按一下「Update UI」 套件。

    在內容選單中更新 UI 套件選項

  2. 按一下 「Make Project」按鈕 圖示來建構專案。這將 使用更新後的 UI 套件，產生可組合函式的更新版本 再也不是件繁重乏味的工作

    工具列中的建構按鈕

  3. 當您查看 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 可組合項會轉譯語音新聞。
    應用程式 UI 包含三個部分
    現在，我們將 NewsCard 元件整合至主畫面。

  1. 在 app/java/com/example/hellonews/ui/home/HomeScreen.kt 中新增以下內容 匯入內容 (位於檔案頂端其他匯入行的旁邊)： 匯入 com.example.hellonews.newscard.NewsCard

    import com.example.hellonews.newscard.View

  2. 同樣在 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(...)
...

  3. 針對 postTop，請將「Text」元件取代為新匯入的元件 NewsCard，使用 HeroItem 檢視畫面。

    @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))
        ...
    }
}

  4. 將每個 post 的「Text」元件取代為新匯入的「Text」元件 NewsCard，使用 ArticleItem 檢視畫面。

    @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))
        }
    }
}

  5. 我們還可以對底端的語音新聞進行相同操作。仍在 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(...)
...

  6. 將每則貼文的「文字」元件替換成新匯入的元件 NewsCard，使用 AudioItem 檢視畫面。

    @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))
        }
    }
}

  7. 按一下 「Make Project」按鈕 即可再次建構專案，並查看結果 預覽畫面 (分割畫面檢視)：

    NewsApp 預覽

下一步

接下來，我們會在應用程式上新增一些互動。