內容參數

簡介

使用更多參數更新 NewsCard

大部分 UI 設計的內容都是靜態的，並且因資料而有所差異。在本節中，我們將藉助內容參數在設計中新增資料，這可讓設計人員指明應在設計中的哪些部分填入資料

在 Figma 中新增參數

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

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

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

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

  3. 選取「headline text」圖層，然後按一下「+」並選取 text-content。在 hero-item 變化版本中，針對「author」和「date」文字圖層重複上述步驟。分別命名為「headline」、「author」和「date」。

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

  4. 按一下外掛程式中的縮圖參數。請注意，在每個元件變化版本中，縮圖圖層是一張圖片，並且已選取。

    由於這三個圖層的名稱相同 (即「thumbnail」)，且資料類型 (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 Package」。

    在內容選單中更新 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，請使用 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))
        ...
    }
}

  4. 針對每個「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))
        }
    }
}

  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. 針對每個貼文，使用 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))
        }
    }
}

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

    NewsApp 預覽

下一步

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