कंटेनर के तौर पर कार्ड बनाना

Card कॉम्पोज़ेबल, आपके यूज़र इंटरफ़ेस (यूआई) के लिए मटीरियल डिज़ाइन कंटेनर के तौर पर काम करता है. कार्ड में एक ही तरह का कॉन्टेंट होता है. जैसे:

  • शॉपिंग ऐप्लिकेशन में मौजूद प्रॉडक्ट.
  • समाचार ऐप्लिकेशन में मौजूद खबर.
  • कम्यूनिकेशन ऐप्लिकेशन में कोई मैसेज.

किसी एक कॉन्टेंट को दिखाने पर फ़ोकस करने की वजह से, Card अन्य कंटेनर से अलग होता है. उदाहरण के लिए, Scaffold पूरी स्क्रीन के लिए सामान्य स्ट्रक्चर देता है. कार्ड, बड़े लेआउट में मौजूद एक छोटा यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है. वहीं, Column या Row जैसे लेआउट कॉम्पोनेंट, आसान और ज़्यादा सामान्य एपीआई उपलब्ध कराते हैं.

इस विषय में, चार तरह के कार्ड लागू करने का तरीका बताया गया है:

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

बुनियादी कार्ड बनाना

Card, Compose में मौजूद अन्य कंटेनर की तरह ही काम करता है. इसके कॉन्टेंट की जानकारी देने के लिए, इसमें मौजूद अन्य कॉम्पोज़ेबल को कॉल किया जाता है. उदाहरण के लिए, नीचे दिए गए छोटे उदाहरण में देखें कि Card में Text को कैसे कॉल किया गया है:

जानकारी वाला कार्ड बनाना

यहां भरी हुई वैल्यू का रंग बदलने के लिए, colors प्रॉपर्टी का इस्तेमाल किया गया है:

नतीजे

कार्ड को मटीरियल थीम के सर्वरिएंट के रंग से भरा गया है.
पहली इमेज. भरे हुए कार्ड का उदाहरण.

बेहतरीन कार्ड बनाना

यहां दिए गए स्निपेट में, एलिवेटेड कार्ड को लागू करने का तरीका बताया गया है. इसके लिए, ElevatedCard के लिए बने कॉम्पोनेंट का इस्तेमाल करें.

elevation प्रॉपर्टी का इस्तेमाल करके, एलिवेशन और उससे बनने वाली परछाई को कंट्रोल किया जा सकता है.

नतीजे

ऐप्लिकेशन के बैकग्राउंड से ऊपर, एक कार्ड को हाइलाइट किया गया है. साथ ही, उस पर एक छाया भी है.
दूसरी इमेज. एलिवेट किए गए कार्ड का उदाहरण.

आउटलाइन वाला कार्ड बनाना

यहां आउटलाइन वाले कार्ड का उदाहरण दिया गया है. इसके लिए, OutlinedCard कॉम्पोनेंट का इस्तेमाल करें.

नतीजे

कार्ड की आउटलाइन, काले रंग के पतले बॉर्डर से की गई है.
तीसरी इमेज. आउटलाइन वाले कार्ड का उदाहरण.

प्रमुख बिंदु

Card के एपीआई की परिभाषा के लिए रेफ़रंस देखें. इसमें कई पैरामीटर तय किए जाते हैं. इनका इस्तेमाल करके, कॉम्पोनेंट के दिखने के तरीके और उसके काम करने के तरीके में पसंद के मुताबिक बदलाव किए जा सकते हैं.

कुछ मुख्य पैरामीटर में ये शामिल हैं:

  • elevation: कॉम्पोनेंट में एक शैडो जोड़ता है, जिससे वह बैकग्राउंड से ऊपर दिखता है.
  • colors: कंटेनर और उसके सभी चाइल्ड एलिमेंट, दोनों का डिफ़ॉल्ट रंग सेट करने के लिए, CardColors टाइप का इस्तेमाल करता है.
  • enabled: अगर इस पैरामीटर के लिए false पास किया जाता है, तो कार्ड 'बंद है' के तौर पर दिखता है और उपयोगकर्ता के इनपुट का जवाब नहीं देता.
  • onClick: आम तौर पर, Card क्लिक इवेंट स्वीकार नहीं करता. इसलिए, आपको जिस प्राइमरी ओवरलोड पर ध्यान देना है वह वह है जो onClick पैरामीटर तय करता है. जब आपको Card को लागू करने के लिए, उपयोगकर्ता के क्लिक का जवाब चाहिए, तो इस ओवरलोड का इस्तेमाल करें.

कार्ड में स्क्रोल करने या खारिज करने की सुविधाएं पहले से मौजूद नहीं होती हैं. हालांकि, इन्हें उन कॉम्पोनेंसेबल में इंटिग्रेट किया जा सकता है जिनमें ये सुविधाएं मौजूद होती हैं. उदाहरण के लिए, किसी कार्ड को 'स्‍वाइप करके खारिज करें' सुविधा के साथ इस्तेमाल करने के लिए, उसे SwipeToDismiss कॉम्पोज़ेबल के साथ इंटिग्रेट करें. स्क्रोल के साथ इंटिग्रेट करने के लिए, verticalScroll जैसे स्क्रोल मॉडिफ़ायर का इस्तेमाल करें. ज़्यादा जानकारी के लिए, Scroll का दस्तावेज़ देखें.

ऐसे संग्रह जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.