अस्वीकरण
यह उत्तर 2013 से है और गंभीरता से पुराना है। Android 3.2 के रूप में स्क्रीन घनत्व के अब 6 समूह हैं। जैसे ही मैं सक्षम हूं, यह उत्तर अपडेट हो जाएगा, लेकिन ईटीए के साथ नहीं। इस समय सभी घनत्वों के लिए आधिकारिक दस्तावेज देखें (हालांकि विशिष्ट पिक्सेल आकारों की जानकारी हमेशा ढूंढना कठिन है)।
यहाँ tl / dr संस्करण है
इसके साथ, एंड्रॉइड डिवाइस की छवि घनत्व के लिए उपयुक्त फ़ाइल का चयन करेगा, फिर यह 9-पैच मानक के अनुसार छवि को खींच देगा।
tl का अंत; डॉ। आगे पूरी पोस्ट
मैं प्रश्न के डिजाइन-संबंधित पहलू के संबंध में उत्तर दे रहा हूं। मैं एक डेवलपर नहीं हूं, इसलिए मैं प्रदान किए गए कई समाधानों को लागू करने के लिए कोड प्रदान करने में सक्षम नहीं होगा। काश, मेरा इरादा उन डिजाइनरों की मदद करने का है जो तब खो गए हैं जब मैं अपने पहले एंड्रॉइड ऐप को विकसित करने में मदद कर रहा था।
सभी आकार फिटिंग
एंड्रॉइड के साथ, कंपनियां अपने मोबाइल फोन और टेबल को लगभग किसी भी आकार में विकसित कर सकती हैं, लगभग किसी भी संकल्प के साथ वे चाहती हैं। उसके कारण, स्प्लैश स्क्रीन के लिए कोई "सही छवि आकार" नहीं है, क्योंकि कोई निश्चित स्क्रीन रिज़ॉल्यूशन नहीं हैं। यह उन लोगों के लिए एक समस्या है जो एक स्प्लैश स्क्रीन को लागू करना चाहते हैं।
क्या आपके उपयोगकर्ता वास्तव में एक स्प्लैश स्क्रीन देखना चाहते हैं?
(एक साइड नोट पर, स्पलैश स्क्रीन प्रयोज्य लोगों के बीच कुछ हतोत्साहित करते हैं। यह तर्क दिया जाता है कि उपयोगकर्ता पहले से ही जानता है कि उसने किस ऐप पर टैप किया है, और स्प्लैश स्क्रीन के साथ आपकी छवि को ब्रांड करना आवश्यक नहीं है, क्योंकि यह केवल उपयोगकर्ता के अनुभव को बाधित करता है। एक "विज्ञापन"। इसका उपयोग उन अनुप्रयोगों में किया जाना चाहिए, जब गेम और ऐसे सहित प्रारंभिक (5s +) कुछ लोडिंग की आवश्यकता होती है, ताकि उपयोगकर्ता यह सोचकर अटक न जाए कि ऐप क्रैश हो गया है या नहीं)
स्क्रीन घनत्व; 4 कक्षाएं
इसलिए, बाजार में फोन में कई अलग-अलग स्क्रीन रिज़ॉल्यूशन दिए जाने पर, Google ने कुछ विकल्प और निफ्टी समाधान लागू किए हैं जो मदद कर सकते हैं। आपको सबसे पहले यह जानना है कि Android सभी स्क्रीन को 4 अलग स्क्रीन घनत्वों में अलग करता है:
- कम घनत्व (ldpi ~ 120dpi)
- मध्यम घनत्व (mdpi ~ 160dpi)
- उच्च घनत्व (एचडीपीआई ~ 240 डीपीआई)
- अतिरिक्त-उच्च घनत्व (xhdpi ~ 320dpi) (ये डीपीआई मान सन्निकटन हैं, क्योंकि कस्टम निर्मित डिवाइसों में डीपीआई मान अलग-अलग होंगे)
आपको (यदि आप एक डिजाइनर हैं) यह जानने की जरूरत है कि एंड्रॉइड मूल रूप से डिवाइस के आधार पर 4 छवियों को प्रदर्शित करने के लिए चुनता है। तो आपको मूल रूप से 4 अलग-अलग छवियों को डिज़ाइन करना होगा (हालांकि अधिक विभिन्न स्वरूपों जैसे कि वाइडस्क्रीन, पोर्ट्रेट / लैंडस्केप मोड, आदि के लिए विकसित किया जा सकता है)।
इसे ध्यान में रखते हुए यह जान लें: जब तक आप Android में उपयोग किए जाने वाले हर एक रिज़ॉल्यूशन के लिए एक स्क्रीन डिज़ाइन नहीं करते, आपकी छवि फिट होने के लिए स्क्रीन आकार तक खिंच जाएगी। और जब तक आपकी छवि मूल रूप से एक ढाल या धब्बा है, तब तक आपको स्ट्रेचिंग के साथ कुछ अवांछित विकृति मिलेगी। तो आपके पास मूल रूप से दो विकल्प हैं: प्रत्येक स्क्रीन आकार / घनत्व संयोजन के लिए एक छवि बनाएं, या चार 9-पैच छवियां बनाएं।
सबसे मुश्किल समाधान हर एक संकल्प के लिए एक अलग छप स्क्रीन डिजाइन करना है। आप इस पृष्ठ के अंत में तालिका में प्रस्तावों का पालन करके शुरू कर सकते हैं (और भी हैं। उदाहरण: 960 x 720 वहाँ सूचीबद्ध नहीं है)। और यह मानते हुए कि आपके पास छवि में कुछ छोटे विवरण हैं, जैसे कि छोटे पाठ, आपको प्रत्येक रिज़ॉल्यूशन के लिए एक से अधिक स्क्रीन डिज़ाइन करना होगा। उदाहरण के लिए, एक मध्यम स्क्रीन में प्रदर्शित की जा रही 480x800 की छवि ठीक दिख सकती है, लेकिन छोटी स्क्रीन (उच्च घनत्व / डीपीआई के साथ) पर लोगो बहुत छोटा हो सकता है, या कुछ पाठ अपठनीय हो सकता है।
9-पैच छवि
अन्य समाधान 9-पैच छवि बनाना है । यह मूल रूप से आपकी छवि के चारों ओर एक 1-पिक्सेल-पारदर्शी-सीमा है, और इस सीमा के शीर्ष और बाएं क्षेत्र में काले पिक्सेल को चित्रित करके आप परिभाषित कर सकते हैं कि आपकी छवि के किन हिस्सों में खिंचाव की अनुमति होगी। मैं 9-पैच छवियों के काम करने के विवरण में नहीं जाऊंगा, लेकिन संक्षेप में, पिक्सेल जो शीर्ष और बाएं क्षेत्र में चिह्नों के साथ संरेखित होते हैं, वे पिक्सेल हैं जो छवि को फैलाने के लिए दोहराया जाएगा।
कुछ जमीन नियम
- आप इन छवियों को फोटोशॉप (या किसी भी छवि संपादन सॉफ़्टवेयर जो पारदर्शी pngs बना सकते हैं) में बना सकते हैं।
- 1-पिक्सेल सीमा को पूर्ण परिवर्तन होना चाहिए।
- 1-पिक्सेल पारदर्शी सीमा को आपकी छवि के चारों ओर होना चाहिए, न कि केवल ऊपर और बाएं।
- आप इस क्षेत्र में केवल काले (# 000000) पिक्सेल खींच सकते हैं।
- शीर्ष और बाईं सीमाएँ (जो छवि को खींचती हुई परिभाषित करती हैं) में केवल एक बिंदु (1px x 1px), दो बिंदु (दोनों 1px x 1px) या एक निरंतर रेखा (चौड़ाई x 1px या 1px x ऊँचाई) हो सकती है।
- यदि आप 2 डॉट्स का उपयोग करना चुनते हैं, तो छवि को आनुपातिक रूप से विस्तारित किया जाएगा (ताकि प्रत्येक डॉट अंतिम चौड़ाई / प्राप्त होने तक विस्तार ले जाएगा)
- 1px बॉर्डर को इच्छित बेस फ़ाइल आयामों के अतिरिक्त होना चाहिए। तो एक 100x100 9-पैच छवि को वास्तव में 102x102 (100x100 + 1px ऊपर, नीचे, बाएँ और दाएँ) होना चाहिए
- 9-पैच छवियों को * .9.png के साथ समाप्त होना है
इसलिए आप अपने लोगो (शीर्ष सीमा पर) के दोनों ओर 1 डॉट रख सकते हैं, और इसके ऊपर और नीचे 1 बिंदु (बाईं सीमा पर), और इन चिह्नित पंक्तियों और स्तंभों को फैलाने के लिए केवल पिक्सेल होंगे।
उदाहरण
यहां एक 9-पैच छवि, 102x102px (100x100 अंतिम आकार, एप्लिकेशन उद्देश्यों के लिए):
यहां एक ही छवि का 200% ज़ूम है:
शीर्ष और बाईं ओर 1px निशान नोटिस करें कि कौन सी पंक्तियों / कॉलम का विस्तार होगा।
यहाँ इस छवि को एप्लिकेशन के अंदर 100x100 में कैसा दिखेगा:
और यहां 460x140 तक विस्तारित होने पर क्या होगा:
एक आखिरी बात पर विचार करें। ये चित्र आपकी मॉनीटर स्क्रीन पर और अधिकांश मोबाइल पर ठीक लग सकते हैं, लेकिन यदि डिवाइस में छवि घनत्व (डीपीआई) बहुत अधिक है, तो छवि बहुत छोटी दिखाई देगी। संभवतः अभी भी सुपाठ्य है, लेकिन 1920x1200 संकल्प के साथ एक टैबलेट पर, छवि बीच में एक बहुत छोटे वर्ग के रूप में दिखाई देगी। तो उपाय क्या है? डिजाइन 4 अलग 9-पैच लांचर छवियों, प्रत्येक एक अलग घनत्व सेट के लिए। यह सुनिश्चित करने के लिए कि कोई सिकुड़ नहीं होगा, आपको प्रत्येक घनत्व श्रेणी के लिए न्यूनतम सामान्य रिज़ॉल्यूशन में डिज़ाइन करना चाहिए। यहां सिकुड़ना अवांछनीय है क्योंकि 9-पैच केवल स्ट्रेचिंग के लिए खाते हैं, इसलिए एक सिकुड़ने की प्रक्रिया में छोटे पाठ और अन्य तत्वों को सुगमता मिल सकती है।
यहां प्रत्येक घनत्व श्रेणी के लिए सबसे छोटे, सबसे सामान्य प्रस्तावों की एक सूची दी गई है:
- xlarge (xhdpi): 640x960
- बड़ा (एचडीपीआई): 480x800
- medium (mdpi): 320x480
- छोटा (ldpi): 240x320
इसलिए उपरोक्त प्रस्तावों में चार स्प्लैश स्क्रीन डिज़ाइन करें, छवियों का विस्तार करें, कैनवास के चारों ओर 1px पारदर्शी बॉर्डर रखें, और चिह्नित करें कि कौन सी पंक्तियाँ / कॉलम स्ट्रेचेबल होंगे। ध्यान रखें कि ये चित्र घनत्व श्रेणी के किसी भी उपकरण के लिए उपयोग किए जाएंगे , इसलिए आपकी ldpi छवि (240 x 320) एक अतिरिक्त बड़े टैबलेट पर छोटी छवि घनत्व (~ 120 डीपीआई) के साथ 1024x600 तक खिंच सकती है। तो स्ट्रेचिंग के लिए 9-पैच सबसे अच्छा उपाय है, जब तक आप एक स्प्लैश स्क्रीन के लिए फोटो या जटिल ग्राफिक्स नहीं चाहते हैं (इन सीमाओं को ध्यान में रखें जैसे आप डिज़ाइन बनाते हैं)।
फिर, इस स्ट्रेचिंग के न होने का एकमात्र तरीका प्रत्येक रिज़ॉल्यूशन के लिए एक स्क्रीन (या प्रत्येक रिज़ॉल्यूशन-घनत्व संयोजन के लिए एक डिज़ाइन करना है, यदि आप उच्च / कम घनत्व वाले उपकरणों पर बहुत छोटी / बड़ी होने वाली छवियों से बचना चाहते हैं), या बताने के लिए जहां तक स्ट्रेचिंग होती है वहां पृष्ठभूमि का रंग नहीं है और एक पृष्ठभूमि रंग दिखाई देता है (यह भी याद रखें कि एंड्रॉइड इंजन द्वारा प्रदान किया गया एक विशिष्ट रंग संभवतः रंग प्रोफाइल के कारण फोटोशॉप द्वारा प्रदान किए गए समान विशिष्ट रंग से अलग दिखाई देगा)।
मुझे उम्मीद है कि इससे कोई मतलब होगा। सौभाग्य!