कॉन्टेंट के पैरामीटर

परिचय

ज़्यादातर यूज़र इंटरफ़ेस (यूआई) डिज़ाइन का कॉन्टेंट स्थिर नहीं होता. ये डिज़ाइन के मुताबिक डेटा शामिल है. इस सेक्शन में, हम कॉन्टेंट पैरामीटर के ज़रिए अपने डिज़ाइन में डेटा जोड़ते हैं, डिज़ाइनर को यह तय करने की अनुमति मिलती है कि डिज़ाइन का कौनसा हिस्सा डेटा से भरा जाना चाहिए

Figma में पैरामीटर जोड़ें

आइए, हमारे कॉम्पोनेंट में कॉन्टेंट पैरामीटर जोड़ते हैं.

1. Figma पर स्विच करें. News CardTutor में, थंबनेल इमेज लेयर को चुनें. हीरो-आइटम वैरिएंट (Mac पर ⌘ + क्लिक या Windows और Linux पर Ctrl + क्लिक इमेज).

2. Figma प्लगिन के लिए रिले में, + पर क्लिक करें और image-content को चुनें ड्रॉप-डाउन मेन्यू चुनें. इसके बाद, उसका नाम बदलकर “थंबनेल” कर दें.

   

3. हेडलाइन टेक्स्ट लेयर चुनें, + पर क्लिक करें और text-content चुनें. दोहराएं हीरो-आइटम में लेखक और तारीख की टेक्स्ट लेयर के लिए वही तरीका वैरिएंट. उन्हें “हेडलाइन”, “लेखक”, और “तारीख” का नाम दें.

   

4. प्लग इन में थंबनेल पैरामीटर पर क्लिक करें. ध्यान दें कि हर कॉम्पोनेंट वैरिएंट के लिए, थंबनेल लेयर एक इमेज होती है और इसे चुना जाता है.

   क्योंकि तीनों लेयर के नाम ("थंबनेल") एक जैसे हैं और उनका डेटा भी एक ही है (image-content), कॉन्टेंट पैरामीटर इससे पूरी तरह कनेक्ट है तीन वैरिएंट. इसका मतलब है कि एक पैरामीटर कई वेबसाइटों को एक जैसा डेटा देता है अलग-अलग वर्शन का इस्तेमाल करें. यह बात हेडलाइन, लेखक, और तारीख पैरामीटर के लिए भी सही है.

   

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

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

1. अगर Figma Relay प्लगिन नहीं खुला है, तो उसे खोलें.

2. डेवलपर के साथ शेयर करें पर क्लिक करें.

3. डेवलपर के साथ शेयर करें स्क्रीन में, वर्शन का नाम और जानकारी डालें.

   टाइटल का उदाहरण: जोड़े गए पैरामीटर

   ब्यौरा का उदाहरण: कार्ड में कॉन्टेंट पैरामीटर जोड़े गए

4. सेव करें पर क्लिक करें.

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

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

1. Android Studio में, पक्का करें कि प्रोजेक्ट टूल विंडो Android व्यू में हो. इसके बाद, app/ui-packages/news_card/ पर राइट क्लिक करें और यूज़र इंटरफ़ेस अपडेट करें पर क्लिक करें पैकेज.

   

2. अपना प्रोजेक्ट बनाने के लिए, पर क्लिक करें. इससे अपडेट किया गया यूज़र इंटरफ़ेस (यूआई) पैकेज लें और कंपोज़ेबल का अपडेट किया गया वर्शन जनरेट करें कोड.

   

3. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt को देखने पर आपको पता चलेगा कि हमारे जोड़े गए कॉन्टेंट पैरामीटर (thumbnail, headline, author, date) आपके कंपोज़ेबल की पैरामीटर सूची में मौजूद होता है.

   // View to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list
   *
   * This composable was generated from the UI package 'news_card'.
   * Generated code; don't edit directly.
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem,
       thumbnail: Painter = EmptyPainter(),
       headline: String = "",
       author: String = "",
       date: String = ""
   ) {
   ...
   

ऐप्लिकेशन में इंटिग्रेट करें

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

• अक्सर आने वाली खबरों को मैनेज करने के लिए, पोस्टलिस्ट आर्टिकल स्टोरी कंपोज़ेबल में तैयार की जाती है कहानियाँ.
• postTop पैरामीटर मुख्य खबर को दिखाता है.
• पोस्ट पैरामीटर बाकी खबरों को दिखाता है.
• PostListAudioस्टोरीज़ कंपोज़ेबल, ऑडियो खबरों को रेंडर करती है.

  

  आइए, अब अपने Newscard कॉम्पोनेंट को होम स्क्रीन पर इंटिग्रेट करें.

1. app/java/com/example/hellonews/ui/home/HomeScreen.kt में, यह जोड़ें फ़ाइल के ऊपरी हिस्से के पास मौजूद दूसरी इंपोर्ट लाइनों के बगल में मौजूद इंपोर्ट: com.example.hellonews.newscard.NewsCard इंपोर्ट करें

   import com.example.hellonews.newscard.View

2. अब भी HomeScreen.kt में, नीचे की ओर स्क्रोल करके PostListarticlestory पर जाएं.

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

3. postTop के लिए Text कॉम्पोनेंट को हमारे नए इंपोर्ट किए गए कॉम्पोनेंट से बदलें HeroItem व्यू का इस्तेमाल करके Newscard.

   @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,
               view = View.HeroItem
           )
           Spacer(modifier = Modifier.size(12.dp))
           ...
       }
   }
   

4. हर पोस्ट के लिए, टेक्स्ट कॉम्पोनेंट को हमारे नए इंपोर्ट किए गए टेक्स्ट से बदलें लेखItem व्यू का इस्तेमाल करके Newscard.

   @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,
                   view = View.ArticleItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

5. नीचे दी गई ऑडियो स्टोरी के लिए भी हम ऐसा ही कर सकते हैं. अब भी मौजूद HomeScreen.kt, नीचे की ओर स्क्रोल करके, लाइन 260 के आस-पास PostListAudioस्टोरीज़ पर जाएं.

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

6. हर पोस्ट के लिए, टेक्स्ट कॉम्पोनेंट को हमारे नए इंपोर्ट किए गए कॉम्पोनेंट से बदलें AudioItem व्यू का इस्तेमाल करके, Newscard.

   @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,
                   view = View.AudioItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

7. अपना प्रोजेक्ट फिर से बनाने के लिए, पर क्लिक करें और प्रोजेक्ट का नतीजा देखें झलक (स्प्लिट स्क्रीन व्यू):

   

अगला चरण

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

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• डिज़ाइन में इंटरैक्शन हैंडलर जोड़ना
• डिज़ाइन के वैरिएंट मैनेज करना
• Android Studio में डिज़ाइन को कोड में बदलना