网格视图(GridView)功能和用法
GridView用于在界面上按行、列分布的方式来显示多个组件。GridView和ListView有共同的父类:AbsListView,因此GridView和ListView具有很高的相似性,它们都是列表项。GridView和ListView的唯一区别在于:ListView只显示一列,而GridView可以显示多列。从这个角度来看,ListView相当于一种特殊的GridView,如果让GridView只显示一列,那么该GridView就变成了ListView。
与ListView类似的是,GridView也需要通过Adapter来提供显示的数据:我们可以采用之前介绍的4种方式的任意一种来创建Adapter。不管使用哪种方式,GridView和ListView的用法是基本一致的。
下面通过一个实例来介绍GridView的用法,本实例采用SimpleAdapter为GridView提供数据。
实例:带预览的图片浏览器
本实例将会采用一个GridView以行、列的形式来组织所有图片的预览视图。然后程序用一个ImageView来显示图片。
下面是本实例所使用的界面布局文件。
<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组件 --> <GridView android:id="@+id/grid01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:horizontalSpacing="1pt" android:verticalSpacing="1pt" android:numColumns="4" android:gravity="center" /> <!-- 定义一个ImageView组件 --> <ImageView android:id="@+id/imageView" android:layout_width="240dp" android:layout_height="240dp" android:layout_gravity="center_horizontal" /> </LinearLayout>
上面的界面布局文件中只是简单定义地定义了一个GridView、一个ImageView。定义GridView时指定了android:numColumns=“4”,这意味着该网格包含4列。那么该GridView包含多少行呢?这是动态改变的——正如ListView到底包含多少行是由该ListView对应的Adapter所决定的,GridView到底包含多少行也是由Adapter决定的。
下面是主程序代码:
package org.crazyit.helloworld; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.widget.*; import android.widget.AdapterView.OnItemClickListener; import android.widget.AdapterView.OnItemSelectedListener; public class GridViewTest extends Activity { GridView grid; ImageView imageView; int[] imageIds=new int[]{R.drawable.bomb5, R.drawable.bomb6, R.drawable.bomb7, R.drawable.bomb8, R.drawable.bomb9, R.drawable.bomb10, R.drawable.bomb11, R.drawable.bomb12, R.drawable.bomb13, R.drawable.bomb14, R.drawable.bomb15, R.drawable.bomb16}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.grid_view_test); //创建一个List对象,List对象的元素是Map List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>(); for(int i=0;i<imageIds.length;i++) { Map<String,Object> listItem=new HashMap<String,Object>(); listItem.put("image", imageIds[i]); listItems.add(listItem); } //获取显示图片的ImageView imageView=(ImageView)findViewById(R.id.imageView); //创建一个SimpleAdapter SimpleAdapter simpleAdapter=new SimpleAdapter(this, listItems, R.layout.cell, new String[]{"image"}, new int[]{R.id.image1}); grid=(GridView)findViewById(R.id.grid01); //为GridView设置Adapter grid.setAdapter(simpleAdapter); //添加列表项被选中的监听器 grid.setOnItemSelectedListener(new OnItemSelectedListener(){ @Override public void onItemSelected(AdapterView<?> parent, View view, int positon, long id) { // TODO Auto-generated method stub //显示当前被选中的图片 imageView.setImageResource(imageIds[positon]); } @Override public void onNothingSelected(AdapterView<?> parent) { // TODO Auto-generated method stub } }); //添加列表项被单击的监听器 grid.setOnItemClickListener(new OnItemClickListener(){ @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // TODO Auto-generated method stub //显示被单击的图片 imageView.setImageResource(imageIds[position]); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.grid_view_test, menu); return true; } }
程序中使用了R.layout.cell布局文件如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" android:padding="2pt" > <ImageView android:id="@+id/image1" android:layout_width="50dp" android:layout_height="50dp" /> </LinearLayout>
上面的程序同样使用了SimpleAdapter对象作为GridView的Adapter,这个SimpleAdapter包涵了一个长度为16的List集合——这意味着该GridView一共需要显示16个组件,GridView总共有4列,因此该GridView一共包含4行。
运行上面的程序将看到如下效果: