Table view-gridview

Similar to listview used to display column views, gridview is used to display two-dimensional list views. The following uses a simplified album example to demonstrate the basic usage of grdview.

The main interface is as follows.

Main. xml

1. <? XML version = "1.0" encoding = "UTF-8"?>

2. <gridview

Xmlns: Android = "http://schemas.android.com/apk/res/android"

3. Android: Id = "@ + ID/gridview"

4. Android: layout_width = "fill_parent"

5. Android: layout_height = "fill_parent"

6. Android: numcolumns = "auto_fit" Row 6th Android: numcolumns = "auto_fit" sets the number of columns to automatically adapt Based on the screen width.

7. Android: verticalspacing = "8dp" 7th and 8 rows indicate that the row interval and column interval are both 8dp.

8. Android: horizontalspacing = "8dp"

9. Android: columnwidth = "80dp" 9th sets the width of each column, that is, the width of the item is 80dp.

10. Android: stretchmode = "columnwidth" 10th sets to scale the content in the item to a small column synchronization, that is, to scale to 80dp.

11. Android: gravity = "center"/>

The layout is not used on the main interface, but the gridview is used directly.

Row 6th Android: numcolumns = "auto_fit" sets the number of columns to automatically adapt Based on the screen width.

The meaning of rows 7th and 8 is that the row interval and column interval are both set to 8dp.

Row 9th sets the width of each column, that is, the width of the item is 80 DP.

Row 10th is used to scale the content in the item to the width and size synchronization of the column, that is, to 80 DP.

Row 11th places the displayed content in the center of the item.

The layout of each item in the gridview is as follows.

Griditem. xml

1. <? XML version = "1.0" encoding = "UTF-8"?>

2. <relativelayout

3. xmlns: Android = "http://schemas.android.com/apk/res/android"

4. Android: Id = "@ + ID/R1"

5. Android: layout_height = "wrap_content"

6. Android: layout_width = "fill_parent">

7. <imageview

8. Android: Id = "@ + ID/itemimage"

9. Android: layout_height = "wrap_content"

10. Android: layout_width = "wrap_content"

11. Android: layout_centerhorizontal = "true"/>

12. <textview

13. Android: Id = "@ + ID/itemtext"

14. Android: layout_below = "@ + ID/itemimage"

15. Android: layout_width = "wrap_content"

16. Android: layout_height = "wrap_content"

17. Android: text = "name"

18. Android: layout_centerhorizontal = "true"/>

19. </relativelayout>

This item layout is similar to the layout in the previous example. The item contains an imageview and a textview, And the textview is located below the imageview.

Finally, it is the main part of Java source code.

Mygridview. Java

1. Public void oncreate (bundle savedinstancestate ){

2. Super. oncreate (savedinstancestate );

3. setcontentview (R. layout. Main );

4. gridview;

5. String [] titles = {"Zhao 1", "Qian 2", "Zhang San", "Li Si", "Wang Wu "};

6. Int Buf = R. drawable. sample;

7. Int [] resids = {Buf, Buf };

8. gridview = (gridview) This. findviewbyid (R. Id. gridview );

9. gridview. setadapter (New myadapter (titles, resids ));

10. gridview. setonitemclicklistener (New

Adapterview. onitemclicklistener (){

11. @ override

12. Public void onitemclick (adapterview <?> Arg0, view arg1, int arg2, long

Arg3 ){

13. textview Title = (textview) arg1.findviewbyid (R. Id. itemtitle );

14. log. D ("mygridview:", "I clicked:" + title. gettext () + "photo ");

15 .}});}

16. Public class myadapter extends baseadapter {

17. String [] itemtitles, itemtexts;

18. Int [] itemimageres;

19. Public myadapter (string [] itemtitles, int [] itemimageres)

20 .{

21. This. itemtitles = itemtitles;

22. This. itemimageres = itemimageres;

23 .}

24. Public int getcount (){

25. Return itemtitles. length;

26 .}

27. Public object getitem (INT position ){

28. Return itemtitles [position];

29 .}

30. Public long getitemid (INT position ){

31. Return position;

32 .}

33. Public View getview (INT position, view convertview, viewgroup parent)
{

34. If (convertview = NULL)

35 .{

36. layoutinflater Inflater =

(Layoutinflater) mylistview. This. getsystemservice (context. layout_inflater_service );

37. View itemview = Inflater. Inflate (R. layout. Item, null );

38. textview Title = (textview) itemview. findviewbyid (R. Id. itemtitle );

39. Title. settext (itemtitles [position]);

40. imageview image = (imageview) itemview. findviewbyid (R. Id. itemimage );

41. image. setimageresource (itemimageres [position]);

42. Return itemview;

43.} else {

44. textview Title = (textview)

Convertview. findviewbyid (R. Id. itemtitle );

45. Title. settext (itemtitles [position]);

46. imageview image = (imageview)

Convertview. findviewbyid (R. Id. itemimage );

47. image. setimageresource (itemimageres [position]);

48. Return convertview;

49 .}}}}

The Code part is similar to the previous example. For image resources, I select an image named "sample". The image width is more than half of the phone screen. By the way, the autoscaling function of girdview's stretchmode is tested.

Set the adapter object myadapter of the gridview in row 9th.

10th ~ In row 15, the Click Event listener onitemclicklistener of item is set. Click it and output it to the logcat window through log. D to display the image we clicked.

16th ~ 49 behavior adapter class myadapter, the code is similar to the previous example.

The running effect is 10-5.

 

▲Figure gridview example

Click item and then click logcat output example.

1. d/mygridview :( 1164): I clicked Zhao 1's photo.

2. d/mygridview :( 1164): I clicked a picture of Qian 2.

3. d/mygridview :( 1164): I clicked a picture of Michael Jacob.

Table view-gridview