विज़ुअल स्टेट को डिज़ाइन करने के लिए किसी वैरिएंट का इस्तेमाल करना

वैरिएंट, किसी पैनल की खास विज़ुअल स्थिति को तय करता है. इससे एक पैनल को अलग-अलग विज़ुअल फ़ॉर्मैट में दिखाया जा सकता है. जैसे, खुला या बंद स्थिति. वैरिएंट को कॉन्फ़िगर करने के लिए, एक्सएमएल का इस्तेमाल करें. <Panel> एलिमेंट में सब-टैग का इस्तेमाल करें.

हर <Variant> टैग में id एट्रिब्यूट होना ज़रूरी है, ताकि उसकी यूनीक पहचान की जा सके. टैग, प्रॉपर्टी इनहेरिट करने के लिए पैरंट वैरिएंट का रेफ़रंस भी दे सकता है. इनहेरिटेंस के इस तरीके से, एक से ज़्यादा वैरिएंट में सामान्य प्रॉपर्टी को बेहतर तरीके से तय किया जा सकता है.

एक्सएमएल एट्रिब्यूट

स्टेट और ट्रांज़िशन तय करने के लिए, इन एट्रिब्यूट का इस्तेमाल <TaskPanel> या <DecorPanel> टैग के साथ करें.

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

एक्सएमएल चाइल्ड एलिमेंट

इन ज़रूरी नहीं एलिमेंट का इस्तेमाल करके, पैनल की विज़ुअल विशेषताओं के बारे में बताएं. ऐसा तब करें, जब पैनल इस वैरिएंट की स्थिति में हो.

चाइल्ड एलिमेंट	ब्यौरा
<Visibility>	इससे पता चलता है कि पैनल दिख रहा है या छिपा हुआ है. इसमें isVisible एट्रिब्यूट (बूलियन) होता है.
<Alpha>	यह पैनल के पारदर्शिता लेवल के बारे में बताता है. इसमें alpha एट्रिब्यूट (फ़्लोट, 0.0 से 1.0) होता है.
<Layer>	यह पैनल के Z-ऑर्डर को दूसरे पैनल के हिसाब से सेट करता है. इसमें layer एट्रिब्यूट (पूर्णांक) होता है. ज़्यादा वैल्यू को सबसे ऊपर दिखाया जाता है.
<Focus>	इससे पता चलता है कि ट्रांज़िशन के दौरान पैनल पर फ़ोकस किया जा सकता है या नहीं. इसमें onTransition एट्रिब्यूट (बूलियन) होता है.
<Bounds>	यह स्क्रीन पर पैनल के आयताकार क्षेत्र (जगह और साइज़) को तय करता है. इस एरिया को बाएं, ऊपर, नीचे, चौड़ाई, और ऊंचाई जैसे एट्रिब्यूट से कंट्रोल किया जाता है. left और right, स्क्रीन के बाएं किनारे से दूरी तय करते हैं. top और bottom, स्क्रीन के सबसे ऊपरी किनारे से दूरी तय करते हैं. width और height, रेक्टैंगल की चौड़ाई और ऊंचाई बताते हैं. इनकी ज़रूरत सिर्फ़ तब होती है, जब left और right (या top और bottom) दोनों नहीं दिए गए हों. dimensions को पिक्सल, डीपी, प्रतिशत या संसाधन के रेफ़रंस में बताया जा सकता है. प्रतिशत का इस्तेमाल करते समय, ऑफ़सेट एट्रिब्यूट का इस्तेमाल करके, प्रतिशत के आधार पर तय की गई सीमाओं में तय किए गए बदलाव लागू किए जा सकते हैं. जैसे, leftOffset, topOffset, rightOffset, और bottomOffset. उदाहरण के लिए, अगर आपको यह तय करना है कि कोई पैनल, स्क्रीन की पूरी ऊंचाई में दिखे और उसमें नीचे की ओर तय ऊंचाई वाला नेविगेशन बार शामिल न हो, तो ऊंचाई को 100% पर सेट करें. साथ ही, bottomOffset को नेविगेशन बार की तय ऊंचाई पर सेट करें. ऐसा करने पर, पैनल का निचला किनारा ऊपर की ओर खींच जाता है.
<SafeBounds>	यह पैनल की सीमाओं के अंदर एक सुरक्षित जगह तय करता है. यह जगह, डिसप्ले कटआउट या इंसर्ट से ओवरलैप नहीं होती है. इससे यह पता चलता है कि इस जगह पर बनाए गए ऐप्लिकेशन, पैनल के साथ काम करते हैं. इसके एट्रिब्यूट, <Bounds> से मिलते-जुलते हैं.
<Corner>	यह पैनल के कोनों के लिए रेडियस तय करता है. इससे कोनों को गोल किया जा सकता है. इसमें रेडियस एट्रिब्यूट (पूर्णांक) होता है. शार्प कॉर्नर डिफ़ॉल्ट रूप से होता है और इसे तय करने की ज़रूरत नहीं होती.
<Insets>	इससे पैनल के लिए इंसर्ट (पैडिंग) तय की जाती है. इसमें left, top, right, bottom एट्रिब्यूट होते हैं. इन इनसेट की जानकारी, पैनल में लॉन्च किए गए ऐप्लिकेशन को दी जाती है. left बाईं ओर मौजूद इंसर्ट को दिखाता है. right से दाईं ओर मौजूद इनसेट के बारे में पता चलता है. उदाहरण के लिए, दाईं ओर शून्य का इनसेट, दाईं ओर कोई इनसेट न होने का संकेत देता है. top से ऊपर की ओर मौजूद इंसर्ट के बारे में पता चलता है. bottom से, नीचे की ओर मौजूद इनसेट तय किया जाता है. उदाहरण के लिए, राइट इनसेट के लिए शून्य वैल्यू का मतलब है कि दाईं ओर कोई इनसेट नहीं है.
<Background>	इसमें बैकग्राउंड डेकोर पैनल का विकल्प दिया गया है. इससे ऐप्लिकेशन स्विच करते समय, स्क्रीन के आर-पार दिखने वाले इफ़ेक्ट को रोका जा सकता है. यह डेकोर लेयर के लिए, रंग और ऐल्फ़ा जैसी प्रॉपर्टी तय करता है. अगर डेकोर लेयर की प्रॉपर्टी पहले से सेट नहीं हैं, तो वे डिफ़ॉल्ट रूप से वैरिएंट की प्रॉपर्टी पर सेट हो जाती हैं. जैसे, बाउंड्री और लेयर.

नमूना कोड

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

विज़ुअल प्रॉपर्टी इंटरपोलेट करना

विज़ुअल प्रॉपर्टी को इंटरपोलेट करने के लिए, KeyFrameVariant का इस्तेमाल करें. variant का यह खास एक्सटेंशन, लगातार फ़्रैक्शनल वैल्यू (0 से 1) पर आधारित होता है. इससे लगातार इनपुट के आधार पर, आसानी से डाइनैमिक ट्रांज़िशन किए जा सकते हैं. जैसे, पैनल की स्थिति को डाइनैमिक तौर पर बदलने के लिए, ड्रैग ऑपरेशन का इस्तेमाल करना.

एक्सएमएल एट्रिब्यूट

KeyFrameVariant में एट्रिब्यूट मौजूद नहीं हैं. <KeyFrameVariant> टैग में, KeyFrameVariant को तय करने के लिए ज़रूरी जानकारी होती है.

एक्सएमएल चाइल्ड एलिमेंट

KeyFrameVariant में एक या उससे ज़्यादा <KeyFrame> चाइल्ड टैग शामिल होते हैं. हर <KeyFrame> में एक framePosition एट्रिब्यूट (0-100) होता है. यह वैरिएंट एट्रिब्यूट (दूसरे वैरिएंट का आईडी) को दिखाता है. ये keyframes, लगातार ट्रांज़िशन के दौरान पैनल की स्थिति तय करते हैं.

नमूना कोड

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>