Android自定義GridView之實現一個圖片加多個文本框

GridView的使用是很簡單的，API Demo中有例子，但是要實現復雜的GridView，就需要自定義了。

今天我們要實現如下的效果：

先說它的布局，它是由gridview和grid_item兩部分組成。

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:columnWidth="90dp"
7. android:numColumns="auto_fit"
8. android:verticalSpacing="10dp"
9. android:horizontalSpacing="10dp"
10. android:stretchMode="columnWidth"
11. android:gravity="center"
12. />

grid_item.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent" android:layout_height="fill_parent"
4. android:orientation="vertical"
5. android:layout_marginTop="5dp"
6. >
7. <ImageView android:id="@+id/image" android:layout_width="80dip"
8. android:layout_height="80dip" android:layout_gravity="center_horizontal">
9. </ImageView>
10. <TextView android:id="@+id/title" android:layout_width="wrap_content"
11. android:layout_height="wrap_content" android:layout_gravity="left"
12. android:textSize="16dip"
13. android:gravity="left">
14. </TextView>
16. <TextView android:id="@+id/description" android:layout_width="wrap_content"
17. android:layout_height="wrap_content" android:layout_gravity="left"
18. android:textColor="#938192"
19. android:textSize="13dip"
20. android:gravity="left"
21. >
22. </TextView>
23. </LinearLayout>

接下來我們要新寫一個繼承自BaseAdapter類的Adapter類，在這裡做grid item的適配。

由於我們每個grid item是一個圖片加兩個文本框，就需要有一個容器類：

GridItem類：

1. class GridItem
2. {
3. private String title;
4. private int imageId;
5. private String description;
7. public GridItem()
8. {
9. super();
10. }
12. public GridItem(String title, int imageId,String time)
13. {
14. super();
15. this.title = title;
16. this.imageId = imageId;
17. this.description = time;
18. }
20. public String getTime( )
21. {
22. return description;
23. }
25. public String getTitle()
26. {
27. return title;
28. }
30. public int getImageId()
31. {
32. return imageId;
33. }
34. }

再來個Viewholder

1. static class ViewHolder
2. {
3. public ImageView image;
4. public TextView title;
5. public TextView time;
6. }