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.
>
You can set the arrangement of components in the layout by yourself
You can customize the number of rows and columns in the grid layout
You can directly set the component to be in a specific row and column
You can set the component to span several rows or columns
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:
>
Step 1: First define the alignment of the components android:orientation horizontal or vertical, set the number of rows and columns
Step 2: Set the row or column where the component is located, remember to start counting from 0, if not set, the default is that each component occupies one row and one column
Step 3: Set the number of rows or columns the component spans; after setting, you need to set a fill: android:layout_gravity = "fill"
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
2.5.4 Basic Usage of AutoCompleteTextView (Auto-Complete Text Box)
2.5.8 Detailed Explanation of Notification (Status Bar Notification)
2.6.4 Simple Usage of DrawerLayout (Official Side-Slide Menu)
3.6 Responding to System Setting Events (Configuration Class)
4.4.2 Further Exploration of ContentProvider - Document Provider
5.2.1 Detailed Explanation of Fragment - Implementing a Bottom Navigation Bar (Method 1)
5.2.2 Detailed Explanation of Fragment - Implementing a Bottom Navigation Bar (Method 2)
5.2.3 Detailed Explanation of Fragment - Implementing a Bottom Navigation Bar (Method 3)
5.2.4 Detailed Explanation of Fragment - Bottom Navigation Bar + ViewPager Page Swiping
5.2.5 Detailed Explanation of Fragment - Simple Implementation of News (Shopping) App List Fragment
[6.1
8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 2)
8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 3)
8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 4)
8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 5)
8.3.14 Paint Enum/Constant Values and ShadowLayer Shadow Effects
8.3.17 Canvas API Detailed Explanation (Part 2) - Clipping Method Collection
8.3.18 Canvas API Detailed Explanation (Part 3) - Matrix and drawBitmapMesh
8.4.3 Android Animation Collection - Property Animation - First Glance
8.4.4 Android Animation Collection - Property Animation - Another Look
11.0 "2015 Latest Android Basic Tutorial" Concludes with Celebrations
12.2 DrySister Girl Watching App (First Edition) - 2. Parsing Backend Data
[