Einführung
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.
- 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.
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".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“.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“.
Benannte Version speichern
Markieren wir diese Version nun 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: Der Karte wurden Inhaltsparameter hinzugefügt.
Klicken Sie auf Speichern.
Komponente in Android Studio aktualisieren
Aktualisieren wir die Komponente NewsCard:
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.Klicken Sie auf , um Ihr Projekt zu erstellen. Dadurch wird aus dem aktualisierten UI-Paket eine aktualisierte Version des zusammensetzbaren Codes generiert.
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. Binden wir jetzt die Komponente NewsCard in den Startbildschirm ein.
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: importcom.example.hellonews.newscard.NewsCard
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 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)) ... } }
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)) } } }
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(...) ...
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)) } } }
Klicken Sie auf , um Ihr Projekt noch einmal zu erstellen und sich das Ergebnis in der Vorschau anzusehen (Splitscreen-Ansicht):
Nächster Schritt
Als Nächstes fügen wir unserer App einige Interaktionen hinzu.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Interaktions-Handler zu Designs hinzufügen
- Umgang mit Designvarianten
- Designs in Android Studio in Code konvertieren