Android लेआउट के पिक्सेल-परिपूर्ण लेआउट

Android एप्लिकेशन इंटरफ़ेस विकसित करना कोई आसान काम नहीं है। हमें संकल्प और पिक्सेल घनत्व (DPI) की विविधता को ध्यान में रखना होगा। बिल्ली के तहत, लेआउट में एंड्रॉइड अनुप्रयोगों के डिज़ाइन लेआउट के व्यावहारिक सुझाव, जो एक डिवाइस पर लेआउट से मेल खाते हैं और स्पष्ट डिजाइन अवरोधों के बिना दूसरों पर खिंचाव करते हैं: फ़ॉन्ट अतिप्रवाह; विशाल खाली स्थान और अन्य कलाकृतियाँ।

UPD: विवादास्पद पोस्ट, लेकिन टिप्पणियों में बहुत मूल्यवान सलाह




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

मुझे सही करने और सही लेआउट पर अपनी बात व्यक्त करने के लिए टिप्पणीकारों को बहुत धन्यवाद। यदि आपको लेआउट के पूर्ण संयोग की आवश्यकता नहीं है, तो टिप्पणियों के सुझावों का सारांश:

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

  विभिन्न स्क्रीन रिज़ॉल्यूशन के लिए अलग-अलग फ़ॉन्ट आकार का उपयोग करें।
  मूल्यों में dens.xml text_size = 16sp
  मूल्यों में-sw600dp \ dens.xml text_size = 20sp
  in-sw720dp \ dens.xml text_size = 24sp

यदि आवश्यक हो, तो पोस्ट में हमारे विचार पर एक नज़र डालें।

IPhone लेआउट पर, iPhone 4 और iPhone 5 की बिल्कुल और केवल दो स्क्रीन सेट की गई हैं। हम दो लेआउट बनाते हैं, एक एप्लीकेशन लिखते हैं और लेआउट में ट्रांसलूसेंट स्क्रीनशॉट्स लगाते हैं। कोई समस्या नहीं है, डिजाइनर की इच्छा स्पष्ट है, इसे डेवलपर, परीक्षक या यहां तक ​​कि बिल्ड सर्वर द्वारा सत्यापित किया जा सकता है।

एंड्रॉइड के तहत, हमारे पास दो समस्याएं हैं: आप अनंत संख्या में लेआउट नहीं बना सकते हैं और आप अनंत संख्या में उपकरणों की तुलना सीमित संख्या में नहीं कर सकते हैं। डिजाइनर मैन्युअल रूप से जांचते हैं। डेवलपर्स को अक्सर पता नहीं होता है कि तत्वों और स्केल फोंट को ठीक से कैसे बढ़ाया जाए। पुनरावृत्तियों की संख्या अनंत तक जाती है।

अराजकता को सुव्यवस्थित करने के लिए, हम निम्नलिखित लेआउट एल्गोरिथ्म में आए। किसी भी फ्लैगशिप फुल-एचडी फोन के लिए लेआउट तैयार किए जाते हैं और लेआउट दिया जाता है। बाकी वे सुंदर रूप से अनुकूलित करते हैं। तैयार एप्लिकेशन को स्मार्टफोन के लोकप्रिय मॉडल पर डिजाइनर द्वारा जांचा जाता है। विधि सभी फोन के लिए काम करती है; गोलियाँ (> 6.5 इंच) के लिए अलग लेआउट और लेआउट की आवश्यकता होती है।

हाथ में, मेरे पास केवल नेक्सस 4 है इसकी स्क्रीन विशेषताओं को एक उदाहरण के रूप में लें।

एक नकली पोर्टफोलियो एप्लिकेशन के लेआउट जो हम टाइप करेंगे (पूर्ण आकार क्लिक करके)।

ख़ाका

हम नेस्टर्ड रैखिक के माध्यम से मुख्य लेआउट करते हैं। पिक्सेल में तत्वों और ब्लॉकों के आकार क्रमशः लेआउट से वजन और वेटसम में स्थानांतरित किए जाते हैं। इंडेंटेशन हम फ्रेमलेआउट या आवश्यक स्थानों में हम गुरुत्वाकर्षण जोड़ते हैं।

उदाहरण के लिए, हम अनुप्रयोगों की सूची का सेल बनाते हैं:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 488 = 768 - 40 ( ) - 40 ( ) - 200 ( ) --> <LinearLayout android:id="@+id/appLstItemLayout" android:orientation="horizontal" android:layout_width="0dp" android:layout_height="0dp" android:gravity="center" android:weightSum="488" android:background="@drawable/bg_item"> <ImageView android:id="@+id/appImg" android:layout_width="wrap_content" android:layout_height="match_parent" android:adjustViewBounds="true" android:src="@drawable/square"/> <FrameLayout android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="20"/> <!-- 130 =   - 40 ( ) --> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="428" android:gravity="center" android:weightSum="130"> <FrameLayout android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="55"/> <TextView android:id="@+id/titleTxt" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom"/> <FrameLayout android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="10"/> <ru.touchin.MySimpleAndAwesomeRatingBar android:id="@+id/appRatingBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical"/> <FrameLayout android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="25"/> </LinearLayout> </LinearLayout> </FrameLayout> 

आगे हमें डिस्प्लेमेट्रिक्स जादू की बहुत आवश्यकता है, हम इसके लिए एक स्थिर सहायक लिखेंगे।

 public class S { private static final int ORIGINAL_VIEW_WIDTH = 768; private static final int ORIGINAL_VIEW_HEIGHT = 1184; private static final int ORIGINAL_VIEW_DIAGONAL = calcDiagonal(ORIGINAL_VIEW_WIDTH, ORIGINAL_VIEW_HEIGHT); private static int mWidth; private static int mHeight; private static int mDiagonal; private static float mDensity; static { DisplayMetrics metrics = TouchinApp.getContext().getResources().getDisplayMetrics(); mWidth = metrics.widthPixels; mHeight = metrics.heightPixels; mDiagonal = calcDiagonal(mWidth, mHeight); mDensity = metrics.density; } public static int hScale(int value){ return (int)Math.round(value * mWidth / (float) ORIGINAL_VIEW_WIDTH); } public static int vScale(int value){ return (int)Math.round(value * mHeight / (float) ORIGINAL_VIEW_HEIGHT); } public static int dScale(int value){ return (int)Math.round(value * mDiagonal / (float) ORIGINAL_VIEW_DIAGONAL); } public static int pxFromDp(int dp){ return (int)Math.round(dp * mDensity); } private static int calcDiagonal(int width, int height){ return (int)Math.round(Math.sqrt(width * width + height * height)); } } 

1184 बिना बटन के नेक्सस 4 की ऊंचाई है, 768 चौड़ाई है। इन मानों का उपयोग यह पता लगाने के लिए किया जाता है कि जिस डिवाइस पर एप्लिकेशन चल रहा है उसकी ऊंचाई और चौड़ाई संदर्भ से कितनी बार अलग है।

स्क्रॉल दृश्य और सूची

वेटसुम के साथ दृष्टिकोण स्क्रॉल करने योग्य तत्वों के लिए स्वीकार्य नहीं है; स्क्रॉल के साथ उनका आंतरिक आकार असीमित है। स्क्रॉलव्यू और सूची के लेआउट के लिए, हमें कोड (130 - सूची आइटम की ऊंचाई) में उनके आकार निर्धारित करने की आवश्यकता है।

 if (view == null) { view = mInflater.inflate(R.layout.item_app_list, viewGroup, false); view.setLayoutParams(new AbsListView.LayoutParams (ViewGroup.LayoutParams.MATCH_PARENT, S.dScale(130))); } 

और फिर आप वेटसुम के साथ ट्रिक लगा सकते हैं।

तस्वीरें

एप्लिकेशन आइकन का आकार कोड में सेट है:

 view.findViewById(R.id.appImg).setLayoutParams(new LinearLayout.LayoutParams(S.dScale(240) - S.pxFromDp(20), S.dScale(240) - S.pxFromDp(20))); 

जहां २४० सूची मद की ऊंचाई है, २० ऊपर और नीचे इंडेंटेशन ऊंचाई है।

फोंट

एंड्रॉइड स्क्रीन के आकार के लिए आनुपातिक एक इकाई प्रदान नहीं करता है। फ़ॉन्ट आकार की गणना डिवाइस के विकर्ण के आधार पर की जाती है:

 textSizePx = originalTextSizePx * (deviceDiagonalPx / originalDeviceDiagonalPx ) 

हां, कोड में फ़ॉन्ट आकार (मूल लेआउट पर पिक्सल में 36 फ़ॉन्ट आकार) सेट करना होगा।

 titleTxt.setTextSize(TypedValue.COMPLEX_UNIT_PX, S.dScale(36)); 

ग्राफिक्स टिप्स

1. जहां संभव हो, नौ-पैच का उपयोग करें, जहां असंभव है - डिजाइन को फिर से तैयार करें।
2. आकार का उपयोग करते हुए सरल तत्वों को ड्रा करें
3. रनटाइम में छवियों को स्केल करने से बचें

नौ-पैच एक ग्राफिक संसाधन है जिसमें मेटा-जानकारी है कि इसे कैसे बढ़ाया जाना चाहिए। Android के दस्तावेज़ में या Habr पर और पढ़ें ।

सभी पैच के लिए नौ-पैच को काटने की आवश्यकता है: ldpi mdpi tvdpi hdpi, xhdpi, xdhdpi। स्केलिंग संसाधन जब अनुप्रयोग चल रहा है, तो खराब है, और नौ-पैच स्केलिंग अप्रत्याशित कलाकृतियों की ओर जाता है। किसी भी मामले में नाइन-पैच में इंडेंट न करें, वे सामग्री के अनुपात में खींचने के लिए अलग-अलग लेआउट तत्वों द्वारा बनते हैं।

आकार

यदि संसाधन को सरल ज्यामितीय आकार और ग्रेडिएंट में आसानी से विघटित किया जाता है, तो स्लाइसिंग के बजाय xml- आकार का उपयोग करना बेहतर होता है। उदाहरण के लिए, आइए सूची में परियोजना के चारों ओर एक पृष्ठभूमि फ्रेम बनाएं, जिसे हमने नौ-पैच के रूप में ऊपर काटा।

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- "shadow" --> <item> <shape android:shape="rectangle" > <corners android:radius="5px" /> <solid android:color="#08000000"/> </shape> </item> <item android:bottom="1px" android:right="1px" android:left="1px" android:top="1px"> <shape android:shape="rectangle" > <corners android:radius="4px" /> <solid android:color="#10000000"/> </shape> </item> <item android:bottom="2px" android:right="2px" android:left="2px" android:top="2px"> <shape android:shape="rectangle" > <corners android:radius="3px" /> <solid android:color="#10000000"/> </shape> </item> <item android:bottom="3px" android:right="3px" android:left="3px" android:top="3px"> <shape android:shape="rectangle"> <corners android:radius="2px" /> <solid android:color="#ffffff"/> </shape> </item> </layer-list> 

तस्वीरें

एंड्रॉइड स्केलिंग ग्राफिक्स एक समय लेने वाली और स्मृति-गहन संचालन है। एंड्रॉइड के अंदर की तस्वीरों को एक बिटमैप के रूप में संसाधित किया जाता है। उदाहरण के लिए, एक स्पलैश स्क्रीन से 500x500 के आकार में हमारा लोगो 1mb बिटमैप ( 4 पिक्सेल प्रति पिक्सेल ) में पैक किया जाता है, जब स्केलिंग, एक और बिटमैप बनाया जाता है, तो 500kb कहते हैं। या उपलब्ध प्रक्रिया के प्रति 24mb का 1.5mb । हमने ग्राफिक्स-समृद्ध परियोजनाओं में बार-बार मेमोरी की कमी का सामना किया है।

इसलिए, मैं उन चित्रों की आपूर्ति करने का प्रस्ताव करता हूं, जिन्हें नोड-फोल्डर में एक विशाल संसाधन के रूप में नौ-पैच या आकृति के साथ वर्णित नहीं किया जा सकता है और पहली शुरुआत में, छवि को वांछित आकार में स्केल करें और परिणाम को कैश करें। यह हमें एप्लिकेशन को गति (पहले लॉन्च के अलावा) और मेमोरी खपत को कम करने की अनुमति देगा।

सर्वर (हमारे लेआउट पर एप्लिकेशन आइकन) से भरे हुए जटिल संसाधनों के लिए, आदर्श विकल्प यह है कि सर्वर किसी भी आकार की तस्वीरें देगा। उदाहरण के लिए, स्ट्रीम प्रोजेक्ट पर किया गया। एप्लिकेशन स्मार्टफोन स्क्रीन के लिए वांछित छवि आकार की गणना करता है जहां यह चल रहा है, और उन्हें सर्वर से अनुरोध करता है।

 http://<secret_domain>/media/img/movies/vposter/plain/22741680/<  px>_<  px>.jpg 

पीएस युक्तियों का आविष्कार किया जाता है और पोस्ट का आधार हमारे एंड्रॉइड गुरु लेसा द्वारा लिखा गया था, उसे बहुत धन्यवाद!

और आप एंड्रॉइड के लिए लेआउट लेआउट की सलाह कैसे देते हैं? डिज़ाइनर कितने लेआउट बनाता है? आप ग्राफिक संसाधनों को कैसे संभालते हैं?

---

हमारे हब्र-ब्लॉग (ऊपरी दाएं बटन) की सदस्यता लें। हर गुरुवार, मोबाइल विकास, विपणन और मोबाइल स्टूडियो व्यवसाय के बारे में दिलचस्प लेख। अगला लेख (5 सितंबर) "सी # आईओएस और एंड्रॉयड पर async"