18.GridView网格视图的实例：显示图片

目标效果

使用GridView

页面布局

1.主页面的布局，设置每行有三个item。此时，该网格中内容是空的，需要在主类中为其添加每一个item。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg5"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <GridView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:id="@+id/grid"></GridView>

</LinearLayout>

2.每一个item的设计，在这里我们的item是一个图片资源和一个文本，上下排布。因此需要新建一个itemd.xml文件，编写一个item长得样子。`

<?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:orientation="vertical" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="fitCenter"
        android:background="#666666"/>

    <TextView 
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="24dp"
        android:layout_gravity="center"/>


</LinearLayout>

添加item

package com.example.gridviewdemo;

import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator;
import java.util.Map;


import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity 
{
    int[] images=new int[]{R.drawable.a001,R.drawable.a002,R.drawable.a003,
                            R.drawable.a004,R.drawable.a005,R.drawable.a006,
                            R.drawable.a007,R.drawable.a008,R.drawable.a009};
    String[] show=new String[]{"图片1","图片2","图片3",
                                "图片4","图片5","图片6","图片7","图片8","图片9"};

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridview=(GridView) findViewById(R.id.grid);

        //定义一个list集合
        List<Map<String, Object>> listItem=new ArrayList<Map<String,Object>>(); 
        //通过循环，将图片文字id和和列表项文字放到map中，并添加到list集合中
        for(int i=0;i<images.length;i++)
        {
            Map<String, Object> map=new HashMap<String, Object>();
            //采用值键对的形式存储
            map.put("image", images[i]);
            map.put("text", show[i]);
            listItem.add(map);
        }

        /*
         * 创建一个适配器:为item.xml文件的控件配置图片和文字
         * 然后为我们的网格视图添加适配器
         */
        SimpleAdapter adapter=new SimpleAdapter(this, listItem, R.layout.item,
                new String[]{"text","image"}, new int[]{R.id.show,R.id.image});
        gridview.setAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}