מבוא
![עדכון NewsCard בפרמטרים נוספים](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?hl=he)
התוכן של רוב העיצובים של ממשק המשתמש אינו סטטי – הוא משתנה בהתאם . בקטע הזה אנחנו מוסיפים נתונים לעיצוב שלנו באמצעות פרמטרים של תוכן, לאפשר למעצבים לציין איזה חלק בעיצוב צריך למלא בנתונים
הוספת פרמטרים ב-Figma
עכשיו נוסיף פרמטרים של תוכן לרכיב שלנו.
- מעבר אל Figma. ב-NewsCardדק, בוחרים בשכבה תמונה ממוזערת את הווריאנט של הפריט הראשי (⌘ + לחיצה ב-Mac, או Ctrl + לחיצה ב-Windows וב-Linux תמונה).
בפלאגין Relay for Figma, לוחצים על + ובוחרים
image-content
בתפריט הנפתח, ולאחר מכן משנים את השם ל'תמונה ממוזערת'.בוחרים את שכבת טקסט הכותרת, לוחצים על + ובוחרים באפשרות
text-content
. חזרה אותם השלבים של המחבר/ת ושכבות הטקסט לתאריך בפריט הראשי הווריאנט. נותנים להם את השם 'headline' (כותרת), 'author' (מחבר) ו-'date' (תאריך) בהתאמה.לוחצים על פרמטר התמונה הממוזערת בפלאגין. שימו לב שבכל פעם של הווריאנט של הרכיב, שכבת התמונה הממוזערת היא תמונה ונבחרה.
כי לשלוש השכבות יש את אותו השם ('תמונה ממוזערת') והן אותם נתונים type (image-content), הפרמטר content חובר אליו באופן כללי שלוש וריאציות. כלומר, פרמטר אחד נותן את אותם נתונים לכמה וריאציות של אותו מודל. הדבר נכון גם לגבי הפרמטרים של כותרת, מחבר ותאריך.
שמירת גרסה בעלת שם
עכשיו נסמן את הגרסה הזו כמוכנה לייבוא אל הקוד.
פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.
לוחצים על שיתוף עם המפתח.
במסך שיתוף עם המפתח, מזינים שם ותיאור של הגרסה.
כותרת לדוגמה: פרמטרים שנוספו
תיאור לדוגמה: נוספו פרמטרים של תוכן לכרטיס
לוחצים על שמירה.
עדכון הרכיב ב-Android Studio
אנחנו נעדכן את רכיב NewsCard:
ב-Android Studio, מוודאים שהחלון של הכלי 'פרויקט' נמצא בתצוגת Android. לוחצים לחיצה ימנית על
app/ui-packages/news_card/
ואז לוחצים על Update UI חבילה.לוחצים על
כדי לבנות את הפרויקט. הפעולה הזו תגרור לוקחים את חבילת ממשק המשתמש המעודכנת ויוצרים גרסה מעודכנת של התוכן הקומפוזבילי
אם תסתכל על
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 = "" ) { ...
שילוב באפליקציה
בואו נסתכל על האפליקציה שלנו, שממשק המשתמש שלה עדיין לא שינינו. הוא מכיל רשימה של כתבות חדשותיות רגילות ורשימה של כתבות באודיו. אלה שתי הווריאציות של תכנים קומפוזביליים, עלינו להוסיף את רכיב NewsCard שלנו:
- התוכן הקומפוזבילי PostListArticleStories אחראי לחדשות הרגילות סיפורים.
- הפרמטר postTop מייצג את הכתבה המובילה.
- הפרמטר posts מייצג את שאר הכתבות.
- התוכן הקומפוזבילי PostListAudioStories מעבד את הכתבות החדשותיות באודיו.
ב-
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, צריך להוסיף את הפרטים הבאים מופיע ליד שורות הייבוא האחרות, ליד החלק העליון של הקובץ: ייבואcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
עדיין נמצאים ב-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(...) ...
ב-postTop, מחליפים את הרכיב Text (טקסט) ברכיב החדש שיובא NewsCard, באמצעות התצוגה 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)) ... } }
בכל פוסט, צריך להחליף את רכיב הטקסט ברכיב החדש שיובא NewsCard, באמצעות התצוגה 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)) } } }
נוכל לעשות את אותו הדבר לגבי הסטוריז באודיו שבתחתית המסך. עדיין ב?
HomeScreen.kt
, גוללים למטה אל PostListAudioStories, סביב שורה 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(...) ...
בכל פוסט, מחליפים את רכיב הטקסט ברכיב החדש שיובא NewsCard, באמצעות תצוגת AudioItem.
@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)) } } }
אפשר ללחוץ על
כדי לבנות את הפרויקט שוב ולצפות בתוצאה התצוגה המקדימה (תצוגת מסך מפוצל):
השלב הבא
בשלב הבא נוסיף כמה אינטראקציות לאפליקציה.
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- הוספת רכיבי handler של אינטראקציה לעיצובים
- טיפול בווריאציות של עיצוב
- המרת העיצובים לקוד ב-Android Studio