Gridview for Android (jiugong figure)

Both the gridview and listview are commonly used multi-control la S, and the gridview is the first choice to implement the jiugong diagram! This article describes how to use the gridview to implement the jiugong diagram. The most widely used method on the Internet is to implement an imageadapter to inherit the baseadapter and use it for the gridview. This method is not repeated in this article, the usage of the gridview described in this article is very similar to that of the previous listview .... I am also a little lazy ....

Post this article firstCodeRunning result:

 

In this article, you need to add/modify three files: Main. XML, night_item.xml, and Java.Source code.

The source code of Main. XML is as follows, which is a girdview, used to load items:

 

[XHTML] View plaincopyprint?

2. <?XMLVersion="1.0"Encoding="UTF-8"?>
4. <GridviewXmlns: Android=Http://schemas.android.com/apk/res/android"
6. Android: ID="@ + ID/gridview"
8. Android: layout_width="Fill_parent"
10. Android: layout_height="Fill_parent"
12. Android: numcolumns="Auto_fit"
14. Android: verticalspacing="10dp"
16. Android: horizontalspacing="10dp"
18. Android: columnwidth="90dp"
20. Android: stretchmode="Columnwidth"
22. Android: gravity="Center"
24. />

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <gridview xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Id = "@ + ID/gridview" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: numcolumns = "auto_fit" <br/> Android: verticalspacing = "10dp" <br/> Android: horizontalspacing = "10dp" <br/> Android: columnwidth = "90dp" <br/> Android: stretchmode = "columnwidth" <br/> Android: gravity = "center" <br/>

Some attributes are described as follows:

Android: numcolumns = "auto_fit", set the number of columns in the gridview to automatic

Android: columnwidth = "90dp", the width of each column, that is, the width of the item
Android: stretchmode = "columnwidth", scaling and column width Synchronization
Android: verticalspacing = "10dp", the margin between two rows, for example, Row 1 (no.0 ~ No. 2) and row 2 (No. 3 ~ No. 5) 10dp spacing
Android: horizontalspacing = "10dp", margin between two columns.

 

Next we will introduceThe XML file is similar to the imageitem. xml file in the previous listview:

 

[XHTML] View plaincopyprint?

2. <?XMLVersion="1.0"Encoding="UTF-8"?>
4. <Relativelayout
6. Xmlns: Android=Http://schemas.android.com/apk/res/android"
8. Android: layout_height="Wrap_content"
10. Android: paddingbottom="4dip"Android: layout_width="Fill_parent">
12. <Imageview
14. Android: layout_height="Wrap_content"
16. Android: ID="@ + ID/itemimage"
18. Android: layout_width="Wrap_content"
20. Android: layout_centerhorizontal="True">
22. </Imageview>
24. <Textview
26. Android: layout_width="Wrap_content"
28. Android: layout_below="@ + ID/itemimage"
30. Android: layout_height="Wrap_content"
32. Android: Text="Textview01"
34. Android: layout_centerhorizontal="True"
36. Android: ID="@ + ID/itemtext">
38. </Textview>
40. </Relativelayout>

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <relativelayout <br/> xmns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: layout_height = "wrap_content" <br/> Android: paddingbottom = "4dip" Android: layout_width = "fill_parent"> <br/> <imageview <br/> Android: layout_height = "wrap_content" <br/> Android: id = "@ + ID/itemimage" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_centerhorizontal = "true"> <br/> </imageview> <br/> <textview <br/> Android: layout_width = "wrap_content" <br/> Android: layout_below = "@ + ID/itemimage" <br/> Android: layout_height = "wrap_content" <br/> Android: text = "textview01" <br/> Android: layout_centerhorizontal = "true" <br/> Android: id = "@ + ID/itemtext"> <br/> </textview> <br/> </relativelayout> <br/>

 

The final part is the source code of Java, which is similar to the Java source code of the previous listview, but the "selected" event processing is added:

 

[Java] View plaincopyprint?

2. PublicVoidOncreate (bundle savedinstancestate ){
4. Super. Oncreate (savedinstancestate );
6. Setcontentview (R. layout. Main );
8. Gridview = (gridview) findviewbyid (R. Id. gridview );
12. // Generate dynamic array and transfer data
14. Arraylist NewArraylist
16. For(IntI =0; I <10; I ++)
18. {
20. Hashmap <string, Object> map =NewHashmap <string, Object> ();
22. Map. Put ("Itemimage", R. drawable. Icon );// Add the image resource ID
24. Map. Put ("Itemtext","No ."+ String. valueof (I ));// Itemtext by serial number
26. Lstimageitem. Add (MAP );
28. }
30. // Generate the imageitem of the adapter <====> dynamic array elements, one-to-one correspondence between the two
32. Simpleadapter saimageitems =NewSimpleadapter (This,// No explanation
34. Lstimageitem,// Data Source
36. R. layout. night_item,// XML Implementation of night_item
40. // Subitem of the dynamic array and imageitem
42. NewString [] {"Itemimage","Itemtext"},
46. // An imageview in the XML file of imageitem, two textview IDS
48. NewInt[] {R. Id. itemimage, R. Id. itemtext });
50. // Add and display
52. Gridview. setadapter (saimageitems );
54. // Add Message Processing
56. Gridview. setonitemclicklistener (NewItemclicklistener ());
58. }
62. // When adapterview is clicked (touch screen or keyboard), the returned item Click Event
64. ClassItemclicklistenerImplementsOnitemclicklistener
66. {
68. PublicVoidOnitemclick (adapterview <?> Arg0,// The adapterview where the click happened
70. View arg1,// The view within the adapterview that was clicked
72. IntArg2,// The Position of the view in the adapter
74. LongArg3// The row ID of the item that was clicked
76. ){
78. // In this example, arg2 = arg3
80. Hashmap <string, Object> item = (hashmap <string, Object>) arg0.getitematposition (arg2 );
82. // Display the itemtext of the selected item
84. Settitle (string) item. Get ("Itemtext"));
86. }
90. }