हम एंड्रॉइड एप्लिकेशन में एसवीजी वेक्टर छवियों का उपयोग करते हैं, या स्क्रीन विखंडन को कैसे मारते हैं और गुणवत्ता (पेशेवरों, विपक्ष, सुविधाओं) में नहीं खोते हैं

लंबे समय से हम एंड्रॉइड के लिए बच्चों के एप्लिकेशन विकसित कर रहे हैं, धीरे-धीरे इस प्लेटफॉर्म की कई बारीकियों को समझ रहे हैं। एक रेक है जो हर एप्लिकेशन में हमारे इंतजार में रहता है - यह स्क्रीन का एक विखंडन है। यदि आप केवल एक छवि को एक छोटे फोन के लिए बनाते हैं, तो टैबलेट पर इसे हल्के ढंग से डालने के लिए दिखता है, "वास्तव में नहीं"। और यदि आप टैबलेट के लिए एक उच्च-रिज़ॉल्यूशन की छवि बनाते हैं और इसे फोन पर उपयोग करने का प्रयास करते हैं, तो बहुत अधिक संभावना के साथ आवेदन आउटऑफमेरी के साथ गिर जाएगा।

हमें अलग-अलग स्क्रीन के लिए एक ही छवि के कई उदाहरण तैयार करने होंगे। 2560x1600 के एक पागल संकल्प के साथ नया राक्षस गैलेक्सी नेक्सस 10 बादलों को और अधिक घना करता है।



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

जल्दी से नहीं कहा। तो, कटौती के तहत, हमारे एक आवेदन में वेक्टर छवियों के कार्यान्वयन की कहानी है। इस लेख में, हम एंड्रॉइड एप्लिकेशन में एसवीजी प्रारूप में वेक्टर छवियों का उपयोग करने के अनुभव और सुविधाओं को साझा करेंगे।

थोड़ा गुग्लिंग, हमने पाया कि वेब और एप्लिकेशन के लिए वेक्टर चित्र आमतौर पर एसवीजी प्रारूप में उपयोग किए जाते हैं। वेक्टर संपादक एडोब इलस्ट्रेटर और इंकस्केप इस प्रारूप के साथ काम करते हैं। इंकस्केप के साथ सशस्त्र, हमने परीक्षण छवियों को काट दिया और एंड्रॉइड एप्लिकेशन में उन्हें डाउनलोड करने और प्रदर्शित करने के तरीके खोजने लगे।
मैं एसवीजी डिवाइस को समझना और अपने पार्सर को लिखना नहीं चाहता था - निश्चित रूप से, लोग हमारे सामने आ गए हैं! खैर, Google "Android svg"।
नतीजतन, वहाँ हैं:

• 2 Google कोड प्रोजेक्ट:
  code.google.com/p/svg-android
  code.google.com/p/svg-android-2
  
• NDK का उपयोग करते हुए विस्तृत लेख:
  horribileru.blogspot.ru/2011/10/android-imageview-svg.html
  
• और विभिन्न मंचों में मृत परियोजनाओं के लिए कुछ लिंक।

हम सबसे लोकप्रिय एक लेते हैं - एसवीजी-एंड्रॉइड (वैसे, वह गिथब में चले गए, लेकिन वहां कोई नया आवागमन नहीं है)। हम लाइब्रेरी को कनेक्ट करते हैं, वेक्टर छवि को रेस / रॉ में डालते हैं, इसे लोड करते हैं और इसे दृश्य में स्थापित करते हैं:

SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.filename); Drawable drawable = svg.createPictureDrawable(); imageView.setImageDrawable(drawable); 

छवियों के साथ एक परीक्षण परियोजना डाउनलोड करें - सब कुछ ठीक है! हमारी छवियों को जोड़ना रिक्त है। जैसा कि यह निकला, यह पुस्तकालय केवल एसवीजी मूल 1.1 प्रारूप का समर्थन करता है, जो इंकस्पेस द्वारा समर्थित नहीं है, लेकिन केवल एडोब इलस्ट्रेटर में पैदा हुआ है।

हम दूसरी एसवीजी-एंड्रॉइड -2 लाइब्रेरी की कोशिश करते हैं, जो पहली परियोजना का एक कांटा है और थोड़ा आगे बढ़ गई है।
वह पहले से ही इंकस्केप को समझती है, और इस प्रारूप के अन्य चिप्स का भी समर्थन करती है, जिसे आप यहाँ पढ़ सकते हैं। यहां सब कुछ सरल हो गया, तस्वीरें डाउनलोड हुईं और फोन और टैबलेट दोनों पर बहुत खूबसूरत लग रही थीं। हम उस पर रुक गए।

टैबलेट पर एक एसवीजी छवि और एक गैर-अनुकूलित टैबलेट आकार पीएनजी छवि का एक उदाहरण।
(मूल आकार 1280x800 में छवि देखें)

पहला SVG (10 Kb) है, दूसरा PNG (22 Kb) है। दूसरी छवि में एक धुंधला रूपरेखा और एक कदम ढाल है

छवि स्केलिंग

छवियों को केवल अनुपात के संरक्षण के साथ बढ़ाया जाता है। इसलिए, उन्हें पृष्ठभूमि के रूप में उपयोग करना, जो विभिन्न प्रस्तावों पर अनुपात को थोड़ा बदल सकता है, विफल हो जाएगा। इस मामले में, हम आमतौर पर पीएनजी में कुछ प्रकार की अमूर्त छवि बनाते हैं, जो अलग-अलग स्क्रीन के लिए इसके अनुपात को आसानी से बदल देता है।

एसवीजी के लिए एडजस्टेबलबाउंड्स प्रॉपर्टी को सही पर सेट करने के लिए मत भूलना, अन्यथा छवि आपकी सीमाओं की गणना उस तरीके से नहीं कर सकती है जैसा आप चाहते थे।

छाया और हाइलाइट के साथ छवि आकार

हमारे आवेदन में कुछ तत्वों को शुरू में छोटे छाया और प्रकाश डाला गया था - उदाहरण के लिए, इस इमोटिकॉन में एक ग्रे बैकलाइट है। लेकिन यह एसवीजी फ़ाइल के आकार में भारी वृद्धि की ओर जाता है। 118 Kb बनाम 1 Kb इस पर प्रकाश डाला गया बिना। फ़ाइल का आकार जितना बड़ा होगा, उसे प्रोग्राम में डाउनलोड करने में उतना ही अधिक समय लगेगा, इसलिए हमने इस आशय को छोड़ने का फैसला किया।


छाया के साथ और बिना चित्र: ११ Kb Kb बनाम १ Kb

आप ग्राफिक्स एडिटर में या एसवीजी फ़ाइल को सीधे संपादित करके बैकलाइट बंद कर सकते हैं - हम विशाल सामग्री के साथ <छवि /> टैग को हटा देते हैं।

धीरे-धीरे प्रदर्शन

कुछ छवियों में अचानक पृष्ठभूमि के बजाय काले धब्बे दिखाई दिए। यह पता चला कि ढाल समर्थित नहीं है!
ग्रेडिस के साथ समस्या को हल किया गया था svg से अतिरिक्त टैग हटाकर (लेख में बाद में वर्णित)। लेकिन सिद्धांत रूप में, यह और हमारी सरल छवियों में एक समान भरण के साथ ग्रेडिएंट को बदलने के लिए, अगर एक और अति सूक्ष्म अंतर के लिए संभव नहीं है - एक महत्वपूर्ण छवि लोडिंग समय।

यहां स्क्रीन पर यह कैसा दिख रहा है: बाईं ओर एक ढाल के रूप में एक काला आकाश है, दाईं ओर एक सही तस्वीर है।

छवि अपलोड समय

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

उन्होंने समस्या का हल निकालने का फैसला किया। एसवीजी-एंड्रॉइड -2 परियोजना के स्रोत कोड को अपवित्र किया गया था और वास्तव में जो धीमा पड़ता है उसकी खोज करना शुरू कर दिया। यह पता चला है कि SVGParser वर्ग में, XML छवि फ़ाइल को दो बार पार्स किया जाता है : पहली बार यह अतिरिक्त विशेषताओं के बारे में जानकारी एकत्र करता है जो दूसरे पास में उपयोग की जाती हैं। और, सबसे दिलचस्प है, केवल xlink: href विशेषता का विश्लेषण किया जाता है, जो दस्तावेज़ के अंदर ही किसी प्रकार का हाइपरलिंक है। हमारी समस्याग्रस्त छवियों में बस ऐसे लिंक थे, और उन्होंने कहीं भी नेतृत्व नहीं किया। एसवीजी कोड को कुछ छवियों में संपादित करके इन लिंक से छुटकारा पाने के बाद, ग्रेडिएंट सही ढंग से प्रदर्शित होने लगा। इसके अलावा, इस प्रारंभिक पास को हटाने और बूट प्रक्रिया को थोड़ा अनुकूलित करके, हम डाउनलोड गति को 8 सेकंड से 1.8-2 तक कम करने में सक्षम थे। यह ध्यान दिया जाना चाहिए कि यह मध्यम आकार के पीएनजी के साथ तुलनीय है - समान छवियों को मेमोरी में लोड करने में 1.7 सेकंड लगे।

निम्नलिखित एसवीजी और पीएनजी प्रारूप में 35 फ़ाइलों को डाउनलोड करने की तुलना है।

	एसवीजी	पीएनजी (~ 500x500)
आकार KB	327	943
लोड हो रहा है समय, एस	1.9	1.7

पारदर्शिता और रंग फिल्टर

अक्सर खेलों में, हम निष्क्रिय तत्वों के लिए पारभासी चित्रों का उपयोग करते हैं। इस परियोजना में, पारदर्शिता के अलावा, खेल में तत्वों को उत्पन्न करने के लिए रंग फिल्टर की आवश्यकता होती है, ताकि एक तत्व का एक बार उपयोग किया जा सके, लेकिन, इसे अलग तरह से रंगने से, हमें अलग-अलग तत्व मिलेंगे।

यह पता चला कि हम अल्फा या कलरफिल्टर को लागू नहीं कर सकते, क्योंकि पुस्तकालय विशिष्ट बिटमैप को लोड नहीं करता है, लेकिन चित्रयोग्य, और Android स्रोतों में हम इस वर्ग के लिए खाली तरीके देखते हैं:

 @Override public void setColorFilter(ColorFilter colorFilter) {} @Override public void setAlpha(int alpha) {} 

इससे पहले, PictureDrawable क्लास का सामना कभी नहीं किया गया था, और यह एक बड़ा आश्चर्य था।

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

 SVG svg = SVGParser.getSVGFromResource(getResources(), rawSvgId, filterColor); 

और SVGHandler में ही एक ऐसी विधि थी:

 public void setFilterColor(int filterColor) { fillPaint.setColorFilter(new PorterDuffColorFilter(filterColor, Mode.MULTIPLY)); } 

नतीजतन, हम एक चित्र से विभिन्न रंगों के कई चित्र प्राप्त करने में सक्षम थे।

आप फिलपेंट के लिए अल्फा भी सेट कर सकते हैं, लेकिन गेम्स में यह संपत्ति एक गतिशील रूप में आवश्यक है (एक तत्व पर क्लिक करना पारदर्शी हो जाता है), और हर बार एक नई छवि लोड करना असुविधाजनक है। इसलिए, इस प्रभाव को स्केलिंग (क्लिक किया गया - तत्व घट गया) द्वारा बदल दिया गया था।

GPU मजबूर बारीकियों

आवेदन शुरू करने के बाद, निम्नलिखित त्रुटियां हमारे पास आने लगीं:

 java.lang.UnsupportedOperationException at android.view.GLES20Canvas.drawPicture(GLES20Canvas.java:895) at android.graphics.drawable.PictureDrawable.draw(PictureDrawable.java:73) 

यह पता चला कि यदि डिवाइस पर "डेवलपर विकल्प - फोर्स जीपीयू रेंडरिंग" सेटिंग सक्षम है, तो हमारा एप्लिकेशन क्रैश हो जाएगा, क्योंकि कैनवस के ड्रापिक्योर () पद्धति हार्डवेयर त्वरण का समर्थन नहीं करती है। आप Android डेवलपर पर इसके बारे में पढ़ सकते हैं।
इसके अलावा, एंड्रॉइड में एक सरल संकेत प्रकट होता है: हार्डवेयरएक्लेरेटेड = "झूठा" समस्या को हल नहीं करता है - सेटिंग्स में उपयोगकर्ता चेकमार्क की एक उच्च प्राथमिकता है।

एक काफी सरल समाधान पाया गया: सभी दृश्य जो हमारे चित्र के साथ काम करते हैं, SVG से प्राप्त किए गए, हार्डवेयर त्वरण को अक्षम करते हैं।
चूँकि इस कार्यशीलता के साथ काम करने के लिए एंड्रॉइड 3.0 (एपीआई 11) में हार्डवेयर एक्सेलेरेशन फंक्शन दिखाई दिया, इसलिए हमें अपनी परियोजना के लक्ष्य sdk को 8 से 11 तक बदलना पड़ा।

 public static void setSoftwareLayerType(View view) { try { view.setLayerType(View.LAYER_TYPE_SOFTWARE, null); } catch (NoSuchMethodError e) { //Do nothing - this happens on API < 11 } } 

निष्कर्ष

आइए एंड्रॉइड में एसवीजी प्रारूप में वेक्टर छवियों के साथ काम को सारांशित करें।

पेशेवरों:

• एक विशाल प्लस जिसमें से अन्य सभी एक वेक्टर चित्रण का अनुसरण करते हैं।
• चूंकि चित्र वेक्टर है, यह पूरी तरह से सभी स्क्रीन आकारों पर प्रदर्शित होता है।
• एसवीजी छवियों का आकार छोटा है।
• विभिन्न प्रस्तावों के लिए कई बार एक तस्वीर का उपयोग किया जाता है।
• आवेदन के लिए चित्र तैयार करने की प्रक्रिया कम हो गई है।

विपक्ष:

• तस्वीरों को केवल आनुपातिक रूप से बढ़ाया जाता है।
• पारदर्शिता समर्थित नहीं है।
• ग्राफिक्स को सरल किया जाना चाहिए - अधिक वेक्टर तत्व, जितना अधिक फ़ाइल का वजन होता है। यह छाया और चमक का उपयोग करने के लिए अवांछनीय है, क्योंकि इससे एसवीजी फ़ाइलों का आकार कई गुना बढ़ जाता है।

एसवीजी के साथ प्रयोगों के परिणामस्वरूप, बच्चों के "लर्निंग शेप और शेप" के लिए एक एप्लिकेशन का जन्म हुआ। आप Google Play पर एप्लिकेशन से परिचित हो सकते हैं:
play.google.com/store/apps/details?id=com.whisperarts.kids.forms
परिणामी छवियों की संख्या:

• पीएनजी - 3 (स्प्लैशस्क्रीन और मेनू के लिए 2 पृष्ठभूमि);
• एसवीजी तत्व - 97;
• आवेदन का आकार 3.5 एमबी है।

हमारे "लर्न कलर्स" एप्लिकेशन की तुलना में (जो आकार में 8 एमबी है), जो लगभग कार्यक्षमता में समान है, 50% से अधिक की जीत स्पष्ट है।

खुद के लिए, हमने अपने अनुप्रयोगों में एसवीजी छवियों का उपयोग करने का फैसला किया, क्योंकि यह अलग-अलग स्क्रीन रिज़ॉल्यूशन के लिए छवियों को विकसित करने और अपनाने की प्रक्रिया को काफी तेज करता है, और साथ ही आवेदन के वजन को भी काफी कम कर देता है।

हमें उम्मीद है कि लेख में हमने जो अनुभव साझा किया है वह आपको अनुप्रयोगों के लिए चित्र तैयार करने की प्रक्रिया की समीक्षा करने और एसवीजी प्रारूप का उपयोग करने के बारे में सोचने में भी मदद करेगा।

पुनश्च: यदि आपने पहले से ही अपनी परियोजनाओं में एसवीजी का उपयोग किया है या अन्यथा एसवीजी का उपयोग करते समय हमें आने वाली समस्याओं को दरकिनार किया है - टिप्पणियों में लिखें। हमें आपके अनुभव को सुनकर खुशी होगी।