Inhaltsparameter

Einführung

NewsCard mit weiteren Parametern aktualisieren

Der Inhalt der meisten UI-Designs ist nicht statisch – sie ändern sich je nach Daten. In diesem Abschnitt fügen wir unserem Design über Inhaltsparameter Daten hinzu. ermöglichen es Designschaffenden festzulegen, welcher Teil eines Designs mit Daten gefüllt werden soll.

Parameter in Figma hinzufügen

Lassen Sie uns Inhaltsparameter zu unserer Komponente hinzufügen.

  1. Wechseln Sie zu Figma. Wählen Sie in NewsCardTutorial die Ebene thumbnail image in die Hero-item-Variante („⌘ + Klick auf dem Mac oder Strg + Klick auf Windows und Linux auf der Bild).

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

    Das Figma-Plug-in mit dem Parameter „thumbnail“ wurde hinzugefügt.

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

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

  4. Klicken Sie im Plug-in auf den Parameter „thumbnail“. Beachten Sie, dass in jeder Komponentenvariante ist die Miniaturansichtsebene ein Bild und wird ausgewählt.

    Weil die drei Ebenen denselben Namen („Miniaturansicht“) haben und dieselben Daten sind type (image-content) enthält, wurde der Content-Parameter in allen drei Varianten. Das bedeutet, dass ein Parameter dieselben Daten an mehrere Varianten. 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 nun diese Version 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: Inhaltsparameter wurden der Karte hinzugefügt

  4. Klicken Sie auf Speichern.

Komponente in Android Studio aktualisieren

Aktualisieren wir die NewsCard-Komponente:

  1. Achten Sie in Android Studio darauf, dass sich das Projekttool in der Android-Ansicht befindet. Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/news_card/ und klicken Sie auf UI aktualisieren. Paket.

    Option „UI Package“ im Kontextmenü aktualisieren

  2. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt zu erstellen. Dadurch wird Generieren Sie mithilfe des aktualisierten UI-Pakets eine aktualisierte Version der zusammensetzbaren Funktion. Code.

    Schaltfläche „Build“ in der Symbolleiste

  3. Wenn Sie sich app/java (generated)/com/example/hellonews/newscard/NewsCard.kt ansehen, sehen Sie, dass die Hinzugefügte Inhaltsparameter (thumbnail, headline, author, date) der zusammensetzbaren Parameter in der Parameterliste.

    // 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 die App einbinden

Werfen wir einen Blick zurück auf unsere App, deren Benutzeroberfläche wir noch nicht geändert haben. Es enthält eine Liste mit regulären Nachrichten und einer Liste von Audiobeiträgen. Das sind die beiden müssen wir unsere NewsCard-Komponente zu folgenden Komponenten hinzufügen:

  • Die zusammensetzbare Funktion PostListArticleStories ist für die regulären Nachrichten von Geschichten.
  • Der Parameter postTop steht für die Top-Story.
  • Der Parameter posts steht für die übrigen Artikel.
  • Die zusammensetzbare Funktion PostListAudioStories rendert die Audionachrichtenartikel. <ph type="x-smartling-placeholder">
    </ph> Die Benutzeroberfläche der App mit drei Abschnitten
    Als Nächstes integrieren wir die NewsCard-Komponente in den Startbildschirm.

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

    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 durch die neu importierte NewsCard über die Ansicht 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. Ersetzen Sie für jeden post die Textkomponente durch die neu importierte NewsCard über 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. Dasselbe können wir für die Hörbücher unten tun. Noch in HomeScreen.kt, scrolle nach unten zu PostListAudioStories (ca. 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 Beitrag die Komponente Text durch die neu importierte NewsCard über die AudioItem-Ansicht.

    @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 das Ergebnis in anzuzeigen. Vorschau ansehen (Splitscreen-Ansicht):

    Vorschau von NewsApp

Nächster Schritt

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