پارامترهای محتوا

مقدمه

محتوای اکثر طراحی‌های رابط کاربری ثابت نیستند - بسته به داده‌ها تغییر می‌کنند. در این بخش، داده‌ها را از طریق پارامترهای محتوا به طرح خود اضافه می‌کنیم، که به طراحان اجازه می‌دهد مشخص کنند کدام قسمت از طرح باید با داده پر شود.

پارامترها را در Figma اضافه کنید

بیایید پارامترهای محتوا را به کامپوننت خود اضافه کنیم.

1. به Figma بروید. در NewsCardTutorial، لایه تصویر کوچک را در نوع hero-item انتخاب کنید (⌘ + روی Mac یا Ctrl + کلیک بر روی Windows و Linux روی تصویر).

2. در پلاگین Relay for Figma، روی + کلیک کنید و image-content را در منوی کشویی انتخاب کنید، سپس نام را به "Thumbnail" تغییر دهید.

   

3. لایه متن عنوان را انتخاب کنید، روی + کلیک کنید و text-content را انتخاب کنید. همین مراحل را برای نویسنده تکرار کنید و لایه‌های متن را در نوع hero-item تاریخ‌گذاری کنید . آنها را به ترتیب «سرخط»، «نویسنده» و «تاریخ» نام ببرید.

   

4. بر روی پارامتر تصویر کوچک در افزونه کلیک کنید. توجه داشته باشید که در هر گونه جزء، لایه بندانگشتی یک تصویر است و انتخاب شده است.

   از آنجایی که سه لایه نام یکسانی دارند («تصویر کوچک») و نوع داده یکسانی (تصویر-محتوا) هستند، پارامتر محتوا در هر سه نوع به آن متصل شده است. این بدان معنی است که یک پارامتر داده های یکسانی را به چندین نوع می دهد. این برای پارامترهای عنوان، نویسنده و تاریخ نیز صادق است.

   

ذخیره نسخه نامگذاری شده

بیایید اکنون این نسخه را به عنوان آماده برای وارد شدن به کد علامت گذاری کنیم.

1. افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.

2. روی اشتراک گذاری با توسعه دهنده کلیک کنید.

3. در صفحه اشتراک‌گذاری با توسعه‌دهنده ، یک نام و توضیح برای نسخه وارد کنید.

   عنوان مثال : پارامترهای اضافه شده

   توضیح مثال : پارامترهای محتوا به کارت اضافه شده است

4. روی ذخیره کلیک کنید.

کامپوننت را در اندروید استودیو به روز کنید

بیایید مولفه NewsCard را به روز کنیم:

1. در Android Studio، مطمئن شوید که پنجره ابزار Project در نمای Android باشد. سپس روی app/ui-packages/news_card/ کلیک راست کرده و روی Update UI Package کلیک کنید.

   

2. کلیک کنید برای ساخت پروژه خود این بسته UI به روز شده را می گیرد و یک نسخه به روز از کد قابل ترکیب ایجاد می کند.

   

3. اگر به app/java (generated)/com/example/hellonews/newscard/NewsCard.kt نگاه کنید، خواهید دید که پارامترهای محتوایی که اضافه کردیم ( thumbnail ، headline ، author ، date ) در لیست پارامترهای composable ما ظاهر می‌شوند.

   // 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 نشان دهنده داستان برتر است.
• پارامتر پست ها بقیه داستان ها را نشان می دهد.
• PostListAudioStories قابل نوشتن داستان های خبری صوتی را ارائه می دهد.

  

  حالا بیایید جزء NewsCard خود را در صفحه اصلی ادغام کنیم.

1. در app/java/com/example/hellonews/ui/home/HomeScreen.kt ، موارد وارداتی زیر را در کنار سایر خطوط واردات در بالای فایل اضافه کنید: import 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 ، با استفاده از نمای HeroItem ، مولفه Text را با 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))
           ...
       }
   }
   

4. برای هر پست ، با استفاده از نمای ArticleItem ، مولفه Text را با NewsCard تازه وارد شده جایگزین کنید.

   @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. برای هر پست، با استفاده از نمای AudioItem، مولفه Text را با 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))
           }
       }
   }
   

7. کلیک کنید برای ساخت دوباره پروژه خود و مشاهده نتیجه در پیش نمایش (نمایش صفحه تقسیم شده):

   

مرحله بعدی

در مرحله بعد، برخی از تعاملات را به برنامه خود اضافه می کنیم.