کنترل کننده های تعامل را به طرح ها اضافه کنید

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

کنترل‌کننده‌های تعامل راهی برای تعیین محل تعامل با یک مؤلفه (ضربه زدن، دو بار ضربه زدن و غیره) فراهم می‌کنند. کنترل کننده های تعاملی را می توان به هر لایه داخل یک طرح اضافه کرد.

کنترل کننده ها را اضافه کنید

کنترل کننده های تعامل را می توان به هر لایه اضافه کرد. این به طراحان اجازه می دهد تا مشخص کنند کدام بخش از مؤلفه تعاملی است.

1. نوع hero-item (فریم) را انتخاب کنید، روی + در کنار پارامتر کلیک کنید و tap-handler را انتخاب کنید تا یک کنترل کننده تعامل اضافه شود. این به توسعه دهندگان اجازه می دهد تا کدی بنویسند که به ضربه زدن کاربر روی کارت واکنش نشان می دهد.

   

2. مرحله قبل را با لایه نماد منو در نوع آیتم صوتی تکرار کنید. این به توسعه دهندگان اجازه می دهد تا زمانی که کاربر روی نماد منو ضربه می زند، یک منو را نمایش دهند.

   

3. اگر کنترل کننده روی منو ضربه خورده را انتخاب کنید، متوجه خواهید شد که فقط برای نوع مورد صوتی اعمال می شود، زیرا سایر انواع نماد منو ندارند. با این حال، روی NewsCard ضربه زده شده برای هر سه نوع اعمال می شود. این به این معنی است که شما می توانید یک کنترلر (در کد) برای اجرا در هنگام ضربه زدن به هر یک از سه نوع ارائه دهید و تکرار کد و پارامترها را حذف کنید. نحوه عملکرد آن را با جزئیات بیشتر در بخش Update در بخش Android Studio خواهیم دید.

   

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

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

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

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

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

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

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

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

5. CMD-L را در MAC، CTRL-L را در ویندوز فشار دهید تا پیوند مؤلفه را در کلیپ بورد کپی کنید.

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

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

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

   

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

   

3. به app/java/com/example/hellonews/newscard/NewsCard.kt نگاه کنید و ببینید که کنترل‌کننده‌های تعامل به عنوان پارامتر به NewsCard اضافه شده‌اند ( onNewsCardTapped ، onMenuTapped ).

   // Design to select for NewsCard
   enum class View {
     HeroItem, ArticleItem, AudioItem
   }
   
   /**
   *   Displays a summary of a news article.
   *
   *   This composable was generated from the UI package 'news_card'.
   *   Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
     modifier: Modifier = Modifier,
     view: View = View.HeroItem,
     thumbnail: Painter = EmptyPainter(),
     headline: String = "",
     author: String = "",
     date: String = "",
     onNewsCardTapped: () -> Unit = {},
     onMenuTapped: () -> Unit = {}
   ) {
   ...
   

ادغام در برنامه

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

1. در app/java/com/example/hellonews/ui/home/HomeScreen.kt ، به سمت PostListArticleStories ، در اطراف خط 175 بروید.

   ...
   @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(...)
   ...
   

2. برای postTop ، کنترل کننده‌هایی را برای onNewsCardTapped اضافه کنید. createOnTapped یک گفتگو با پارامترهای آن به عنوان عنوان و بدنه باز می کند.

   @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,
             onNewsCardTapped = createOnTapped("Card Tapped", postTop.title),
             view = View.HeroItem
         )
         Spacer(modifier = Modifier.size(12.dp))
         ...
     }
   }
   

3. برای هر پست، کنترل‌کننده‌هایی را برای onNewsCardTapped اضافه کنید.

   @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,
                 onNewsCardTapped = createOnTapped("Card Tapped", post.title),
                 view = View.ArticleItem
             )
             Spacer(modifier = Modifier.size(12.dp))
         }
     }
   }
   

4. هنوز در 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(...)
   ...
   

5. برای هر پست، کنترل‌کننده‌هایی را برای onNewsCardTapped اضافه کنید. از آنجایی که نوع Audio دارای یک منو است، createOnTapped به onMenuTapped اختصاص دهید.

   @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,
                 onNewsCardTapped = createOnTapped("Card Tapped", post.title),
                 onMenuTapped = createOnTapped("Menu Tapped", post.title),
                 view = View.AudioItem
             )
             Spacer(modifier = Modifier.size(12.dp))
         }
     }
   }
   

6. برای ساختن برنامه و اجرای آن در شبیه ساز، روی ▶ کلیک کنید.

   

   

   هورا! شما با ویژگی های پیشرفته Relay آشنا شده اید.

می توانید در مورد نحوه کار با Relay در بخش Relay Workflow اطلاعات بیشتری کسب کنید. همچنین مایلیم اگر بازخوردی دارید از شما بشنویم.