Android Learning Note 27: Grid view using the GridView

Grid View the GridView arrangement is similar to a matrix, which can be implemented by using the GridView control when there are many elements (text, pictures, or other elements) that need to be displayed in a matrix format on the screen.

This article will show you how to use the GridView control to display the application software icons on the phone screen, as well as the name of the application software, using a specific example.

After the completion of the program run effect 1 is shown.

Figure 1 Main interface Display effect

1. Interface layout

By viewing the GridView API Help document (http://developer.android.com/reference/android/widget/GridView.html), you can learn about the common XML attribute 2 of the GridView.

Figure 2 Common XML attributes for the GridView

Where Android:columnwidth[int] is used to set the width of each column; Android:gravity[int] is used to set the specific gravity of each grid; Android:horizontalspacing[int] Used to set the default horizontal distance for columns between grids; Android:numcolumn[int] used to set the number of columns; Android:stretchmode[int] is used to set how the column should fill the available space; Android: Verticalspacing[int] Sets the default vertical distance for rows between grids.

After understanding the above-mentioned GridView XML attributes, we can finish writing the XML layout file for the main interface. In the XML layout file, we use LinearLayout to lay out the entire interface vertically, and then add a GridView control to the layout. The specific XML layout file source code is as follows:

1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2    xmlns:tools= "/http/ Schemas.android.com/tools "3    android:orientation=" vertical "4    android:layout_width=" Match_parent "5    A ndroid:layout_height= "Match_parent" > 6 7    <gridview  8        android:id= "@+id/gridview" 9        Andro 　　Id:layout_width= "Match_parent"        android:layout_height= "wrap_content"        android:numcolumns= "4" 12        android:horizontalspacing= "10DP"        android:verticalspacing= "10DP" >14    </gridview>15 16 & Lt;/linearlayout>

In the GridView control, we specify the number of columns in the grid by android:numcolumns= "4" to 4, through android:horizontalspacing= "10DP" and android:verticalspacing= " 10DP "Specifies that both horizontal and vertical distances between grids are 10DP.

2. Grid element layout

As shown in 1, within each grid we need to display two things: the app icon and the application software name. Therefore, we also need to layout the elements in the grid accordingly.

We can create a new XML layout file named "Griditeminfo.xml" in the project's layout directory to complete the layout of elements within the grid. In this XML layout file, we use relative layout relativelayout to arrange the elements within the grid, placing a ImageView control in the grid (above) in a horizontal center, to display the application's icon ; Place a TextView control in the grid (below), centered horizontally, to display the name of the application. The specific Griditeminfo.xml source code is as follows:

1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <relativelayout xmlns:android= "http://schemas.android.com/apk/ Res/android "3    android:layout_width=" match_parent "4    android:layout_height=" Wrap_content "    > 5     6    <imageview 7        android:id= "@+id/itemimage" 8        android:layout_width= "wrap_content" 9        android: 　　layout_height= "Wrap_content"        android:layout_centerhorizontal= "true"    >11    </imageview>12    <textview14        android:id= "@+id/itemname"        android:layout_below= "@+id/itemimage" 
   android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:layout_ Centerhorizontal= "true"    >19    </textview>20    </RelativeLayout>

3. Resource Storage

In this example, we need to store a large number of application software icons and application software names. Obviously, there is a one by one relationship between the application software icon and the application name, and we can save the resource by using HashMap to store the application software icon and the application name separately, and then add HashMap to ArrayList. The implementation method is as follows:

1//Save icon Picture and icon name in ArrayList 2//author: Blog Park-still indifferent 3 arraylist
Where the array resids[] stores the resource ID of the application software icon, the array name[] stores the application name and saves it in HashMap with a For loop traversal statement.
4. Simple Adapter Simpleadapter
Simple adapter Simpleadapter inherits from Baseadapter, which is used to map static data to a defined view in an XML file. For example, you can specify static data as a ArrayList that is composed of maps. In ArrayList, each entry corresponds to a row in the list, and the map can contain multiple data.
The Simpleadapter is constructed as follows:
Public Simpleadapter (context context, list<?. extends Map<string,?>> data, int resource, string[] from, int[] To);
Where the parameter context is used to specify the context object associated with the Simpleadapter; parameter data is used to specify the map list; parameter resource is used to specify the resource identifier (that is, the view layout of the list item) The parameter from is used to specify the label for each item in the map list, and the parameter to is used to specify the object in the map list to match for each item of data in the layout file.
In this instance, the implementation of Simpleadapter is constructed as follows:
1//simpleadapter object, matching elements in ArrayList 2//author: Blog Park-still indifferent 3 simpleadapter simpleadapter = new SimpleAdapter4 (This, 　　Item, R.layout.griditeminfo, new string[] {"Itemimage", "ItemName"},5        new int[] {r.id.itemimage,r.id.itemname}) {6 };
After implementing the simple adapter Simpleadapter, we also need to add the simple adapter Simpleadapter to the GridView object, which can be implemented as follows:
Mgridview.setadapter (Simpleadapter);
5. Event Monitoring
In the actual application, we need to listen to the user's operation, that is, we need to know which application software the user chooses.
In the Grid control GridView, there are two commonly used event listeners: Onitemselectedlistener and Onitemclicklistener. Among them, Onitemselectedlistener is used for project selection event monitoring, Onitemclicklistener for project Click event Monitoring.
To implement these two event listeners is simple, inherit the Onitemselectedlistener and Onitemclicklistener interfaces, and implement their abstract methods. Among them, the Onitemclicklistener interface that needs to be implemented is the following abstract method:
public void Onitemclick (adapterview<?> parent, view view, int position, long ID);
There are two abstract methods that need to be implemented for the Onitemselectedlistener interface, as follows:
public void onitemselected (adapterview<?> parent, view view, int position, long ID);
public void onnothingselected (adapterview<?> parent);
Android Learning Note 27: Grid view using the GridView