एक्सआर के लिए मटीरियल डिज़ाइन लागू करना

मटीरियल डिज़ाइन, एक्सआर के हिसाब से बदलने वाले कॉम्पोनेंट और लेआउट उपलब्ध कराता है. Material 3 लाइब्रेरी का इस्तेमाल करके, कॉम्पोनेंट और अडैप्टिव लेआउट को स्पेस के हिसाब से यूज़र इंटरफ़ेस (यूआई) के व्यवहार के साथ बेहतर बनाया गया है.

EnableXrComponentOverrides रैपर जोड़कर, अपने मौजूदा M3 लागू करने के तरीके में बदलाव किया जा सकता है. अपने ऐप्लिकेशन की डिपेंडेंसी में XR Compose Material3 लाइब्रेरी जोड़ें.

अपने मौजूदा ऐप्लिकेशन को अडैप्ट करने के लिए, EnableXrComponentOverrides का इस्तेमाल करना

EnableXrComponentOverrides रैपर में मौजूद M3 Compose का पूरा यूज़र इंटरफ़ेस (यूआई), XR डिवाइसों पर काम करेगा. इस रैपर की मदद से, ऐसे कॉम्पोनेंट चुने जा सकते हैं जिन्हें इस व्यवहार से बाहर रखना है.

अपने ऐप्लिकेशन को XR के लिए Material Design के मुताबिक बनाने के लिए, EnableXrComponentOverrides रैपर जोड़ें.

NavigationSuiteScaffold के साथ-साथ, Compose के किसी भी लेआउट में मौजूद नेविगेशन रेल, XR ऑर्बिटर के हिसाब से अपने-आप अडजस्ट हो जाएगी. ज़्यादा जानकारी के लिए, Material Design के दिशा-निर्देश पढ़ें.

स्पेसलाइज़ नहीं की गई नेविगेशन रेल

नेविगेशन रेल, जिसे स्पेसलाइज़ नहीं किया गया है

स्पेसलाइज़्ड (एक्सआर के हिसाब से बनाई गई) नेविगेशन रेल

स्पेसलाइज़्ड (एक्सआर के हिसाब से बनाई गई) नेविगेशन रेल

NavigationSuiteScaffold के साथ-साथ, Compose के किसी भी लेआउट में मौजूद नेविगेशन बार, XR ऑर्बिटर के हिसाब से अपने-आप अडजस्ट हो जाएगा. ज़्यादा जानकारी के लिए, Material Design के दिशा-निर्देश पढ़ें.

स्पेसलाइज़ नहीं किया गया नेविगेशन बार

स्पेसलाइज़ नहीं किया गया नेविगेशन बार

स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाया गया) नेविगेशन बार

स्पेसलाइज़ किया गया (एक्सआर के हिसाब से बनाया गया) नेविगेशन बार

डायलॉग

BasicAlertDialog, कॉम्पोनेंट में ऊंचाई जोड़कर, XR के हिसाब से बदल जाएगा.

डायलॉग बॉक्स और अडैप्टिव डिज़ाइन के दिशा-निर्देशों के बारे में ज़्यादा जानें.

स्पेसलाइज़ नहीं किया गया डायलॉग

स्पेसलाइज़ नहीं किया गया डायलॉग

स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाया गया) डायलॉग

स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाया गया) डायलॉग

सबसे ऊपर मौजूद ऐप्लिकेशन बार

TopAppBar, XR ऑर्बिटर के हिसाब से अपने-आप अडजस्ट हो जाएगा.

टॉप ऐप्लिकेशन बार और अडैप्टिव डिज़ाइन के दिशा-निर्देशों के बारे में ज़्यादा जानें.

स्पेसलाइज़ नहीं किया गया टॉप ऐप्लिकेशन बार

स्पेसलाइज़ नहीं किया गया टॉप ऐप्लिकेशन बार

एक्सआर के हिसाब से बनाया गया, ऊपर मौजूद ऐप्लिकेशन बार

एक्सआर के हिसाब से बनाया गया, ऊपर मौजूद ऐप्लिकेशन बार

एक्सआर के लिए, लिस्ट-जानकारी वाला लेआउट

XR में Material 3 के अडैप्टिव लेआउट बनाएं. इसमें 1:1 मैपिंग होती है, जहां हर पैनल को अपने XR स्पेस पैनल में रखा जाता है. ListDetailPaneScaffold और अडैप्टिव डिज़ाइन के दिशा-निर्देशों के बारे में ज़्यादा जानें.

ListDetailPaneScaffold, जिसे स्पेसलाइज़ नहीं किया गया है

ListDetailPaneScaffold, जिसे स्पेसलाइज़ नहीं किया गया है

स्पेशल (एक्सआर के हिसाब से) ListDetailPaneScaffold

स्पेशल (एक्सआर के हिसाब से) ListDetailPaneScaffold

XR के लिए पैनल लेआउट की सुविधा

XR में Material 3 के अडैप्टिव लेआउट बनाएं. इसमें 1:1 मैपिंग होती है, जहां हर पैनल को अपने XR स्पेस पैनल में रखा जाता है. SupportingPaneScaffold और अडैप्टिव डिज़ाइन के दिशा-निर्देशों के बारे में ज़्यादा जानें.

बिना स्पेस वाले SupportingPaneScaffold

बिना स्पेस वाले SupportingPaneScaffold

स्पेसलाइज़्ड (एक्सआर के हिसाब से बनाया गया) SupportingPaneScaffold

स्पेसलाइज़्ड (एक्सआर के हिसाब से बनाया गया) SupportingPaneScaffold

Figma के लिए Material 3 Design Kit का इस्तेमाल करके डिज़ाइन करना शुरू करना

Material 3 डिज़ाइन किट के एलिमेंट का कोलाज

शुरू करने के लिए, Material 3 डिज़ाइन किट डाउनलोड करें

यह भी देखें: