详解android gridview实现九宫格

GridView跟ListView都是比较常用的多控件布局，一个在平面上可显示多个条目的可滚动的视图组件，该组件中的条目通过一个ListAdapter和该组件进行关联，今天我们就简单的介绍如何使用GridView实现九宫图。

我们还是通过一个演示的示例来向大家说明gridview的一些常用做法

首先我们新建一个gridviewDemo的项目

main.xml里面添加了一个GirdView控件，用于装载GirdView Item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<GridView
android:id="@+id/gv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="3"
/>
<ImageView
android:id="@+id/pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

</LinearLayout>

gridview_item.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/gvitem"
android:layout_width="90dip"
android:layout_height="90dip"
/>

</LinearLayout>

GridViewDemoActivity.java我们的activity文件，用于绑定gridview数据并显示

import java.util.ArrayList;
import java.util.HashMap;

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.ImageView;
import android.widget.SimpleAdapter;

/**
* 用SimpleAdapter实现GridView
*/
public class GridViewDemoActivity extends Activity {

private GridView gv;
private ImageView image;
private int imgID[];

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// 获取组件
gv = (GridView) findViewById(R.id.gv);
image = (ImageView) findViewById(R.id.pic);

// 实例化一个范型为HashMap<String,Object> 的ArrayList,用于存储数据
ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
// 声明图片数组，用于存放图片ID
imgID = new int[] { R.drawable.img01, R.drawable.img02,
R.drawable.img03, R.drawable.img04, R.drawable.img05,
R.drawable.img06, R.drawable.img07, R.drawable.img08,
R.drawable.img09, };
// 通过for循环将图片数据存储到ArrayList
for (int i = 0; i < imgID.length; i++) {
HashMap<String, Object> hashMap = new HashMap<String, Object>();
hashMap.put("Image", imgID[i]);
list.add(hashMap);
}
// 声明SimpleAdapter构造器，用于把图片数据和gridview_item布局关联
SimpleAdapter adapter = new SimpleAdapter(this, list,
R.layout.gridview_item, new String[] { "Image" },
new int[] { R.id.gvitem });
//GridView和SimpleAdapter绑定并显示
gv.setAdapter(adapter);
//默认image 显示图片数组第一个
image.setImageResource(imgID[0]);
//实现GridView点击操作
gv.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
image.setImageResource(imgID[arg2]);
}
});
}
}

保存，运行项目！效果图如下：



详情查看》》