使用GridView以表格形式显示多张图片

>  GridView用于在界面上以表格的形式显示多个组件。

>  目标：使用GridView以表格形式显示多张图片

【1】新建工程GridView,最终的工程结构如图：

【2】在activity.xml布局文件中加入一个GridView控件，最终如下所示：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!-- android:numColumns="" 每一行有几列 android:verticalSpacing="" 两行之间的间距 android:horizontalSpacing="" 两列之间的间距 --> <gridview android:layout_margintop="10dp" android:id="@+id/gridView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numcolumns="3" android:verticalspacing="10dp" android:horizontalspacing="10dp"> </gridview> </linearlayout>

【3】在Activity中，需要这么几个步骤：①准备数据源②新建适配器(SimpleAdapter)③GridView加载适配器④为GridView配置事件监听器onItemClickListener。在初始化适配器时，其中有一项是列表项的ID，所以我们需要重新建立一个xml文件，用以展示表格中每一项的布局形式。详情如下代码所示(最终内容)：

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:gravity="center" android:orientation="vertical"> <imageview android:id="@+id/image" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="5dp" android:text="文字" android:textcolor="#ffffff"> </textview></imageview></linearlayout>

【4】Activity中的逻辑部分请看下面代码：

package com.beijing.gridview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.SimpleAdapter; import android.widget.Toast; public class MainActivity extends Activity implements OnItemClickListener { private GridView gridView; private List<Map<string object="">> dataList; private SimpleAdapter adapter; private int[] icon = { R.drawable.address_book, R.drawable.calendar, R.drawable.camera, R.drawable.clock, R.drawable.games_control, R.drawable.messenger, R.drawable.ringtone, R.drawable.settings, R.drawable.speech_balloon, R.drawable.weather, R.drawable.world, R.drawable.youtube }; private String[] iconName = { "通讯录", "日历", "照相机", "闹钟", "游戏", "短信", "铃声", "设置", "语音", "天气", "浏览器", "视频", }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridView = (GridView) findViewById(R.id.gridView); // 1、准备数据源 // 2、新建适配器(SimpleAdapter) // 3、GridView加载适配器 // 4、GridView配置事件监听器(onItemClickListener) dataList = new ArrayList<Map<string object="">>(); // getData(); adapter = new SimpleAdapter(this, getData(), R.layout.item, new String[] { "image", "text" }, new int[] { R.id.image, R.id.text }); gridView.setAdapter(adapter); gridView.setOnItemClickListener(this); } private List<Map<string object="">> getData() { // TODO Auto-generated method stub for (int i = 0; i < icon.length; i++) { Map<string object=""> map = new HashMap<string object="">(); map.put("image", icon[i]); map.put("text", iconName[i]); dataList.add(map); } return dataList; } @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub Toast.makeText(this, "我是" + iconName[arg2], Toast.LENGTH_SHORT).show(); } } </string></string></string></string></string>

> 最终演示效果如图：

> 如有不明，请点击链接http://download.youkuaiyun.com/detail/programmerteny/9467335下载源码研究。