代码改变世界

GridView的应用

2012-04-26 22:55  ...平..淡...  阅读(354)  评论(0)  编辑  收藏  举报

GridView是网格列表，它和ListView很类似，都是View的子类。因此操作它的方法和操作ListView的方法类似。

步骤:
 1.将数据结构存储数据Data
 2.用适配器关联数据Data和View组件
 3.为GridView设置适配器 (setAdapter())

step1:新建android工程，命名为GridViewTest。

step2:设置布局文件main.xml和main1.xml

main.xml

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/gridview01"  
 4     android:layout_width="fill_parent"   
 5     android:layout_height="fill_parent"  
 6     android:numColumns="auto_fit"  
 7     android:verticalSpacing="10dp"  
 8     android:horizontalSpacing="10dp"  
 9     android:columnWidth="90dp"  
10     android:stretchMode="columnWidth"  
11     android:gravity="center"  
12 />

 

main1.xml用于设计GridView的item

main1.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"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <ImageView 
 8         android:id="@+id/imageview01"
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"/>
11         
12     <TextView
13         android:id="@+id/textview01"
14         android:layout_width="fill_parent"
15         android:layout_height="wrap_content"/>
16 
17 </LinearLayout>

step3:设计主类GridViewTest.java(用两个主类来分别展示使用SimpleAdapter、BaseAdapter)

1.使用SimpleAdapter

GridViewTest 
 1 package com.cb.gridview;
 2 
 3 import java.util.ArrayList;
 4 import java.util.HashMap;
 5 
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.view.View;
 9 import android.widget.AdapterView;
10 import android.widget.AdapterView.OnItemClickListener;
11 import android.widget.GridView;
12 import android.widget.SimpleAdapter;
13 
14 /*
15  * GridView和ListView相同,都是GridView/ListView组件  和  数据Data  和  适配器Adapter
16  * 步骤:
17  * 1.选择要存储的数据Data，用一维或二维动态数组存储
18  * 2.用适配器关联数据Data和View组件，
19  * 3.为GridView设置适配器 (setAdapter())
20  */
21 
22 public class GridViewTest extends Activity {
23     private GridView mGridView;
24     private int[] images = new int[] { R.drawable.nash1, R.drawable.nash2,
25             R.drawable.nash3, R.drawable.nash4, R.drawable.nash5,
26             R.drawable.nash1, R.drawable.nash2, R.drawable.nash3,
27             R.drawable.nash4};
28 
29     @Override
30     public void onCreate(Bundle savedInstanceState) {
31         super.onCreate(savedInstanceState);
32         setContentView(R.layout.main);
33 
34         mGridView = (GridView) findViewById(R.id.gridview01);
35 
36         // 创建动态数字,存储Data
37         ArrayList<HashMap<String, Object>> listitems = new ArrayList<HashMap<String, Object>>();
38 
39         for (int i = 0; i < 9; i++) {
40             HashMap<String, Object> item = new HashMap<String, Object>();
41             item.put("ItemImages", images[i]);
42             item.put("ItemTexts", "第" + (i + 1) + "个");
43 
44             listitems.add(item);
45         }
46 
47         /**
48          * Constructor
49          * 
50          * @param context
51          *            The context where the View associated with this
52          *            SimpleAdapter is running
53          * @param data
54          *            A List of Maps. Each entry in the List corresponds to one
55          *            row in the list. The Maps contain the data for each row,
56          *            and should include all the entries specified in "from"
57          * @param resource
58          *            Resource identifier of a view layout that defines the
59          *            views for this list item. The layout file should include
60          *            at least those named views defined in "to"
61          * @param from
62          *            A list of column names that will be added to the Map
63          *            associated with each item.
64          * @param to
65          *            The views that should display column in the "from"
66          *            parameter. These should all be TextViews. The first N
67          *            views in this list are given the values of the first N
68          *            columns in the from parameter.
69          */
70         // 使用SimpleAdapter适配器 建立数据Data和main1.xml中组件的关联
71         SimpleAdapter adapter = new SimpleAdapter(GridViewTest.this, listitems, // Data数据
72                 R.layout.main1, // 布局文件
73                 new String[] { "ItemImages", "ItemTexts" }, new int[] {
74                         R.id.imageview01, R.id.textview01 });
75 
76         mGridView.setAdapter(adapter); // 为GridView设置适配器
77 
78         // 处理选中事件
79         mGridView.setOnItemClickListener(new OnItemClickListener() {
80 
81             @Override
82             public void onItemClick(AdapterView<?> parent,// The AdapterView
83                                                             // where the click
84                                                             // happened
85                     View view, // The view within the AdapterView that was
86                                 // clicked
87                     int position, // The position of the view in the adapter
88                     long id // The row id of the item that was clicked
89             ) {
90                 // TODO Auto-generated method stub
91                 HashMap<String, Object> items = (HashMap<String, Object>) parent
92                         .getItemAtPosition(position);
93 
94                 // 显示选中项的ItemText信息
95                 setTitle((String) items.get("ItemTexts"));
96             }
97         });
98     }
99 }

2.使用BaseAdapter

GridViewTest2 
 1 package com.cb.gridview;
 2 
 3 import android.app.Activity;
 4 import android.content.Context;
 5 import android.os.Bundle;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 import android.widget.BaseAdapter;
 9 import android.widget.GridView;
10 import android.widget.ImageView;
11 
12 /*
13  * GridView和ListView相同,都是GridView/ListView组件  和  数据Data  和  适配器Adapter
14  * 步骤:
15  * 1.将数据结构存储数据Data
16  * 2.用适配器关联数据Data和View组件
17  * 3.为GridView设置适配器 (setAdapter())
18  */
19 
20 public class GridViewTest2 extends Activity {
21     private GridView mGridView;
22 
23     @Override
24     public void onCreate(Bundle savedInstanceState) {
25         super.onCreate(savedInstanceState);
26         setContentView(R.layout.main);
27 
28         mGridView = (GridView) findViewById(R.id.gridview01);
29 
30         ImageAdapter adapter2 = new ImageAdapter(this);//创建适配器(继承自BaseAdapter)
31         mGridView.setAdapter(adapter2);
32 
33     }
34 }
35 
36 // 定义ImageAdapter类,继承于 BaseAdapter
37 class ImageAdapter extends BaseAdapter {
38 
39     private Context mContext;
40     private int[] images = { R.drawable.nash1, R.drawable.nash2,
41             R.drawable.nash3, R.drawable.nash4, R.drawable.nash5,
42             R.drawable.nash1, R.drawable.nash2, R.drawable.nash3,
43             R.drawable.nash4, R.drawable.nash5, R.drawable.nash1,
44             R.drawable.nash2, R.drawable.nash3, R.drawable.nash4,
45             R.drawable.nash5 };
46 
47     public ImageAdapter(Context c) {
48         mContext = c;
49     }
50 
51     @Override
52     public int getCount() {
53         // TODO Auto-generated method stub
54         return images.length;
55     }
56 
57     @Override
58     public Object getItem(int position) {
59         // TODO Auto-generated method stub
60         return position;
61     }
62 
63     @Override
64     public long getItemId(int position) {
65         // TODO Auto-generated method stub
66         return position;
67     }
68 
69     @Override
70     public View getView(int position, View convertView, ViewGroup parent) {
71         // TODO Auto-generated method stub
72         ImageView mImageView;
73         if (convertView == null) {
74             // 给ImageView设置资源
75             mImageView = new ImageView(mContext);
76             // 设置布局 图片120×120显示
77             mImageView.setLayoutParams(new GridView.LayoutParams(85, 85));
78             // 设置显示比例类型
79             mImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
80         } else {
81             mImageView = (ImageView) convertView;
82         }
83         mImageView.setImageResource(images[position]);
84 
85         return mImageView;
86     }
87 
88 }

step4:执行结果如下

1.使用SimpleAdapter效果图，在标题栏显示被单击图片的文字

 

2.使用BaseAdapter效果图