使用GridView实现九宫格布局

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

首先来看布局：

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

 
  
 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  用来设置九宫格中每个小格图标的样式，代码如下：
 
  
 
  


    

        


        

        

        
    
 
（三）代码实现 
  
 
  
 
  
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> lstImageItem = new ArrayList>();
        for (int i = 0; i < length; i++) {
            HashMap map = new HashMap();
            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();
            }
        });
    }

}
 
  
 
 
  

    实现效果如图：