Inhaltsparameter

Einführung

NewsCard mit mehr Parametern aktualisieren

Der Inhalt der meisten UI-Designs ist nicht statisch – er ändert sich je nach Daten. In diesem Abschnitt fügen wir unserem Design über Inhaltsparameter Daten hinzu, damit Designschaffende

Parameter in Figma hinzufügen

Jetzt fügen wir unserer Komponente Inhaltsparameter hinzu.

  1. Wechseln Sie zu Figma. Wählen Sie in NewsCardTutorial die Ebene Thumbnail-Bild in der Hero-item-Variante aus. Drücken Sie dazu ⌘ + Klick auf einem Mac oder Strg + Klick auf Windows und Linux.

  2. Klicken Sie im Relay for Figma-Plug-in auf +, wählen Sie im Drop-down-Menü image-content aus und ändern Sie den Namen in "thumbnail".

    Das Figma-Plug-in mit dem Parameter „thumbnail“

  3. Wählen Sie die Ebene für den Anzeigentitel aus, klicken Sie auf „+“ und wählen Sie text-content aus. Wiederholen Sie dieselben Schritte für die Textebenen author und date in der Hero-Artikel-Variante. Nennen Sie sie „Überschrift“, „Autor“ bzw. „Datum“.

    Das Figma-Plug-in mit den hinzugefügten Parametern „headline“, „author“ und „date“

  4. Klicken Sie im Plug-in auf den Parameter „Miniaturansicht“. In jeder Komponentenvariante ist die Miniaturansichtsebene ein Bild und ist ausgewählt.

    Da die drei Ebenen denselben Namen („thumbnail“) und denselben Datentyp („image-content“) haben, wurde der Inhaltsparameter in allen drei Varianten damit verbunden. Das bedeutet, dass ein Parameter mehreren Varianten dieselben Daten zur Verfügung stellt. Dies gilt auch für die Parameter „headline“, „author“ und „date“.

    Das Figma-Plug-in mit allen drei Thumbnail-Ebenen

Benannte Version speichern

Markieren wir diese Version nun als bereit für den Import in Code.

  1. Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.

  2. Klicken Sie auf Mit Entwickler teilen.

  3. Geben Sie auf dem Bildschirm Für Entwickler freigeben einen Namen und eine Beschreibung für die Version ein.

    Beispieltitel: Hinzugefügte Parameter

    Beispielbeschreibung: Der Karte wurden Inhaltsparameter hinzugefügt.

  4. Klicken Sie auf Speichern.

Komponente in Android Studio aktualisieren

Aktualisieren wir die Komponente NewsCard:

  1. Prüfen Sie in Android Studio, ob sich das Fenster „Project Tool“ in der Android-Ansicht befindet. Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/news_card/ und wählen Sie Update UI Package (UI-Paket aktualisieren) aus.

    Option „UI-Paket aktualisieren“ im Kontextmenü

  2. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt zu erstellen. Dadurch wird aus dem aktualisierten UI-Paket eine aktualisierte Version des zusammensetzbaren Codes generiert.

    Schaltfläche „Build“ in der Symbolleiste

  3. In app/java (generated)/com/example/hellonews/newscard/NewsCard.kt sehen Sie, dass die von uns hinzugefügten Inhaltsparameter (thumbnail, headline, author, date) in der Parameterliste der zusammensetzbaren Funktion aufgeführt sind.

    // 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 = ""
) {
...

In App integrieren

Sehen wir uns noch einmal die App an, deren Benutzeroberfläche wir noch nicht verändert haben. Sie enthält eine Liste regelmäßiger Nachrichten und eine Liste mit Audiobeiträgen. Dies sind die beiden zusammensetzbaren Funktionen, denen wir die Komponente NewsCard hinzufügen müssen:

  • Die zusammensetzbare Funktion PostListArticleStories ist für die regulären Nachrichten verantwortlich.
  • Der Parameter postTop steht für die Top-Story.
  • Der Parameter posts repräsentiert den Rest der Stories.
  • Die zusammensetzbare Funktion PostListAudioStories rendert die Audio-Nachrichtenmeldungen.
    Die App-Benutzeroberfläche mit drei Abschnitten
    Binden wir jetzt die Komponente NewsCard in den Startbildschirm ein.

  1. Fügen Sie in app/java/com/example/hellonews/ui/home/HomeScreen.kt neben den anderen Importzeilen am Anfang der Datei die folgenden Importe hinzu: import com.example.hellonews.newscard.NewsCard

    import com.example.hellonews.newscard.View

  2. Scrollen Sie auf HomeScreen.kt nach unten zu 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. Ersetzen Sie für postTop die Komponente Text mithilfe der Ansicht HeroItem durch die neu importierte 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. Ersetzen Sie für jeden Beitrag die Textkomponente durch die neu importierte NewsCard. Verwenden Sie dazu die Ansicht 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. Auf die gleiche Weise können wir die Audiogeschichten am unteren Seitenrand verwenden. Scrollen Sie in HomeScreen.kt nach unten zu PostListAudioStories um Zeile 260.

    @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. Ersetzen Sie für jeden Post in der Ansicht „AudioItem“ die Komponente Text durch die neu importierte 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. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt noch einmal zu erstellen und sich das Ergebnis in der Vorschau anzusehen (Splitscreen-Ansicht):

    Vorschau von NewsApp

Nächster Schritt

Als Nächstes fügen wir unserer App einige Interaktionen hinzu.