🕟 🦐 🥓 कस्टम लेआउट। भाग 2. सेललैटआउट 👨‍🎓 👈🏻 🐼

फिर से नमस्कार, साथियों।

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

वंशज गुण

इससे पहले कि हम अपना मुख्य कार्य शुरू करें - वंशजों को मापना और उनकी स्थिति बनाना, हमें यह निर्धारित करने की आवश्यकता है कि उनके पास क्या गुण होंगे।
हमारे प्रत्येक वंश में निम्नलिखित गुण होंगे:

बाएँ - बाएँ सेल
शीर्ष - शीर्ष सेल
cellsWidth - क्षैतिज रूप से कोशिकाओं की संख्या
cellsHeight - लंबवत कोशिकाओं की संख्या

आइए इन गुणों को xml में परिभाषित करें:

<resources> <declare-styleable name="CellLayout"> <attr name="columns" format="integer" /> <attr name="spacing" format="dimension" /> <attr name="layout_left" format="integer" /> <attr name="layout_top" format="integer" /> <attr name="layout_cellsWidth" format="integer" /> <attr name="layout_cellsHeight" format="integer" /> </declare-styleable> </resources>

हमने अपने लेआउट के वैश्विक गुणों को भी निर्धारित किया है - कॉलम ( कॉलम ) की संख्या और सेल ( स्पेसिंग ) के अंदर इंडेंटेशन।

लेआउट परम

अच्छा, चलिए शुरू करते हैं। एक अंतर्निहित व्यूग्रुप बनाएं, इसे सेललैटआउट कहें।
पहली चीज़ जो हम करना चाहते हैं, वह है हमारा लेआउटपार्म्स, जिसमें पहले से परिभाषित गुण होंगे, और जो हमारे कंटेनर के सभी वंशजों को सौंपा जाएगा।
लेआउटपार्म्स एक विशेष विशेषता कंटेनर है जो कंटेनर के प्रत्येक वंशज को पारित किया जाता है। प्रत्येक कंटेनर वंशजों के लिए अपनी स्वयं की गैर-मानक विशेषताओं को परिभाषित कर सकता है (उदाहरण के लिए, RelativeLayout बहुत सारे लेआउट_ * विशेषताओं का परिचय देता है, जो वंश के लिए उपलब्ध हैं, जैसे कि लेआउट_टोलेफ्टऑफ)। इसलिए, प्रत्येक प्रकार के कंटेनर मूल सेट का विस्तार कर सकते हैं। मूल सेट ViewGroup.LayoutParams (layout_width, layout_height) में लागू किया गया है। इसके अलावा, थोड़ा उन्नत विकल्प भी है - मार्जिनलआउटआउट, जो मार्जिन जोड़ता है।

 public static class LayoutParams extends ViewGroup.LayoutParams { int top = 0; int left = 0; int width = 1; int height = 1; public LayoutParams(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CellLayout); left = a.getInt(R.styleable.CellLayout_layout_left, 0); top = a.getInt(R.styleable.CellLayout_layout_top, 0); height = a.getInt(R.styleable.CellLayout_layout_cellsHeight, -1); width = a.getInt(R.styleable.CellLayout_layout_cellsWidth, -1); a.recycle(); } public LayoutParams(ViewGroup.LayoutParams params) { super(params); if (params instanceof LayoutParams) { LayoutParams cellLayoutParams = (LayoutParams) params; left = cellLayoutParams.left; top = cellLayoutParams.top; height = cellLayoutParams.height; width = cellLayoutParams.width; } } public LayoutParams() { this(MATCH_PARENT, MATCH_PARENT); } public LayoutParams(int width, int height) { super(width, height); } }

कुछ खास नहीं है, जैसा कि आप देख रहे हैं, यहाँ। ViewGroup.LayoutParams का एक उपवर्ग जो हमारे गुणों को संग्रहीत करता है और उन्हें XML से लोड करता है।
अब, हम अपने कंटेनर को इस श्रेणी के एक उदाहरण को अपने सभी वंशजों को स्थानांतरित करने के लिए कहना चाहते हैं। ऐसा करने के लिए, कई ViewGroup विधियों को ओवरराइड करें:

 public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) { return new CellLayout.LayoutParams(getContext(), attrs); } protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { return p instanceof CellLayout.LayoutParams; } protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) { return new CellLayout.LayoutParams(p); } protected ViewGroup.LayoutParams generateDefaultLayoutParams() { return new LayoutParams(); }

सामान्य तौर पर, मुझे लगता है कि विधियों के नाम खुद के लिए बोलते हैं।

माप

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

हमें setMeasuredDimension (चौड़ाई, ऊंचाई) को कॉल करना चाहिए; इसमें विधि, जहां चौड़ाई और ऊंचाई हमारे आकार हैं
इनपुट डेटा उसे एक दिलचस्प तरीके से हस्तांतरित किया जाता है।

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

बिल्कुल आसान है। यह या तो एक स्पष्ट रूप से परिभाषित आकार है (उदाहरण के लिए, layout_width = "100dp"), या match_parent, तो हमें पूर्वज के संगत पक्ष का आकार मिलेगा।
AT_MOST - इंगित करता है कि हमारा घटक किसी दिए गए मूल्य से अधिक नहीं हो सकता है। उदाहरण के लिए, यदि इसमें लेआउट_ एक्सपोज़र = "रैप_ कॉन्टेंट" है और पूर्वजों की एक निश्चित चौड़ाई है, तो वहां AT_MOST <पूर्वजों की चौड़ाई> होगी
UNSPECIFIED - जब ऊंचाई निर्धारित करना असंभव है। यह स्क्रॉल कंटेनर जैसे कुछ कंटेनरों द्वारा उपयोग किया जाता है, और, सामान्य तौर पर, पूर्वजों को दिए गए दिशा में असीमित रूप से बढ़ने की अनुमति देता है।

माप की रणनीति इस प्रकार होगी:

क्षैतिज रूप से, यदि पूर्वज आयामों को AT_MOST या सटीक रूप से सेट करता है - हम पूर्वज द्वारा निर्धारित आकार का उपयोग करते हैं। यदि पूर्वज UNSPECIFIED के आकार को सेट करता है तो थोड़ा अधिक जटिल। समस्या यह है कि हम सेल के आकार को जाने बिना चौड़ाई की गणना नहीं कर सकते हैं, जो बदले में पूर्वजों द्वारा निर्दिष्ट पंक्ति में कोशिकाओं की चौड़ाई / संख्या के रूप में गणना की जाती है। इसलिए, मैंने तय किया, यदि हमारे पास पूर्वजों द्वारा निर्धारित चौड़ाई नहीं है, तो हम सेल आकार के रूप में 48dp का उपयोग करेंगे और इसके आधार पर चौड़ाई nt की गणना करेंगे।
ऊर्ध्वाधर दिशा में, चूंकि हमारे घटक को स्क्रॉलव्यू के अंदर उपयोग करने की सबसे अधिक संभावना है और UNSPECIFIED प्राप्त होता है, इस मामले में, हम वाई अक्ष के साथ सबसे कम वंश का निर्धारण करेंगे और सीमा को इसकी निचली सीमा के रूप में सेट करेंगे। अन्यथा, हम बस पूर्वज हमें क्या देते हैं उससे अधिक नहीं बढ़ेंगे। चूंकि हमारा घटक आंतरिक स्क्रॉलिंग का समर्थन नहीं करता है, जो सब कुछ UNSPECIFIED नहीं है, वह बहुत मायने नहीं रखता है।

आइए देखें कि मैंने इसे कैसे लागू किया:

onLayout

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int width = 0; int height = 0; if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.EXACTLY) { width = MeasureSpec.getSize(widthMeasureSpec); cellSize = (float) (getMeasuredWidth() - getPaddingLeft() - getPaddingRight()) / (float) columns; } else { cellSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_CELL_SIZE, getResources() .getDisplayMetrics()); width = (int) (columns * cellSize); } int childCount = getChildCount(); View child; int maxRow = 0; for (int i = 0; i < childCount; i++) { child = getChildAt(i); LayoutParams layoutParams = (LayoutParams) child.getLayoutParams(); int top = layoutParams.top; int w = layoutParams.width; int h = layoutParams.height; int bottom = top + h; int childWidthSpec = MeasureSpec.makeMeasureSpec((int) (w * cellSize) - spacing * 2, MeasureSpec.EXACTLY); int childHeightSpec = MeasureSpec.makeMeasureSpec((int) (h * cellSize) - spacing * 2, MeasureSpec.EXACTLY); child.measure(childWidthSpec, childHeightSpec); if (bottom > maxRow) { maxRow = bottom; } } int measuredHeight = Math.round(maxRow * cellSize) + getPaddingTop() + getPaddingBottom(); if (heightMode == MeasureSpec.EXACTLY) { height = MeasureSpec.getSize(heightMeasureSpec); } else if (heightMode == MeasureSpec.AT_MOST) { int atMostHeight = MeasureSpec.getSize(heightMeasureSpec); height = Math.min(atMostHeight, measuredHeight); } else { height = measuredHeight; } setMeasuredDimension(width, height); }

किया, हमारे घटक ने अब हम उसमें क्या रखा है, उसके आधार पर इसकी ऊंचाई बदल जाती है। लेकिन वंशज कहां हैं? हम उन्हें अगले चरण में जोड़ेंगे: लेआउट।

व्यवस्था

अगला चरण लेआउट है। यह अद्भुत onLayout पद्धति में चलता है। यहां सब कुछ बहुत सरल है - हम अपने प्रत्येक बच्चे के माध्यम से जाते हैं और उसे वांछित सेल में स्थिति देते हैं।

 protected void onLayout(boolean changed, int l, int t, int r, int b) { int childCount = getChildCount(); View child; for (int i = 0; i < childCount; i++) { child = getChildAt(i); LayoutParams layoutParams = (LayoutParams) child.getLayoutParams(); int top = (int) (layoutParams.top * cellSize) + getPaddingTop() + spacing; int left = (int) (layoutParams.left * cellSize) + getPaddingLeft() + spacing; int right = (int) ((layoutParams.left + layoutParams.width) * cellSize) + getPaddingLeft() - spacing; int bottom = (int) ((layoutParams.top + layoutParams.height) * cellSize) + getPaddingTop() - spacing; child.layout(left, top, right, bottom); } }

जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है।

परिणाम

अचानक, वह सब है आउटपुट पर, हमें एक सरल लेआउट मिला जो हमें ग्रिड के सापेक्ष तत्वों को रखने की अनुमति देता है। आइए एक उदाहरण देखें:

शाखा का लेआउट

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:cl="http://schemas.android.com/apk/res/com.evilduck.celllayout" android:layout_width="match_parent" android:layout_height="wrap_content" tools:ignore="HardcodedText" > <com.evilduck.celllayout.CellLayout android:id="@+id/cell_layout" android:layout_width="match_parent" android:layout_height="wrap_content" cl:columns="4" cl:spacing="1dp" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="0" cl:layout_top="0" android:background="#00FF00" android:text="View 1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="3" cl:layout_left="1" cl:layout_top="0" android:background="#FFFF00" android:text="View 2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="1" cl:layout_top="1" android:background="#FFFFFF" android:text="View 3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="0" cl:layout_top="1" android:background="#00FFF0" android:text="View 4" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="2" cl:layout_left="2" cl:layout_top="1" android:background="#00FA00" android:text="View 5" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="2" cl:layout_cellsWidth="3" cl:layout_left="0" cl:layout_top="2" android:background="#AAFFAA" android:text="View 5" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="2" cl:layout_cellsWidth="1" cl:layout_left="3" cl:layout_top="2" android:background="#45CCdd" android:text="View 6" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="3" cl:layout_cellsWidth="1" cl:layout_left="0" cl:layout_top="4" android:background="#FF00FF" android:text="View 7" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="3" cl:layout_cellsWidth="1" cl:layout_left="1" cl:layout_top="4" android:background="#FFFF00" android:text="View 8" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="3" cl:layout_cellsWidth="1" cl:layout_left="2" cl:layout_top="4" android:background="#00FF00" android:text="View 9" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="3" cl:layout_top="4" android:background="#FFFF00" android:text="View 10" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="3" cl:layout_top="5" android:background="#FFFFFF" android:text="View 11" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" cl:layout_cellsHeight="1" cl:layout_cellsWidth="1" cl:layout_left="3" cl:layout_top="6" android:background="#555555" android:text="View 12" /> </com.evilduck.celllayout.CellLayout> </ScrollView>

परिणाम:

हुर्रे, हम जो चाहते थे।

निष्कर्ष

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

मैंने यह भी कहा, सिर्फ मनोरंजन के लिए, तत्वों का एक एनिमेटेड मिश्रण। मूड अच्छा था।

आपका ध्यान देने के लिए धन्यवाद।

EDIT : लेख प्रकाशित होने के बाद, एक पाठक ने मुझसे संपर्क किया और कहा कि एंड्रॉइड लांचर एक समान लेआउट प्रबंधक का उपयोग करता है, जिसे यहां तक कि समान भी कहा जाता है।
यहाँ एक लिंक है, शायद कोई काम आएगा।
https://github.com/chrislacy/LauncherJellyBean/blob/master/src/com/launcherjelly/android/CellLayout.java ।

कस्टम लेआउट। भाग 2. सेललैटआउट

वंशज गुण

लेआउट परम

माप

व्यवस्था

परिणाम

निष्कर्ष

More articles: