Android GridLayout – Learn with Simple Example

Android GridLayout एक ऐसा Layout है जिसके अन्‍तर्गत हम हमारे User Interface के विभिन्‍न View Controls को एक Grid की तरह Arrange करते हैं। Grid एक प्रकार से Invisible Horizontal व Vertical Grid Lines का बना होता है जो पूरे Layout को Rows व Columns के रूप में Divide कर देते हैं। ये GridLayout काफी हद तक TableLayout के समान ही होता है लेकिन TableLayout की तुलना में GridLayout पर आधारित Layout Create करना आसान होता है।

GridLayout को हम काफी हद तक MS-Excel की Sheet के समान मान सकते हैं जो कि ढ़ेर सारे Rows व Columns के रूप में बना होता है और जहां पर Rows व Columns एक-दूसरे को Intersect करते हैं, उस Intersection Space को Cell के नाम से जाना जाता है।

प्रत्‍येक Grid Line को हम एक Zero Based Index Number की तरह मान सकते हैं जिसका Start 0 से होता है। इसी तरह से Grid के Rows व Columns की Counting भी 0 से ही Start होती है और Top-Left Corner के First Cell का Index Number (0,0) होता है।

किसी भी Cell में किसी भी UI View Control की Positioning को उस Particular Child View के Gravity Setting द्वारा Define किया जाता है। Gravity Setting के माध्‍यम से हम GridLayout के विभिन्‍न Child View Control को Center में Appear होने के लिए, पूरे Cell में Wrap या Fill होने के लिए या फिर Cell के किसी Specific Corner में Position होने के लिए Configure कर सकते हैं।

साथ ही किसी GridLayout Parent के किसी Child View को उसकी rowSpan व columnSpan Properties द्वारा ठीक उसी तरह से Multiple Rows व Columns में Span किया जा सकता है जिस तरह से किसी Excel Sheet में अथवा HTML के Table Layout में किया जाता है।

सामान्‍यत: GridLayout के साथ ही Space Class को भी उपयोग में लिया जाता है जो कि एक बहुत ही Simple Class है और इसका मुख्‍य उद्देश्‍य Layouts के बीच Gap Create करना होता है।

GridLayout के किसी भी Cell में Space View UI Control को भी ठीक उसी तरह से Place किया जा सकता है जिस तरह से अन्‍य UI View Controls को Place करते हैं। साथ ही Space Class किसी GridLayout Cell में Views के चारों ओर Blank Space भी Create कर सकता है जिसे प्रत्‍येक Child View के लिए Top, Right, Bottom व Left Margin Layout Properties का प्रयोग करके Control किया जाता है।

हालांकि यदि हम चाहें तो Android Studio के Layout Editor में Drag and Drop तकनीक द्वारा भी GridLayout Create कर सकते हैं और Properties Window द्वारा Provide की जाने वाली Properties को Properly Use करके उसे अपनी जरूरत के अनुसार Chand या Modify भी कर सकते हैं लेकिन फिर भी यहां हम XML Codes के माध्‍यम से एक GridLayout Create करने के बारे में विस्‍तार से जानेंगे क्‍योंकि Manual Codes को ठीक से समझ लेने के बाद उसे Android Studio द्वारा Graphical Mode में Setup करना काफी आसान हो जाता है।

जब हम Android Studio के माध्‍यम से GridLayout Create करते हैं तो Android Studio हमारी Layout File में निम्‍नानुसार Automatically Generated XML Codes Add कर देता है-

<?xml version="1.0" encoding="utf-8"?>
 <GridLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

</GridLayout>

इसलिए सबसे पहले हमें हमारे GridLayout के लिए Rows व Columns की संख्‍या को निश्चित करना होता है और ये काम हम android:rowCount व android:columnCount Attributes के माध्‍यम से करते हैं। साथ ही अपने Andoird App के Layout Orientation को निश्चित करने के लिए हम android:orientation Attribute को Use कर सकते हैं।

उदाहरण के लिए यदि हमें अगले चित्रानुसार एक Calculator जैसा Layout Create करना हो-

तो हमें 7 Rows व 5 Columns का GridLayout Create करना होगा और इस जरूरत को पूरा करने के लिए हम android:rowCount व android:columnCount Attributes को निम्‍नानुसार तरीके से Specify कर सकते हैं-

<?xml version="1.0" encoding="utf-8"?>
 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:rowCount="7"
 android:columnCount="5">

</GridLayout>

जब हम उपरोक्‍तानुसार XML Codes के माध्‍यम से GridLayout के Rows and Columns की संख्‍या निश्चित कर देते हैं, तो हमारा पूरा Activity Layout कुछ Invisible Grid Lines के माध्‍यम से निम्‍न चित्रानुसार Rows and Columns में Divide हो जाता है:

इसलिए अब यदि में Display TextView UI Control को Layout पर Place करना हो, तो हमें पहली Row के सभी Columns को एक layout_columnSpan Attribute का प्रयोग करते हुए निम्‍नानुसार Specify करना होगा-

<GridLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/glCalculator"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:columnCount="5"
 android:rowCount="7"
 android:padding="@dimen/activity_horizontal_margin" >

<TextView
 android:id="@+id/tvDisplay"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_columnSpan="5"
 android:text="0" />

</GridLayout>

चूंकि Calculator का पूरी Width में फैलना चाहिए इसलिए हमने इसके layout_width Attribute को match_parent Value से Set किया है। साथ ही किसी Calculator का Display Height में भी थोड़ा बड़ा दिखाई देता है, उसमें दिखाई देने वाले Text का Size भी काफी बड़ा होता है और Default Number के रूप में 0 दिखाई देता है जो कि Right Side से Display होता है, इसलिए हम tvDisplay के लिए इन Features को निम्‍नानुसार Add कर सकते हैं-

<TextView
 android:id="@+id/tvDisplay"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_columnSpan="5"
 android:text="0"
 android:padding="10dp"
 android:textAlignment="textEnd"
 android:gravity="end"
 android:textSize="30sp"
 android:textStyle="bold" />

TextView UI Control को Specify करने के बाद अब हमें दूसरी Row के 5 Cells में 5 Button Controls को Add करना है जहां-

• पहला Button Control Row 1, Column 0 Location पर रहेगा,
• दूसरा Button Control Row 1, Column 1 Location पर रहेगा,
• तीसरा Button Control Row 1, Column 2 Location पर रहेगा,
• चौथा Button Control Row 1, Column 3 Location पर रहेगा और
• पांचवा Button Control Row 1, Column 4 Location पर रहेगा।

विभिन्‍न Buttons की Cell Location को Specify करने के लिए Android SDK हमें layout_column व layout_row नाम के दो Attributes Provide करता है जिन्‍हें हम निम्‍नानुसार Use कर सकते हुए इन पांचों Button Controls को Specify कर सकते हैं-

<Button
 android:id="@+id/btnMC"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="1"
 android:text="MC" />

<Button
 android:id="@+id/btnMR"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="1"
 android:layout_row="1"
 android:text="MR" />

<Button
 android:id="@+id/btnMS"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="2"
 android:layout_row="1"
 android:text="MS" />

<Button
 android:id="@+id/btnMPlus"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="3"
 android:layout_row="1"
 android:text="M+" />

<Button
 android:id="@+id/btnMMinus"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="4"
 android:layout_row="1"
 android:text="M-" />

अब यदि हम हमारे इस Current Android App को Run करते हैं, तो हमें हमारा Resultant Output निम्‍नानुसार दिखाई देता है-

हम देख सकते हैं कि हमारे Calculator App का Display तो पूरी Screen Width Occupy कर रहा है क्‍योंकि हमने tvDisplay की layout_width Attribute को match_parent Value से Set किया है लेकिन Buttons पूरी Screen Width Occupy नहीं कर रहे हैं क्‍योंकि हमने इनके layout_width Attribute में wrap_content Value Set किया है। हम इन्‍हें match_parent Value Set भी नहीं कर सकते क्‍योंकि हमें प्रत्‍येक Cell में 1 यानी कुल 5 Button UI Views को Display करना है और यदि हम match_parent Value Set कर दें, तो एक ही UI View Control पूरी Width Occupy कर लेगा। जबकि हम चाहते हैं कि सभी Button Controls इस तरह से Width में Expand हो जाऐं कि बचा हुआ पूरा Screen Width Space आपस में Evenely Share कर लें।

निम्‍न चित्रानुसार एक Complete Calculator Layout Create करने के लिए हमें GridLayout के और भी बहुत सारे Attributes को Use करना पड़ता है जिनके बारे में आगे बताया गया है-

Buy this eBook to read everything about…

• GridLayout layout_columnWeight 
• GridLayout layout_rowWeight
• GridLayout layout_columnSpan
• GridLayout layout_rowSpan
• GridLayout rowCount
• GridLayout columnCount