Grid Layout arrange view in two dimensional grid ( series of
row and column ). The grid is composed of a set of
infinitely thin lines that separate the viewing area into cells.
The intersection of row and column is known as a
grid cell. It is much more like as a table layout but easier than
Table Layout.
Code View of GridView
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
Row
and Column Count
Specify the no. of row and column in
1. rowCount - It's specify the no. of row in a grid.
android:rowCount="int value"
2. rowColumn - It's specify the no. of column in a grid.
android:columnCount="int value"
"int value" - Must be an integer like - 1,2,3,.....
Example -
android:rowCount="8"
android:columnCount="9"
Orientation
GridLayout uses the orientation
property for two purposes:
·
To control the direction.
·
To control which direction or axis should be processed first during the
layout operation:
android:orientation="horizontal"
or
android:orientation="vertical"
program
<?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:columnCount="4" android:rowCount="4" android:background="@color/colorPrimaryDark" android:orientation="horizontal" > <!-- use "vertical" instead "horizontal"--> <TextView android:text=" 1 " android:background="#66ffee" /> <TextView android:text=" 2 " android:background="#66ffee" /> <TextView android:text=" 3 " android:background="#66ffee" /> <TextView android:text=" 4 " android:background="#66ffee" /> <TextView android:text=" 5 " android:background="#66ffee" /> <TextView android:text=" 6 " android:background="#66ffee" /> <TextView android:text=" 7 " android:background="#66ffee" /> <TextView android:text=" 8 " android:background="#66ffee" /> <TextView android:text=" 9 " android:background="#66ffee" /> <TextView android:text=" 10 " android:background="#66ffee" /> <TextView android:text=" 11 " android:background="#66ffee" /> <TextView android:text=" 12 " android:background="#66ffee" /> <TextView android:text=" 13 " android:background="#66ffee" /> <TextView android:text=" 14 " android:background="#66ffee" /> <TextView android:text=" 15 " android:background="#66ffee" /> <TextView android:text=" 16 " android:background="#66ffee" /> </GridLayout>
useDefaultMargin
When
true, GridLayout allocates
default margins around children based on the child's visual characteristics.android:useDefaultMargins="true"
When
false, the default value of
all margins is zero.android:useDefaultMargins="false"
Program
<?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:columnCount="4" android:rowCount="4" android:background="@color/colorPrimaryDark" android:orientation="horizontal" android:useDefaultMargins="true" > <!-- use "vertical" instead "horizontal"--> <TextView android:text=" 1 " android:background="#66ffee" /> <TextView android:text=" 2 " android:background="#66ffee" /> <TextView android:text=" 3 " android:background="#66ffee" /> <TextView android:text=" 4 " android:background="#66ffee" /> <TextView android:text=" 5 " android:background="#66ffee" /> <TextView android:text=" 6 " android:background="#66ffee" /> <TextView android:text=" 7 " android:background="#66ffee" /> <TextView android:text=" 8 " android:background="#66ffee" /> <TextView android:text=" 9 " android:background="#66ffee" /> <TextView android:text=" 10 " android:background="#66ffee" /> <TextView android:text=" 11 " android:background="#66ffee" /> <TextView android:text=" 12 " android:background="#66ffee" /> <TextView android:text=" 13 " android:background="#66ffee" /> <TextView android:text=" 14 " android:background="#66ffee" /> <TextView android:text=" 15 " android:background="#66ffee" /> <TextView android:text=" 16 " android:background="#66ffee" /> </GridLayout>
CellPositioning
A view can be placed
within a specific cell by specifying the intersecting row and column number of
the destination cell.
layout_column : specify
the vertical position of the cell.
android:layout_column="0"
layout_row : specify the horizontal
position of the cell.
android:layout_row="1"
android:layout_row="1"
Note
: remaining cell follow the specified cell.
Program
<?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:columnCount="4" android:rowCount="4" android:background="@color/colorPrimaryDark" android:orientation="horizontal" android:useDefaultMargins="true" > <!-- use "vertical" instead "horizontal"--> <TextView android:text=" 1 " android:background="#66ffee" /> <TextView android:text=" 2 " android:background="#66ffee" /> <TextView android:text=" 3 " android:background="#66ffee" /> <TextView android:text=" 4 " android:background="#66ffee" android:layout_column="0" android:layout_row="1" /> <TextView android:text=" 5 " android:background="#66ffee" /> <TextView android:text=" 6 " android:background="#66ffee" /> <TextView android:text=" 7 " android:background="#66ffee" /> <TextView android:text=" 8 " android:background="#66ffee" /> <TextView android:text=" 9 " android:background="#66ffee" /> <TextView android:text=" 10 " android:background="#66ffee" /> <TextView android:text=" 11 " android:background="#66ffee" /> <TextView android:text=" 12 " android:background="#66ffee" /> <TextView android:text=" 13 " android:background="#66ffee" /> <TextView android:text=" 14 " android:background="#66ffee" /> <TextView android:text=" 15 " android:background="#66ffee" /> <TextView android:text=" 16 " android:background="#66ffee" /> </GridLayout>
row
and column span
A cell can add multiple cell with row or column to make a
single view using 'layout_rowspan' and 'layout_columnspan' attribute.
layout_rowspan : A cell add specified no. of row to this
cell.
android:layout_rowSpan="3"
layout_columnspan : A cell add specified no. of column to
this cell.
android:layout_column="2"
Program
<?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:columnCount="4" android:rowCount="4" android:background="@color/colorPrimaryDark" android:orientation="horizontal" android:useDefaultMargins="true" > <!-- use "vertical" instead "horizontal"--> <TextView android:text=" 1 " android:background="#66ffee" /> <TextView android:text=" 2 " android:background="#66ffee" android:layout_rowSpan="3" /> <TextView android:text=" 3 " android:background="#66ffee" /> <TextView android:text=" 4 " android:background="#66ffee" /> <TextView android:text=" 5 " android:background="#66ffee" /> <TextView android:text=" 6 " android:background="#66ffee" /> <TextView android:text=" 7 " android:background="#66ffee" /> <TextView android:text=" 8 " android:background="#66ffee" /> <TextView android:text=" 9 " android:background="#66ffee" /> <TextView android:text=" 10 " android:background="#66ffee" /> <TextView android:text=" 11 " android:background="#66ffee" /> <TextView android:text=" 12 " android:background="#66ffee" /> <TextView android:text=" 13 " android:background="#66ffee" /> <TextView android:text=" 14 " android:background="#66ffee" /> <TextView android:text=" 15 " android:background="#66ffee" /> <TextView android:text=" 16 " android:background="#66ffee" /> </GridLayout>
Flexible layout : Inserting Spaces in
the GridLayout
For inserting spaces, a spacing
view called Space is used. That is, to insert spaces, the Space view is
inserted as a child view. For example, the following statements insert a space
at the second row in the GridLayout. The width and height of the blank space
are 50dp and 10dp:
<Space
android:layout_row="1"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height="10dp" />
Similarly, the following
statements insert a space at the third row in the GridLayout that spans three
columns:
<Space
android:layout_row="3"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill" />
Program
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnCount="9" android:orientation="horizontal" android:rowCount="8" > <Button android:layout_columnSpan="2" android:layout_gravity="fill" android:layout_rowSpan="2" android:text="1" /> <Button android:layout_columnSpan="2" android:layout_gravity="fill_horizontal" android:text="2" /> <Button android:layout_gravity="fill_vertical" android:layout_rowSpan="4" android:text="3" /> <Button android:layout_columnSpan="3" android:layout_gravity="fill" android:layout_rowSpan="2" android:text="4" /> <Button android:layout_columnSpan="3" android:layout_gravity="fill_horizontal" android:text="5" /> <Button android:layout_columnSpan="2" android:layout_gravity="fill_horizontal" android:text="6" /> <Space android:layout_width="36dp" android:layout_column="0" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="1" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="2" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="3" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="4" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="5" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="6" android:layout_row="7" /> <Space android:layout_width="36dp" android:layout_column="7" android:layout_row="7" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="0" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="1" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="2" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="3" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="4" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="5" /> <Space android:layout_height="36dp" android:layout_column="8" android:layout_row="6" /> </GridLayout>
WRAP_CONTENT
and MATCH_PARENT
Because the default
values of the width and height properties are both WRAP_CONTENT, this value never needs to be explicitly declared in the
layout parameters of GridLayout's children. In addition, GridLayout does not
distinguish the special size value MATCH_PARENT from WRAP_CONTENT. A component's ability to expand to the size of the parent
is instead controlled by the principle of flexibility, as discussed in GridLayout.
Summary
You should not need
to use either of the special size values: WRAP_CONTENT or MATCH_PARENT when configuring the children of a
GridLayout.
Default
values
·
topMargin = 0 when useDefaultMargins is false;
otherwise UNDEFINED,
to indicate that a default value should be computed on demand.
·
leftMargin = 0 when useDefaultMargins is false;
otherwise UNDEFINED,
to indicate that a default value should be computed on demand.
·
bottomMargin = 0 when useDefaultMargins is false;
otherwise UNDEFINED,
to indicate that a default value should be computed on demand.
·
rightMargin = 0 when useDefaultMargins is false;
otherwise UNDEFINED,
to indicate that a default value should be computed on demand.
Row and Column Weight
layout_columnWeight : The relative proportion of horizontal space
that should be allocated to this view during excess space distribution.
Must be a floating point value, such as
"
1.2".android:layout_columnWeight="1"
The relative proportion of vertical space
that should be allocated to this view during excess space distribution.
Must be a floating point value, such as
"
1.2".android:layout_rowWeight="1"
Program
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#0099cc" tools:context=".Locomotion"> <GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="2" android:rowCount="1"> <GridLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:columnCount="1" android:rowCount="2" android:layout_column="0" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:orientation="vertical"> <TextView android:id="@+id/textViewNW" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:layout_row="0" android:layout_rowSpan="1" android:layout_rowWeight="1" android:background="#fe4141" android:text="north west" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textViewSW" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:layout_row="1" android:layout_rowSpan="1" android:layout_rowWeight="1" android:background="#fefe00" android:text="south west" android:textAppearance="?android:attr/textAppearanceLarge" /> </GridLayout> <GridLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:columnCount="1" android:rowCount="2" android:layout_column="1" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:orientation="vertical"> <TextView android:id="@+id/textViewNE" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:layout_row="0" android:layout_rowSpan="1" android:layout_rowWeight="1" android:background="#51f328" android:text="north east" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textViewSE" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_columnSpan="1" android:layout_columnWeight="1" android:layout_gravity="fill" android:layout_row="1" android:layout_rowSpan="1" android:layout_rowWeight="1" android:background="#0080f0" android:text="south east" android:textAppearance="?android:attr/textAppearanceLarge" /> </GridLayout> </GridLayout> </FrameLayout>
22
No comments:
Post a Comment