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;@Overrideprotected 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;}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic 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.运行就显示目标效果了。