九宫格布局是目前十分常见的一种布局,我们可以用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();
}
});
}
}