इस सेक्शन में हम जानेंगे कि कैसे अपने डिज़ाइन में, इंटरैक्शन हैंडलर.
इंटरैक्शन हैंडलर यह तय करने का तरीका बताते हैं कि कोई कॉम्पोनेंट कहां हो सकता है इंटरैक्शन किया गया (टैप किया गया, दो बार टैप किया गया वगैरह). इंटरैक्शन हैंडलर जोड़े जा सकते हैं की किसी भी लेयर पर बना सकते हैं.
हैंडलर जोड़ें
इंटरैक्शन हैंडलर को किसी भी लेयर में जोड़ा जा सकता है. इससे डिज़ाइनर को यह तय करने में मदद मिलती है कि कॉम्पोनेंट के कौनसे हिस्से इंटरैक्टिव हैं.
हीरो-आइटम वैरिएंट (फ़्रेम) चुनें, इसके आगे + पर क्लिक करें इंटरैक्शन हैंडलर जोड़ने के लिए पैरामीटर और
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))
}
}
}ऐप्लिकेशन बनाने और उसे एम्युलेटर में चलाने के लिए ▶ पर क्लिक करें.
हुर्रे! आपने रिले की ऐडवांस सुविधाओं के बारे में जान लिया है.
रिले वर्कफ़्लो में जाकर, रिले के साथ काम करने के बारे में ज़्यादा जानें सेक्शन में जाएं. साथ ही, अगर आपका कोई सवाल है, तो हमें आपके जवाब पाने में खुशी होगी सुझाव/राय दें या शिकायत करें.
फ़िलहाल कोई सुझाव नहीं है.
अपने Google खाते में साइन इन करने की कोशिश करें.