使用GridView实现九宫格布局

九宫格布局是目前十分常见的一种布局，我们可以用GridView来实现。主要分为两块，布局的设计以及代码适配。

首先来看布局：

（一）主页面布局如下，main.xml 只有一个GridView

<pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

GridView中一些属性用途如下：

1.android:numColumns=”auto_fit”   //GridView的列数设置为自动

2.android:columnWidth=”90dp "       //每列的宽度，也就是Item的宽度

3.android:stretchMode=”columnWidth"//缩放与列宽大小同步

4.android:verticalSpacing=”10dp”          //两行之间的边距

5.android:horizontalSpacing=”10dp”      //两列之间的边距 

6.android:cacheColorHint="#00000000" //去除拖动时默认的黑色背景

7.android:listSelector="#00000000"        //去除选中时的黄色底色

8.android:scrollbars="none"                   //隐藏GridView的滚动条

9.android:fadeScrollbars="true"             //设置为true就可以实现滚动条的自动隐藏和显示

10.android:fastScrollEnabled="true"      //GridView出现快速滚动的按钮(至少滚动4页才会显示)

11.android:fadingEdge="none"         //GridView衰落(褪去)边缘颜色为空，缺省值是vertical。(可以理解为上下边缘的提示色)

12.android:fadingEdgeLength="10dip"   //定义的衰落(褪去)边缘的长度

13.android:stackFromBottom="true"       //设置为true时，你做好的列表就会显示你列表的最下面

14.android:transcriptMode="alwaysScroll" //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内

15.android:drawSelectorOnTop="false"  //点击某条记录不放，颜色会在记录的后面成为背景色,内容的文字可见(缺省为false)

（二）item.xml  用来设置九宫格中每个小格图标的样式，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:paddingBottom="4dip" android:layout_width="fill_parent"
    android:gravity="center_horizontal">
    <LinearLayout
        android:id="@+id/shoukuan"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="20dp" />


        <ImageView
            android:id="@+id/img_shoukuan"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:src="@drawable/o2o_16"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="20dp" />

        <TextView
            android:id="@+id/txt_shoukuan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="O2O收款"
            android:textColor="#000000"
            android:textSize="13dp"
            android:gravity="center"/>
    </LinearLayout>
</RelativeLayout> 

（三）代码实现

public class MainActivity extends ActionBarActivity {

    //定义图标数组
    private int[] imageRes = {
            R.drawable.o2o_16,
            R.drawable.dingdan_16,
            R.drawable.zhuanzhang_16,
            R.drawable.telchongzhi_28,
            R.drawable.card_30,
            R.drawable.shuidian_31,
            R.drawable.weizhang_39,
            R.drawable.kuaidi_39,
            R.drawable.jiahao_45};

    //定义图标下方的名称数组
    private String[] name = {
            "O2O收款",
            "订单查询",
            "转账",
            "手机充值",
            "信用卡还款",
            "水电煤",
            "违章代缴",
            "快递查询",
            "更多"
    };

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

        GridView gridview = (GridView) findViewById(R.id.gridview);
        int length = imageRes.length;

        //生成动态数组，并且转入数据
        ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
        for (int i = 0; i < length; i++) {
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("ItemImage", imageRes[i]);//添加图像资源的ID
            map.put("ItemText", name[i]);//按序号做ItemText
            lstImageItem.add(map);
        }
        //生成适配器的ImageItem 与动态数组的元素相对应
        SimpleAdapter saImageItems = new SimpleAdapter(this, 
                lstImageItem,//数据来源
                R.layout.item,//item的XML实现

                //动态数组与ImageItem对应的子项
                new String[]{"ItemImage", "ItemText"},

                //ImageItem的XML文件里面的一个ImageView,两个TextView ID
                new int[]{R.id.img_shoukuan, R.id.txt_shoukuan});
        //添加并且显示
        gridview.setAdapter(saImageItems);
        //添加消息处理
        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this,name[position],Toast.LENGTH_LONG).show();
            }
        });
    }

}

实现效果如图：