使用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();            }        });    }}

实现效果如图：