14.3　GridView（网格控件）

源代码目录：src/ch14/Gridview

从名字很容易看出，GridView控件用于显示一个网格。实际上，GridView与前面讲的ListView、Spinner等控件的使用方法类似，只是GridView在显示方式上有所不同。GridView控件采用了二维表的方式来显示列表项（也可称为单元格），每一个单元格是一个View对象，在单元格上可以放置任何Android SDK支持的控件。

既然GridView采用了二维表的方式显示单元格，就需要设置二维表的行和列。设置GridView的列可以使用＜GridView＞标签的columnWidth属性，也可以使用GridView.setColumnWidth方法设置列数。GridView中的单元格会根据列数自动折行显示，因此，并不需要设置GridView的行数，但需要使用android:numColumns属性设置网格的列数，否则GridView只会显示一列。

在本例中使用了SimpleAdapter对象封装GridView中每个单元格的数据（图像的资源ID），在GridView的下方显示一个ImageView控件，当选中或单击某个单元格后，该单元格中的图像将被放大显示在这个ImageView控件中。下面是本例中的完整实现代码，在这些代码中创建了SimpleAdapter对象，并使用GridView.setAdapter方法指定这个SimpleAdapter对象。

源代码文件：src/ch14/Gridview/src/mobile/android/gridview/Main.java

public class Main extends Activity implements OnItemSelectedListener,

　　　　OnItemClickListener

{　　

　　private ImageView imageView;

　　//　定义数据源

　　private int[] resIds = new int[]

　　{ R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4,

　　　　　　R.drawable.item5, R.drawable.item6, R.drawable.item7,

　　　　　　R.drawable.item8, R.drawable.item9, R.drawable.item10,

　　　　　　R.drawable.item11, R.drawable.item12, R.drawable.item13,

　　　　　　R.drawable.item14, R.drawable.item15, R.drawable.item16 };

　　@Override

　　public void onItemSelected(AdapterView＜?＞ parent, View view, int position,

　　　　　　long id)

　　{

　　　　//　选中网格中图像时在ImageView控件中放大显示图像

　　　　imageView.setImageResource(resIds[position]);

　　}

　　@Override

　　public void onNothingSelected(AdapterView＜?＞ parent)

　　{

　　}

　　@Override

　　public void onItemClick(AdapterView＜?＞ parent, View view, int position,

　　　　　　long id)

　　{

　　　　//　单击网格中图像时在ImageView控件中放大显示图像

　　　　imageView.setImageResource(resIds[position]);

　　}

　　@Override

　　public void onCreate(Bundle savedInstanceState)

　　{

　　　　super.onCreate(savedInstanceState);

　　　　setContentView(R.layout.main);

　　　　GridView gridView = (GridView) findViewById(R.id.gridview);

　　　　List＜Map＜String, Object＞＞ cells = new ArrayList＜Map＜String, Object＞＞();

　　　　//　单元格使用的布局只有一个ImageView控件，ID名为imageview，for循环将每一个

　　　　//　单元格显示的图像资源ID加到cells对象中，用Map对象保存ID名（imageview）和图像资源ID

　　　　for (int i = 0; i ＜ resIds.length; i++)

　　　　{

　　　　　　Map＜String, Object＞ cell = new HashMap＜String, Object＞();

　　　　　　cell.put("imageview", resIds[i]);

　　　　　　cells.add(cell);

　　　　}

　　　　//　创建SimpleAdapter对象

　　　　SimpleAdapter simpleAdapter = new SimpleAdapter(this, cells,

　　　　　　　　R.layout.cell, new String[]

　　　　　　　　{ "imageview" }, new int[]

　　　　　　　　{ R.id.imageview });

　　　　gridView.setAdapter(simpleAdapter);

　　　　imageView = (ImageView) findViewById(R.id.imageview);

　　　　gridView.setOnItemSelectedListener(this);

　　　　gridView.setOnItemClickListener(this);

　　　　imageView.setImageResource(resIds[0]);

　　}

}

定义GridView控件的gridview.xml布局文件的代码如下：

源代码文件：src/ch14/Gridview/res/layout/main.xml

＜?xml version="1.0" encoding="utf-8"?＞

＜LinearLayout xmlns:android="http://schemas.android.com/ apk/res/android"

　　android:orientation="vertical" android:layout_width= "fill_parent"

　　android:layout_height="fill_parent" android:gravity= "center_horizontal"＞

　　＜GridView android:id="@+id/gridview" android:layout_ width="fill_parent"

　　　　android:layout_height="wrap_content" android:numColumns="4"

　　　　android:padding="20dp" android:horizontalSpacing="6dp"

　　　　android:verticalSpacing="6dp"　/＞

　　＜ImageView android:id="@+id/imageview" android:layout_ width="fill_parent"

　　　　android:layout_height="150dp" /＞

＜/LinearLayout＞

运行本例后，选中或单击屏幕上方单元格中的图像，将在屏幕下方的ImageView控件中放大显示单元格中的图像，效果如图14-15所示。

 

▲图14-15 GridView 控件