Easy Tutorial
❮ Lua Table Length Analysis Js Get Current Page Url ❯

2.2.5 GridLayout (Grid Layout)

Category Android Basic Tutorial

Introduction to This Section

Today's layout introduction is a new layout introduced after Android 4.0, which is somewhat similar to the previously learned TableLayout (Table Layout), but it has many features that the former does not have and is more user-friendly.

>

In addition to the above, this section will also provide solutions to problems you may encounter when using GridLayout, as well as how to use GridLayout on lower version SDKs! Let's start this section's lesson!


1. Summary of Related Attributes Diagram


2. Usage Example: Implementation of Calculator Layout:

Running Effect Picture:

Implementation Code:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="Backspace" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="Clear" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    Button android:text="3" />

    Button android:text="-" />

    Button android:text="4" />

    Button android:text="5" />

    Button android:text="6" />

    Button android:text="*" />

    Button android:text="7" />

    Button android:text="8" />

    Button android:text="9" />

    Button android:text="/" />

    Button
        android:layout_width="wrap_content"
        android:text="." />

    Button android:text="0" />

    Button android:text="=" />

</GridLayout>

Code Analysis: The code is simple, only the backspace and clear buttons span two columns, and the others are added directly by default, each component occupies one row and one column. In addition, there is one more thing to note: If we use: android:layoutrowSpan and android:layoutcolumnSpan to set the component to span multiple rows or columns, if you want the component to fill the spanned rows or columns, you need to add the following attribute: android:layout_gravity = "fill" !!! Just like this calculator display part!


3. Usage Summary:

① GridLayout divides the layout into rows, columns, and cells with dashed lines, and also supports staggered arrangement in rows and columns. ② Usage process:

>


4. Points to Note When Using GridLayout:

Since GirdLayout was introduced after 4.0, the minSDK version should be changed to 14 or above, Otherwise, when writing layout code, this thing will inexplicably make mistakes, saying that it can't find this GridLayout, Of course, if you want to be compatible with lower versions, you should see the following content!


5. How to Use GridLayout on Lower Version SDKs:

The solution is very simple: just import the v7 package's gridlayout package! The v7 package is usually located in the directory: sdk\extras\android\support\v7\gridlayout If you don't have it, you can also download it here: [gridlayout_v7_jay.rar](../wp-content/uploads/2015/07/gridlayout_v7_jay.rar

❮ Lua Table Length Analysis Js Get Current Page Url ❯