Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Einführung
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.
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).
Klicken Sie im Relay for Figma-Plug-in auf + und wählen Sie image-content
Drop-down-Menü und ändere den Namen in "thumbnail".
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“.
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“.
Benannte Version speichern
Markieren wir nun diese Version als bereit für den Import in Code.
Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
Klicken Sie auf Mit Entwickler teilen.
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
Klicken Sie auf Speichern.
Komponente in Android Studio aktualisieren
Aktualisieren wir die NewsCard-Komponente:
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.
Klicken Sie auf , um Ihr Projekt zu erstellen. Dadurch wird
Generieren Sie mithilfe des aktualisierten UI-Pakets eine aktualisierte Version der zusammensetzbaren Funktion.
Code.
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>
Als Nächstes integrieren wir die NewsCard-Komponente in den Startbildschirm.
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
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(...)
...
Ersetzen Sie für postTop die Komponente Text durch die neu importierte
NewsCard über die Ansicht HeroItem.
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(...)
...
Ersetzen Sie für jeden Beitrag die Komponente Text durch die neu importierte
NewsCard über die AudioItem-Ansicht.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.