در این بخش، یاد می گیریم که چگونه از طریق کنترلرهای تعاملی، تعاملات را به طراحی خود اضافه کنیم.
![NewsApp با تعامل ضربه بزنید](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/interaction-handlers/newsapp-with-tap-interaction.png?hl=fa)
کنترلکنندههای تعامل راهی برای تعیین محل تعامل با یک مؤلفه (ضربه زدن، دو بار ضربه زدن و غیره) فراهم میکنند. کنترل کننده های تعاملی را می توان به هر لایه داخل یک طرح اضافه کرد.
کنترل کننده ها را اضافه کنید
کنترل کننده های تعامل را می توان به هر لایه اضافه کرد. این به طراحان اجازه می دهد تا مشخص کنند کدام بخش از مؤلفه تعاملی است.
نوع hero-item (فریم) را انتخاب کنید، روی + در کنار پارامتر کلیک کنید و
tap-handler
را انتخاب کنید تا یک کنترل کننده تعامل اضافه شود. این به توسعه دهندگان اجازه می دهد تا کدی بنویسند که به ضربه زدن کاربر روی کارت واکنش نشان می دهد.مرحله قبل را با لایه نماد منو در نوع آیتم صوتی تکرار کنید. این به توسعه دهندگان اجازه می دهد تا زمانی که کاربر روی نماد منو ضربه می زند، یک منو را نمایش دهند.
اگر کنترل کننده روی منو ضربه خورده را انتخاب کنید، متوجه خواهید شد که فقط برای نوع مورد صوتی اعمال می شود، زیرا سایر انواع نماد منو ندارند. با این حال، روی NewsCard ضربه زده شده برای هر سه نوع اعمال می شود. این به این معنی است که شما می توانید یک کنترلر (در کد) برای اجرا در هنگام ضربه زدن به هر یک از سه نوع ارائه دهید و تکرار کد و پارامترها را حذف کنید. نحوه عملکرد آن را با جزئیات بیشتر در بخش Update در بخش Android Studio خواهیم دید.
ذخیره نسخه نامگذاری شده
بیایید اکنون این نسخه را به عنوان آماده برای وارد شدن به کد علامت گذاری کنیم.
افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.
روی اشتراک گذاری با توسعه دهنده در گوشه سمت راست پایین کادر گفتگو کلیک کنید.
در صفحه اشتراکگذاری با برنامهنویس ، یک نام و توضیح برای نسخه وارد کنید.
عنوان مثال : تعاملات اضافه شده
توضیح مثال : دو کنترل کننده تعامل به کارت ها اضافه شده است
روی ذخیره کلیک کنید.
CMD-L را در MAC، CTRL-L را در ویندوز فشار دهید تا پیوند مؤلفه را در کلیپ بورد کپی کنید.
کامپوننت را در اندروید استودیو به روز کنید
بیایید اکنون مؤلفه NewsCard را به روز کنیم:
در اندروید استودیو، مطمئن شوید که پنجره ابزار Project در نمای اندروید باشد. سپس روی
app/ui-packages/news_card/
کلیک راست کرده و در نزدیکی پایین منوی زمینه، روی Update UI Package کلیک کنید.کلیک کنید
برای ساخت پروژه خود این بسته UI به روز شده را می گیرد و یک نسخه به روز از کد قابل ترکیب ایجاد می کند.
به
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 = {} ) { ...
ادغام در برنامه
حالا اجازه دهید چند کنترل کننده به تعاملات خود اضافه کنیم.
در
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(...) ...
برای
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)) ... } }
برای هر پست، کنترلکنندههایی را برای
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)) } } }
هنوز در
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(...) ...
برای هر پست، کنترلکنندههایی را برای
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)) } } }
برای ساختن برنامه و اجرای آن در شبیه ساز، روی ▶ کلیک کنید.
هورا! شما با ویژگی های پیشرفته Relay آشنا شده اید.
می توانید در مورد نحوه کار با Relay در بخش Relay Workflow اطلاعات بیشتری کسب کنید. همچنین مایلیم اگر بازخوردی دارید از شما بشنویم.
{% کلمه به کلمه %}برای شما توصیه می شود
- توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
- پارامترهای محتوا
- انواع طراحی هندلینگ