MaterialShapeDrawable का उपयोग करके कस्टम आकार कैसे बनाएं

सामग्री डिजाइन 2.0 ने कई नई अवधारणाएं पेश कीं। उनमें से एक इंटरफ़ेस तत्वों के ज्यामितीय रूपों पर विशेष ध्यान है। और सुंदर कस्टम आकार बनाने का एक आसान तरीका है। इसे MaterialShapeDrawable कहा जाता है। आइए देखें कि यह उपयोग करने के लिए कितना उपयोगी और आसान है।

एंड्रॉइड एप्लिकेशन की स्क्रीन पर ग्राफिक तत्वों को जोड़ने के कई तरीके हैं। सबसे सीधा वेबप या पीएनजी प्रारूप में बिटमैप को आयात करना है। एक अन्य विकल्प वेक्टरड्राइव का उपयोग करने के लिए है, जो आपको छवि को उस आकार तक फैलाने की अनुमति देता है, जिसकी आपको आवश्यकता है। स्क्रीन पर ग्राफिक्स जोड़ने का एक और तरीका शेपड्रावेबल का उपयोग करना है। उत्तरार्द्ध एक साधारण पृष्ठभूमि जोड़ने या यहां तक ​​कि एक आइकन बनाने का सबसे आसान तरीका है। ShapeDrawable के साथ बनाई गई छवियां स्क्रीन पर पिक्सेल घनत्व से स्वतंत्र होती हैं। उन्हें एक्सएमएल फ़ाइल में वर्णित किया जा सकता है, एक और ग्राफिक संसाधन का हिस्सा हो सकता है (उदाहरण के लिए, स्टेटलिस्टड्रावेबल) और एपीआई एसडी 1 के साथ शुरू होने वाले एंड्रॉइड एसडीके में मौजूद हैं।

एक आकृति की उपस्थिति को बदलने के लिए, हम कई शेपड्रावेबल गुण बदल सकते हैं: आकृति का नाम, भरण रंग (या ढाल), और आकृति का सीमा रंग। आयतों के लिए, आप कोनों की त्रिज्या भी निर्धारित कर सकते हैं। इन गुणों का उपयोग करके, आप ग्राफिक्स बना सकते हैं जो स्क्रीन, डिवाइडर, बटन पृष्ठभूमि या किसी अन्य उद्देश्य के लिए व्यक्तिगत छवियों के रूप में उपयोग किया जाएगा। यदि एप्लिकेशन उन्नयन के साथ तत्वों के लिए पृष्ठभूमि के रूप में एपीआई v.21 + और शेपड्रैबल का उपयोग करता है, तो इन तत्वों के तहत छाया भी सही रूप में होगी:

शेपड्रावेबल एक आसान उपकरण है जो लगभग हमेशा अपना काम अच्छी तरह से करता है, लेकिन मटीरियल डिज़ाइन 2.0 के आगमन के साथ, डेवलपर्स को कुछ अधिक लचीले होने की आवश्यकता होती है। नई डिजाइन प्रणाली उनके अर्थ, स्थिति और आवेदन की व्यक्तिगत शैली पर जोर देने के लिए विभिन्न रूपों के उपयोग को प्रोत्साहित करती है। मैंने ऊपर लिखा है कि वांछित करने के कई तरीके हैं, लेकिन उनमें से सबसे सरल अब प्रासंगिक नहीं है। क्या इसका मतलब यह है कि हमें वेक्टर ग्राफिक्स का उपयोग शुरू करने की आवश्यकता है और इस प्रकार ऊंचाई के साथ इंटरफ़ेस तत्वों के लिए "मुक्त" छाया बनाने की क्षमता खो देते हैं? या क्या यह रेखापुंज छवियों का उपयोग करने के लिए वापस रोल करने और स्क्रीन पर छह संभव पिक्सेल घनत्व के लिए ग्राफिक संसाधन बनाने के लिए लायक है? सौभाग्य से, सामग्री डिजाइन 2.0 के आगमन के साथ, एक पूरी तरह से नया घटक पुस्तकालय दिखाई दिया है।

यह लाइब्रेरी Android और अन्य प्लेटफार्मों के सभी संस्करणों पर सामग्री डिज़ाइन UI के स्वरूप और व्यवहार को एकजुट करने के लिए बनाई गई थी (iOS, वेब और फ़्लटर के लिए इस पुस्तकालय के संस्करण हैं)। घटक पुस्तकालय नई सामग्री डिजाइन के लिए कई विशेषताओं को लागू करता है। उदाहरण के लिए, इसमें अपेक्षित व्यवहार के साथ बॉटमऐपबार घटक शामिल है। अन्य घटकों और उपयोगिताओं के बीच, MaterialShapeDrawable वर्ग है। मेरी राय में, यह उन कार्यों को हल करने के लिए एक आवश्यक उपकरण है जो डेवलपर्स के लिए नई डिजाइन प्रणाली बनाते हैं।

हालांकि MaterialShapeDrawable को अभी भी 1.0.0 लाइब्रेरी रिलीज़ में प्रायोगिक माना जाता है, लेकिन इसका उपयोग एप्लिकेशन में शांत प्रभाव बनाने के लिए किया जा सकता है। MaterialShapeDrawable वर्ग में, आप इसके पक्षों और इसके प्रत्येक कोण की उपस्थिति को निर्दिष्ट करके एक आकृति का वर्णन कर सकते हैं। इन निर्दिष्ट गुणों को एक इंटरपोलर द्वारा नियंत्रित किया जा सकता है, जो उन्हें चेतन करने की अनुमति देता है।

अपना स्वयं का MaterialShapeDrawable बनाने के लिए, आप उस कंस्ट्रक्टर का उपयोग कर सकते हैं जिसके लिए आपको मापदंडों में TypePathModel प्रकार की एक वस्तु पास करनी होगी। यह क्रमशः एजट्रीटमेंट और कॉर्नरट्रीटमेंट कक्षाओं में प्रत्येक पक्ष और आकृति के प्रत्येक कोने के बारे में जानकारी संग्रहीत करता है (हमेशा चार पक्ष और कोण होते हैं, लेकिन यह उनकी मदद से लगभग किसी भी आंकड़े का वर्णन करने में हस्तक्षेप नहीं करता है)। आप प्रत्येक पक्ष और कोने के लिए व्यक्तिगत रूप से विवरण निर्दिष्ट कर सकते हैं, या एक विधि को कॉल करके पूरे आंकड़े के लिए एक बार सेट कर सकते हैं।

लाइब्रेरी में पहले से ही पक्षों और कोणों के उपचार के कई तैयार-से-उपयोग वर्णन हैं, जिसमें सामग्री डिजाइन 2.0 में शुरू किए गए घटकों के आकार के बारे में अधिकांश नवाचार शामिल हैं। पहले से ही मौजूद है: RoundedCornerTreatment - गोल कोनों के लिए, CutCornerTreatment - कटे हुए कोनों के लिए, TriangleEdgeTreatment - साइड में एक त्रिकोण काटने या जोड़ने के लिए। उनके काम को प्रदर्शित करने के लिए, एक सरल उदाहरण है:

val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable 

यह इस तरह दिखेगा:

बेशक, आप बस चेहरे और कोणों का अपना विवरण बना सकते हैं। आकार हमेशा ऊपरी बाएँ तत्व के लिए सेट किया जाता है, और ड्राएबल तैयार आकृति प्राप्त करने के लिए रोटेशन / प्रतिबिंब संचालन करेगा। इसे प्रदर्शित करने के लिए एक छोटा सा उदाहरण है:

 class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } } 

यदि इस MaterialShapeDrawable को पृष्ठभूमि के रूप में उपयोग किया जाता है, तो परिणाम इस प्रकार होगा:

नई सामग्री घटक लाइब्रेरी के बॉटमबार पैकेज में एक बॉटमऐपबारटॉपएडजट्रीटमेंट है। यह फ़्लोटिंगएशनबटन बटन के लिए निचला एपबार में कटआउट का वर्णन करता है। बटन की स्थिति और आकार के आधार पर इसका ऊपरी भाग एनिमेटेड हो सकता है। मैं आपको अपनी खुद की आँखों से देखने के लिए इन कक्षाओं के कोड को पढ़ने की सलाह देता हूं कि MaterialShapeDrawable उपयोग करने के लिए बहुत ही लचीला है और इसके साथ लगभग सब कुछ किया जा सकता है।

यदि हम सामान्य आकार के बारे में बात करते हैं, तो एक और विवरण है जो ध्यान देने योग्य है - समोच्च के अनुरूप आकृति की एक छाया डालने की क्षमता। चूंकि अब आप MaterialShapeDrawable का उपयोग करके बहुत ही असामान्य आकृतियों की रूपरेखा बना सकते हैं, इसलिए यह छाया के आकार को छवि के आकार में नहीं लाने के लिए एक निराशा होगी, खासकर जब ये छायाएं मैटेरियल डिज़ाइन 2.0 में हर जगह देखी जा सकती हैं। MaterialShapeDrawable भी छाया की उपस्थिति की गणना करता है। शैडोनेबल प्रॉपर्टी का उपयोग करते हुए, आप शैडो को सक्षम कर सकते हैं, जो कि फिगर के समोच्च का पूरी तरह से पालन करेगा, छाया की त्रिज्या, ऊंचाई और रंग को निर्धारित करना भी संभव है। सच होने के लिए बहुत अच्छा लगता है? दुर्भाग्य से, हाँ। यदि आप MaterialShapeDrawable की छाया का उपयोग करते हैं, तो आपको एक सामान्य छाया मिलती है (पेंट वर्ग के सेटशेडो लेयर () विधि द्वारा, जो पाठ पर छाया खींचने के लिए बनाई गई थी), लेकिन UI घटक की सीमाओं में फसली होती है जिसमें परिणाम प्रदर्शित होता है:

ध्यान रखें कि MaterialShapeDrawable को अभी भी प्रायोगिक माना जाता है, जैसे कि एपीआई, और भविष्य में बदल सकता है। यह भी ध्यान देने योग्य है कि नई सामग्री घटक लाइब्रेरी के लिए कोड खुला है, इसलिए बग ट्रैकर में टिकट बनाना या ज्ञात समस्याओं को ठीक करने के साथ अनुरोधों को भी खींचना बहुत स्वागत योग्य है। वास्तव में, जब आप इन पंक्तियों को पढ़ते हैं, तो एपीआई पुस्तकालय की मास्टर शाखा में पहले से ही थोड़ा अलग है (उदाहरण के लिए, शेपएपैरेंसमॉडल का उपयोग शेपपैथोडेल के बजाय किया जाएगा), जो सक्रिय कार्य को इंगित करता है। अगली रिलीज में होनहार सुविधाओं में से एक संपूर्ण एप्लिकेशन थीम के लिए डिफ़ॉल्ट पक्षों / कोणों को निर्धारित करने की क्षमता हो सकती है। आप आधिकारिक प्रलेखन या पुस्तकालय स्रोतों से इसके बारे में अधिक जान सकते हैं।

अनुवादक से:
यह अच्छा है कि ऐसे उपकरण हैं जो सामान्य आकार में नई सुविधाओं को जोड़ते हैं और सरलतम ग्राफिक्स नहीं बनाने में मदद करते हैं। यह डेवलपर को हर छोटी चीज के लिए डिजाइनर को खींचने की अनुमति नहीं देता है, लेकिन समस्या को हल करने के लिए, और काफी कम समय की आवश्यकता होती है। हम मौजूदा समस्याओं को हल करने के लिए नए तरीकों का अभ्यास करने के लिए सामग्री घटक पुस्तकालय के अगले संस्करणों की प्रतीक्षा कर रहे हैं।