与ListView用于显示列视图类似,GridView用于显示二维列表视图。下面通过一个简化的相册例子来演示GrdView的基本用法。
主界面如下。
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" 第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。
7. android:verticalSpacing="8dp" 第7、8行的意义是设置了行间隔和列间隔都是8dp。
8. android:horizontalSpacing="8dp"
9. android:columnWidth="80dp" 第9行设置每列的宽度,也就是item的宽度为80dp。
10. android:stretchMode="columnWidth" 第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。
11. android:gravity="center" />
主界面没有采用Layout布局,而是直接用Gridview。
第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。
第7、8行的意义是设置了行间隔和列间隔都是8dp。
第9行设置每列的宽度,也就是item的宽度为80dp。
第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。
第11行设置将显示的内容放在item的中央位置。
GridView里每个item的布局如下。
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="名字"
18. android:layout_centerHorizontal="true" />
19. </RelativeLayout>
这个item布局和上个例子中的布局类似,item内有一个imageview和一个textview,textview位于imageview的下方。
最后就是Java源代码主要部分。
MyGridView.java
1. public void onCreate(Bundle savedInstanceState) {
2. super.onCreate(savedInstanceState);
3. setContentView(R.layout.main);
4. GridView gridview;
5. String[] titles={"赵1","钱2","张三","李四","王五"};
6. int buf=R.drawable.sample;
7. int[] resIds={buf,buf,buf,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:","我单击的是:"+title.getText()+"的照片");
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. }}}}
代码部分和上个例子类似,其中图片资源我选了一个取名为sample的图片,该图片宽度超过测试手机屏幕的一半,顺便测试一下girdview的stretchMode自动缩放功能。
第9行设置gridview的适配器对象MyAdapter。
第10~15行设置了item的单击事件监听器OnItemClickListener。单击后通过Log.d输出到Logcat窗口,显示我们单击了哪个图片。
第16~49行为适配器类MyAdapter,代码与上个例子类似。
运行效果如图10-5所示。
▲图 Gridview示例图
单击item后Logcat输出示例。
1. D/mygridview:(1164): 我单击的是:赵1的照片
2. D/mygridview:(1164): 我单击的是:钱2的照片
3. D/mygridview:(1164): 我单击的是:张三的照片