Android-GridView的图文列表显示

目标效果：

 

前边有篇博文写的是使用ListView实现的列表，这一篇是使用GridView实现的列表，不同之处为一个水平排列一个竖直排列，素材仍使用上一次的水果图片。

1.activity_main.xml页面定义GridView控件。

activity_main.xml页面：

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <!-- 
    	android:numColumns=""   每一行显示多少列
    	android:horizontalSpacing=""   两列之间的间距
    	android:verticalSpacing=""   两行之间的间距
    -->
    <GridView
        android:id="@+id/gvShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:numColumns="3" >
    </GridView>

</RelativeLayout>

2.新建item.xml页面作为子布局页面，定义ImageView控件和TextView控件。

item.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:gravity="center"
    android:background="#000000"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/ivPic"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:background="@drawable/apple_pic" />

    <TextView
        android:id="@+id/tvText"
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:text="TextView" />

</LinearLayout>

3.MainActivity.java页面添加适配器并进行事件处理。

MainActivity.java页面：

package com.example.zhuomian;

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.util.Log;
import android.view.Menu;
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 gvShow;
	private List<Map<String, Object>> dataList;  //数据源集合
	private int[] icon = { R.drawable.apple_pic, R.drawable.banana_pic,
			R.drawable.cherry_pic, R.drawable.grape_pic, R.drawable.mango_pic,
			R.drawable.orange_pic, R.drawable.pear_pic,
			R.drawable.pineapple_pic, R.drawable.strawberry_pic,
			R.drawable.watermelon_pic };        //将图片封装到数组
	private String[] iconName={"苹果", "香蕉", "樱桃", "葡萄", "芒果", "橘子", "梨", "菠萝", "草莓",
			"西瓜"};                             //将文字封装到数组
	private SimpleAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		gvShow = (GridView) findViewById(R.id.gvShow);
		
		dataList = new ArrayList<Map<String, Object>>();  //新建数据源
		
		/**
		 * 新建适配器
		 * 参数一是上下文
		 * 参数二是数据源
		 * 参数三是子布局页面
		 * 参数四是数据源集合的键名
		 * 参数五是子布局控件id
		 */
		adapter=new SimpleAdapter(this,getData(),R.layout.item,new String[]{"image","text"},new int[]{R.id.ivPic,R.id.tvText});
		gvShow.setAdapter(adapter);           //GridView加载适配器
		gvShow.setOnItemClickListener(this);  //GridView加载点击事件
		
	}

	private List<Map<String,Object>> getData() {
		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 boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
		Toast.makeText(this,"我是"+iconName[position],Toast.LENGTH_SHORT).show();  //position为坐标，从0开始
	}
}

4.因为，运行界面为黑色并且没有标题栏，所以需要在AndroidMainfest.xml页面进行主题更改。

5.运行就显示目标效果了。