इस पेज का अनुवाद Cloud Translation API से किया गया है.

डिज़ाइन में इंटरैक्शन हैंडलर जोड़ना

इस सेक्शन में हम जानेंगे कि कैसे अपने डिज़ाइन में, इंटरैक्शन हैंडलर.

इंटरैक्शन हैंडलर यह तय करने का तरीका बताते हैं कि कोई कॉम्पोनेंट कहां हो सकता है इंटरैक्शन किया गया (टैप किया गया, दो बार टैप किया गया वगैरह). इंटरैक्शन हैंडलर जोड़े जा सकते हैं की किसी भी लेयर पर बना सकते हैं.

हैंडलर जोड़ें

इंटरैक्शन हैंडलर को किसी भी लेयर में जोड़ा जा सकता है. इससे डिज़ाइनर को यह तय करने में मदद मिलती है कि कॉम्पोनेंट के कौनसे हिस्से इंटरैक्टिव हैं.

हीरो-आइटम वैरिएंट (फ़्रेम) चुनें, इसके आगे + पर क्लिक करें इंटरैक्शन हैंडलर जोड़ने के लिए पैरामीटर और tap-handler चुनें. यह डेवलपर को ऐसे कोड लिखने की अनुमति मिलती है जो उपयोगकर्ता के कार्ड पर टैप करने पर प्रतिक्रिया देता है.
ऑडियो आइटम में मेन्यू आइकॉन लेयर का इस्तेमाल करके, पिछला चरण दोहराएं वैरिएंट. इससे उपयोगकर्ता जब मेन्यू पर टैप करता है, तो डेवलपर उसे एक मेन्यू दिखा पाते हैं आइकन.
अगर मेन्यू पर टैप किए गए हैंडलर को चुना जाता है, तो आपको सिर्फ़ मेन्यू दिखेगा ऑडियो-आइटम वैरिएंट पर लागू होता है, क्योंकि दूसरे वैरिएंट में मेन्यू आइकॉन. हालांकि, Newscard टैप किए जाने पर, इन तीनों वैल्यू पर लागू होता है अलग-अलग वर्शन का इस्तेमाल करें. इसका मतलब है कि जब उपयोगकर्ता टैग पैरामीटर को ट्रिगर करना चाहता है, तब उसे चलाने के लिए एक हैंडलर (कोड में) दिया जा सकता है अगर तीनों में से किसी भी वैरिएंट पर टैप किया जाता है, तो कोड का डुप्लिकेशन हटा दिया जाता है और पैरामीटर का इस्तेमाल करें. यह कैसे काम करता है, हम नीचे अपडेट कॉम्पोनेंट सेक्शन में शामिल किया जा सकता है.

नाम वाला वर्शन सेव करें

आइए अब इस वर्शन को कोड में आयात किए जाने के लिए तैयार के रूप में चिह्नित करते हैं.

अगर Figma Relay प्लगिन नहीं खुला है, तो उसे खोलें.
डायलॉग के नीचे दाएं कोने में, 'डेवलपर के साथ शेयर करें' पर क्लिक करें.
डेवलपर स्क्रीन के साथ शेयर करें पर, वर्शन है.

उदाहरण के लिए टाइटल: जोड़े गए इंटरैक्शन

उदाहरण के तौर पर जानकारी: कार्ड में दो इंटरैक्शन हैंडलर जोड़े गए
सेव करें पर क्लिक करें.
कॉम्पोनेंट का लिंक कॉपी करने के लिए, MAC पर CMD-L और Windows पर CTRL-L दबाएं क्लिपबोर्ड पर.

Android Studio में कॉम्पोनेंट अपडेट करना

आइए, अब Newscard कॉम्पोनेंट को अपडेट करें:

Android Studio में, पक्का करें कि प्रोजेक्ट टूल विंडो Android व्यू में हो. फिर app/ui-packages/news_card/ पर राइट-क्लिक करें और कॉन्टेक्स्ट मेन्यू में जाकर, यूज़र इंटरफ़ेस (यूआई) पैकेज अपडेट करें पर क्लिक करें.
अपना प्रोजेक्ट बनाने के लिए, पर क्लिक करें. यह अपडेट किया गया यूआई पैकेज लेता है और कंपोज़ेबल कोड का अपडेट किया गया वर्शन जनरेट करता है.

ध्यान दें: इस वजह से HomeScreen.kt में बिल्ड के लिए चेतावनियां मिलती हैं, क्योंकि यह होम स्क्रीन का इस्तेमाल नहीं कर रहा है Newscard में नए पैरामीटर को शामिल करता है. ऐसा होना सामान्य है.

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 बंद होने पर लिंक टेक्स्ट दिखता है
कॉन्टेंट पैरामीटर
डिज़ाइन के वैरिएंट मैनेज करना