इस सेक्शन में हम जानेंगे कि कैसे अपने डिज़ाइन में, इंटरैक्शन हैंडलर.
![टैप इंटरैक्शन वाला NewsApp](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/interaction-handlers/newsapp-with-tap-interaction.png?authuser=4&hl=hi)
इंटरैक्शन हैंडलर यह तय करने का तरीका बताते हैं कि कोई कॉम्पोनेंट कहां हो सकता है इंटरैक्शन किया गया (टैप किया गया, दो बार टैप किया गया वगैरह). इंटरैक्शन हैंडलर जोड़े जा सकते हैं की किसी भी लेयर पर बना सकते हैं.
हैंडलर जोड़ें
इंटरैक्शन हैंडलर को किसी भी लेयर में जोड़ा जा सकता है. इससे डिज़ाइनर को यह तय करने में मदद मिलती है कि कॉम्पोनेंट के कौनसे हिस्से इंटरैक्टिव हैं.
हीरो-आइटम वैरिएंट (फ़्रेम) चुनें, इसके आगे + पर क्लिक करें इंटरैक्शन हैंडलर जोड़ने के लिए पैरामीटर और
tap-handler
चुनें. यह डेवलपर को ऐसे कोड लिखने की अनुमति मिलती है जो उपयोगकर्ता के कार्ड पर टैप करने पर प्रतिक्रिया देता है.ऑडियो आइटम में मेन्यू आइकॉन लेयर का इस्तेमाल करके, पिछला चरण दोहराएं वैरिएंट. इससे उपयोगकर्ता जब मेन्यू पर टैप करता है, तो डेवलपर उसे एक मेन्यू दिखा पाते हैं आइकन.
अगर मेन्यू पर टैप किए गए हैंडलर को चुना जाता है, तो आपको सिर्फ़ मेन्यू दिखेगा ऑडियो-आइटम वैरिएंट पर लागू होता है, क्योंकि दूसरे वैरिएंट में मेन्यू आइकॉन. हालांकि, Newscard टैप किए जाने पर, इन तीनों वैल्यू पर लागू होता है अलग-अलग वर्शन का इस्तेमाल करें. इसका मतलब है कि जब उपयोगकर्ता टैग पैरामीटर को ट्रिगर करना चाहता है, तब उसे चलाने के लिए एक हैंडलर (कोड में) दिया जा सकता है अगर तीनों में से किसी भी वैरिएंट पर टैप किया जाता है, तो कोड का डुप्लिकेशन हटा दिया जाता है और पैरामीटर का इस्तेमाल करें. यह कैसे काम करता है, हम नीचे अपडेट कॉम्पोनेंट सेक्शन में शामिल किया जा सकता है.
नाम वाला वर्शन सेव करें
आइए अब इस वर्शन को कोड में आयात किए जाने के लिए तैयार के रूप में चिह्नित करते हैं.
अगर Figma Relay प्लगिन नहीं खुला है, तो उसे खोलें.
डायलॉग के नीचे दाएं कोने में, 'डेवलपर के साथ शेयर करें' पर क्लिक करें.
डेवलपर स्क्रीन के साथ शेयर करें पर, वर्शन है.
उदाहरण के लिए टाइटल: जोड़े गए इंटरैक्शन
उदाहरण के तौर पर जानकारी: कार्ड में दो इंटरैक्शन हैंडलर जोड़े गए
सेव करें पर क्लिक करें.
कॉम्पोनेंट का लिंक कॉपी करने के लिए, MAC पर CMD-L और Windows पर CTRL-L दबाएं क्लिपबोर्ड पर.
Android Studio में कॉम्पोनेंट अपडेट करना
आइए, अब Newscard कॉम्पोनेंट को अपडेट करें:
Android Studio में, पक्का करें कि प्रोजेक्ट टूल विंडो Android व्यू में हो. फिर
app/ui-packages/news_card/
पर राइट-क्लिक करें और कॉन्टेक्स्ट मेन्यू में जाकर, यूज़र इंटरफ़ेस (यूआई) पैकेज अपडेट करें पर क्लिक करें.अपना प्रोजेक्ट बनाने के लिए,
पर क्लिक करें. यह अपडेट किया गया यूआई पैकेज लेता है और कंपोज़ेबल कोड का अपडेट किया गया वर्शन जनरेट करता है.
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
के लिए हैंडलर जोड़ें. ऑडियो के वैरिएंट की वजह से एक मेन्यू है,onMenuTapped
कोcreateOnTapped
असाइन करें.@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)) } } }
ऐप्लिकेशन बनाने और उसे एम्युलेटर में चलाने के लिए ▶ पर क्लिक करें.
हुर्रे! आपने रिले की ऐडवांस सुविधाओं के बारे में जान लिया है.
रिले वर्कफ़्लो में जाकर, रिले के साथ काम करने के बारे में ज़्यादा जानें सेक्शन में जाएं. साथ ही, अगर आपका कोई सवाल है, तो हमें आपके जवाब पाने में खुशी होगी सुझाव/राय दें या शिकायत करें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- कॉन्टेंट पैरामीटर
- डिज़ाइन के वैरिएंट मैनेज करना