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

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

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


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

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

2在activity.xml布局文件中加入一个GridView控件,最终如下所示:

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

【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> 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>(); // 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> getData() { // TODO Auto-generated method stub for (int i = 0; i < icon.length; i++) { Map map = new HashMap(); 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(); } }


> 最终演示效果如图:

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

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

你可能感兴趣的:(使用GridView以表格形式显示多张图片)