פרמטרים של תוכן

מבוא

התוכן של רוב העיצובים של ממשק המשתמש אינו סטטי – הוא משתנה בהתאם . בקטע הזה אנחנו מוסיפים נתונים לעיצוב שלנו באמצעות פרמטרים של תוכן, לאפשר למעצבים לציין איזה חלק בעיצוב צריך למלא בנתונים

הוספת פרמטרים ב-Figma

עכשיו נוסיף פרמטרים של תוכן לרכיב שלנו.

1. מעבר אל Figma. ב-NewsCardדק, בוחרים בשכבה תמונה ממוזערת את הווריאנט של הפריט הראשי (⌘ + לחיצה ב-Mac, או Ctrl + לחיצה ב-Windows וב-Linux תמונה).

2. בפלאגין Relay for Figma, לוחצים על + ובוחרים image-content בתפריט הנפתח, ולאחר מכן משנים את השם ל'תמונה ממוזערת'.

   

3. בוחרים את שכבת טקסט הכותרת, לוחצים על + ובוחרים באפשרות text-content. חזרה אותם השלבים של המחבר/ת ושכבות הטקסט לתאריך בפריט הראשי הווריאנט. נותנים להם את השם 'headline' (כותרת), 'author' (מחבר) ו-'date' (תאריך) בהתאמה.

   

4. לוחצים על פרמטר התמונה הממוזערת בפלאגין. שימו לב שבכל פעם של הווריאנט של הרכיב, שכבת התמונה הממוזערת היא תמונה ונבחרה.

   כי לשלוש השכבות יש את אותו השם ('תמונה ממוזערת') והן אותם נתונים type (image-content), הפרמטר content חובר אליו באופן כללי שלוש וריאציות. כלומר, פרמטר אחד נותן את אותם נתונים לכמה וריאציות של אותו מודל. הדבר נכון גם לגבי הפרמטרים של כותרת, מחבר ותאריך.

   

שמירת גרסה בעלת שם

עכשיו נסמן את הגרסה הזו כמוכנה לייבוא אל הקוד.

1. פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.

2. לוחצים על שיתוף עם המפתח.

3. במסך שיתוף עם המפתח, מזינים שם ותיאור של הגרסה.

   כותרת לדוגמה: פרמטרים שנוספו

   תיאור לדוגמה: נוספו פרמטרים של תוכן לכרטיס

4. לוחצים על שמירה.

עדכון הרכיב ב-Android Studio

אנחנו נעדכן את רכיב NewsCard:

1. ב-Android Studio, מוודאים שהחלון של הכלי 'פרויקט' נמצא בתצוגת Android. לוחצים לחיצה ימנית על app/ui-packages/news_card/ ואז לוחצים על Update UI חבילה.

   

2. לוחצים על כדי לבנות את הפרויקט. הפעולה הזו תגרור לוקחים את חבילת ממשק המשתמש המעודכנת ויוצרים גרסה מעודכנת של התוכן הקומפוזבילי

   

3. אם תסתכל על 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 מעבד את הכתבות החדשותיות באודיו.

  

  עכשיו נשלב את הרכיב NewsCard במסך הבית.

1. ב-app/java/com/example/hellonews/ui/home/HomeScreen.kt, צריך להוסיף את הפרטים הבאים מופיע ליד שורות הייבוא האחרות, ליד החלק העליון של הקובץ: ייבוא com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. עדיין נמצאים ב-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(...)
   ...
   

3. ב-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))
           ...
       }
   }
   

4. בכל פוסט, צריך להחליף את רכיב הטקסט ברכיב החדש שיובא 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))
           }
       }
   }
   

5. נוכל לעשות את אותו הדבר לגבי הסטוריז באודיו שבתחתית המסך. עדיין ב? 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(...)
   ...
   

6. בכל פוסט, מחליפים את רכיב הטקסט ברכיב החדש שיובא 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))
           }
       }
   }
   

7. אפשר ללחוץ על כדי לבנות את הפרויקט שוב ולצפות בתוצאה התצוגה המקדימה (תצוגת מסך מפוצל):

   

השלב הבא

בשלב הבא נוסיף כמה אינטראקציות לאפליקציה.

מומלץ עבורך

• הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
• הוספת רכיבי handler של אינטראקציה לעיצובים
• טיפול בווריאציות של עיצוב
• המרת העיצובים לקוד ב-Android Studio