Friday, March 6, 2020

Android GridLayout tutorial

Introduction to this section

The layout to be introduced today is a new layout introduced after Android 4.0, which is similar to the TableLayout (table layout) learned earlier, but he has a lot of things that the former does not have, and it is more useful.

  • You can set the arrangement of components in the layout yourself
  • Can customize how many rows and columns there are in the grid layout
  • You can directly set the component in a certain row and column
  • Can set components to span several rows or columns

In addition, in addition to the above, this section will give you the problems you will encounter when using gridLayout, and how to solve the low-level SDK how to use GridLayout! Let's start the lesson of this section!
1. Summary of related attributes
2.Usage example: implementation of calculator layout:
Android GridLayout tutorial

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="回退" />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />
    <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 very simple, only the back and clear buttons span two columns, while the others are added directly. By default, each component occupies one row and one column. There is another thing to note: we pass: android: layout_rowSpan and android: layout_columnSpan set the component to span multiple rows or columns. If you want the component to fill the crossed rows or columns, you need to add the following property: android: layout_gravity = "fill" ! !! !! Just like the part where this computer displays numbers!

3.Usage induction:

GridLayout Android uses dashed thin lines to divide the layout into rows, columns, and cells.It also supports staggered rows and columns.
step 1: First define the way of the component android: orientation horizontal or vertical, set how many rows and columns
step 2: Set the row or column of the component, remember to start from 0, do not set the default, each component occupies one row and one column
step 3: Set the component to span several rows or columns; after setting, you need to set a fill: android: layout_gravity = "fill"

4. Points to note when using GridLayout:

Because GirdLayout was launched after 4.0, the minSDK version must be changed to 14 or above. Otherwise, when writing the layout code, this thing will somehow go wrong, saying that this GridLayout cannot be found. If it is compatible, it depends on the following content!

5.How to use GridLayout in low version SDK:

The solution is simple: just import the gridlayout package of the v7 package! The v7 package is generally in the SDK: sdk \ extras \ android \ support \ v7 \ gridlayout If you don't have it, you can also download it here: gridlayout_v7_jay. rar but when used, the label is written like this:
<android.support.v7.widget.GridLayout> `
Summary of this section
This is the introduction of GridLayout

No comments:

Post a Comment