Android之简单又好用的多行多列网状九宫格形式控件GridView

实现九宫格图，用GridView是首选，也是最简单的。主要是设置Adapter。

类似我们常用到的淘宝里就有使用到这个GridView

网格视图(采用自定义SimpleAdapter)

GridView用于在界面上按行，列分布的方式来显示多个组件，GridView和ListView有共同的父类。有很高的相似性，唯一的区别：ListView只显示一列，而GridView可以显示多列。

GridView提供的属性：

android:columnWidth:设置列的宽度

android:gravity:设置对齐方式

android:horizontalSpacing:设置各元素之间的水平间距

android:numColumns:设置列数

android:verticalSpacing:设置各元素之间的垂直间距

android:stretchMode:设置拉伸模式

   它的值有:NO_STRETCH:不拉伸

    STRETCH_SPACING:近拉伸元素之间的间距

    STRETCH_SPACING_UNIFORM:表格元素本身，元素之间的间距一起拉伸

   STRETCH_COLUMN_WIDTH:仅拉伸元素表格元素本身

添加setOnItemClickListener(OnItemClickListener)

或者setOnItemSelectedListener(OnItemSelectedListener)

例如：带预览的图片浏览器

这里的GridView用法也类似ListView ,主要是设置adapter，不过我们用SimpleAdapter

却更好实现，而不是BaseAdapter去，不过都是继承Adapter，还是很像的，

这里我们先定义一个GridView，属性就随便啦

<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"    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="com.example.m_3groupview.MainActivity" >    <GridView         android:layout_width="match_parent"        android:layout_height="match_parent"        android:numColumns="5"        android:id="@+id/gv"             ></GridView></RelativeLayout>

，既然和ListView类似，那我们也需要一个Iteam，即我们需要一个单个的格子样式

我们就新建一个layout.xml来实现吧，取名就myiteam.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical" >        <ImageView android:layout_width="50dp"        android:layout_height="50dp"        android:id="@+id/iv"/>        <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/tv"/>    </LinearLayout>

 

然后就可以在java中去实现九宫格了，用法也很简单

这里我们用到Toast的方法将每个点击事件写了一遍，提示出文字

package com.example.m_3groupview;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.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.GridView;import android.widget.SimpleAdapter;import android.widget.Toast;import android.widget.AdapterView.OnItemClickListener;public class MainActivity extends Activity {GridView gridview;private int[] images = { R.drawable.ic_launcher, R.drawable.ic_launcher,R.drawable.ic_launcher, R.drawable.ic_launcher,R.drawable.ic_launcher, R.drawable.ic_launcher };private String[] titles = { "瑞雯", "赵信", "安妮", "盖伦", "安妮", "盖伦" };private List<Map<String, Object>> list;// C(适配器)private SimpleAdapter simpleAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);list = new ArrayList<Map<String, Object>>();for (int i = 0; i < images.length; i++) {Map<String, Object> map = new HashMap<String, Object>();map.put("image", images[i]);map.put("title", titles[i]);list.add(map);}simpleAdapter = new SimpleAdapter(this, list, R.layout.myiteam,new String[] { "title", "image" }, new int[] { R.id.tv,R.id.iv, });gridview = (GridView) findViewById(R.id.gv);gridview.setAdapter(simpleAdapter);gridview.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {// TODO Auto-generated method stubswitch (position) {case 0:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 1:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 2:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 3:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 4:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 5:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;case 6:Toast.makeText(MainActivity.this, titles[position],Toast.LENGTH_SHORT).show();break;}}});}}