This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

The article directories

  • GridLayout
  • AbsoluteLayout

GridLayout

Grid layout is a layout added after Android 4.0. It is similar to the TableLayout, but more useful. It divides the container into a grid of rows*columns, each of which is a component bit.

Similarly, there is a component called GridView that is similar in function and name, but a GridView uses An Adapter to populate the component bits, while a GridLayout is much simpler.

Properties of GridLayout itself

attribute Corresponding methods Attributes that
android:columnCount setColumCount(int) Sets the maximum number of columns for the layout
android:rowCount setRowCount(int) Sets the maximum number of rows for the layout
android:alignmentMode setAilgnmentMode(int) Set the layout’s alignment (alignBounds: aligns subview boundaries; AlignMargins: align the sub-view margins;)
android:columnOrderPeserved setColumOrderPreserved(boolean) Sets whether the container retains a column number
android:rowOrderPeserved setRowOrderPeserved(boolean) Sets whether the container retains the row number
Android: useDefaultMargins setUseDefaultMargins(boolean) Sets whether the container uses the default margins

Properties for child components in the container

attribute role
android:layout_column Specifies the column in which the cell is displayed
android:layout_row Specifies the row in which the cell is displayed
android:layout_columnSpan Specifies the number of columns occupied by the cell
android:layout_rowSpan Specifies the number of rows occupied by the cell
android:layout_gravity Specifies the location of the cell in the container
android:layout_columnWeight (API21 added) column weights
android:layout_rowWeight (API21 adds) row weights

The LayoutGravity is a little different from the normal LayoutGravity in that it is placed relative to the grid, not the parent container.

android:layout_gravity role
center Do not change the size of the element, only center
center_horizontal Do not change the size, horizontal center
center_vertical Do not change the size, vertical center
top Do not change the size, placed on top
left I don’t change the size. I put it on the left
bottom Don’t change the size, put it on the bottom
right I don’t change the size. I put it on the right
start Do not change the size, according to the system language, set to the start position
end Do not change the size, put at the end
fill Stretch the element control to fill the grid it should occupy
fill_vertical Stretch filling only in the vertical direction
fill_horizontal Stretch fill only horizontally
clip_vertical Clipping elements vertically only if the element size exceeds the space of the grid
clip_horizontal Clipping elements horizontally only if the size of the element exceeds the space of the grid

Example: GridLayout exercise to achieve calculator effect

xml

<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="6">
    <! --6 rows and 4 columns fill the entire screen -->

    <! -- Auto fill weight 2-->
    <EditText
        android:layout_rowWeight="2"
        android:layout_columnSpan="4"
        android:layout_gravity="fill_horizontal"
        android:hint="Value" />

    <! -- column and row weights 1-->
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Clear"
        android:textColor="#00F"
        android:textSize="20dp" />

    <! -- column and row weights 1-->
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Back"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="/"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="x"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Seven"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="8"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="9"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="-"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="4"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="5"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="6"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="+"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="1"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="2"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="3"
        android:textSize="20dp" />

    <! -- Auto fill green columns across two rows
    <Button
        android:layout_rowSpan="2"
        android:layout_rowWeight="2"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_vertical"
        android:background="#22ac38"
        android:text="="
        android:textSize="20dp" />

    <! -- Autofill column weight 2 -->
    <Button
        android:layout_rowWeight="1"
        android:layout_columnSpan="2"
        android:layout_columnWeight="2"
        android:layout_gravity="fill_horizontal"
        android:text="0"
        android:textSize="20dp" />

    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="."
        android:textSize="20dp" />

</GridLayout>
Copy the code

Running results:

GridLayout allocates rows/columns evenly when API<21

GridLayout introduces Android:layout_columnWeight and Android: layout_rowWeight in API21 to solve the bisecting problem, but is not available before API21

compile 'com.android.support:gridlayout-v7:25.+'
Copy the code

Use as follows:

<android.support.v7.widget.GridLayout
	app:layout_columnWeight="1" 
	app:layout_rowWeight="1" 
	.
/>
Copy the code

AbsoluteLayout

introduce

AbsoluteLayout AbsoluteLayout determines the position of a component by specifying its exact X and Y coordinates. Deprecated in Android2.3, not recommended. The following tutorial is for understanding only.

Android :layout_x Sets the X coordinate of the component. Android :layout_y Sets the Y coordinate of the component


      
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/Button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="10dp"
        android:layout_y="20dp"
        android:text="A" />

    <Button
        android:id="@+id/Button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="20dp"
        android:text="B" />

</AbsoluteLayout>
Copy the code

Running results: