也来遵守android UI 规范--GridView主界面设计

1 概览

l  Androiduipatterns网站针对android应用界面的设计提出了一些规范性的建议，可以参考参考

l  GridView实现主界面

2 实现的截图

 

3 主要实现代码

3.1 定义GridView

GridView gridview = (GridView)findViewById(R.id.indexMenu);

3.2 初始化适配器

SimpleAdapter myAdapter = new SimpleAdapter(
				this, //context ,上下文
				ImageItem,//data , 数据源
				R.layout.item,//resource, 一个定义列表项目的视图布局的资源唯一标识。布局文件将至少应包含那些在to中定义了的名称。
				// 一个将被添加到Map上关联每一个项目的列名称的列表
				new String[] { "ItemImage", "ItemText" },
				//  from ,一系列被关联的Item的数据源名字
				new int[] { R.id.ItemImage, R.id.ItemText });//to,应该在参数from显示列的视图。这些应该全是TextView。在列表中最初的N视图是从参数from中最初的N列获取的值。

3.3 绑定适配器

gridview.setAdapter(myAdapter);

 

3.4 增加每个Item的监听

gridview.setOnItemClickListener(newItemClickListener());//ItemClickListener为自定义类

 

4 相关布局

 

4.1 index.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="1" 
    android:background="@color/style_white">

    <GridView
        android:id="@+id/indexMenu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="120dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="20dp"
         >
    </GridView>


</LinearLayout>

 

4.2 Item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:gravity="center"
    android:background="@color/style_white"
    >


    
    <ImageView
         android:id="@+id/ItemImage"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"
     />
    
      <TextView
        android:id="@+id/ItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#000000"
        android:text="" 
        android:textColorHighlight="#0072E3"
        />
    

</LinearLayout>

 

4.3 自定义菜单栏布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/screen"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

        <TextView
        android:id="@+id/head_center_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="" 
        android:textColor="#FFFFFF"
        />
    
    <Button
        android:id="@+id/TitleHomeBtn"
        android:layout_width="30dp"   
        android:layout_height="30dp"
        android:background="@drawable/home"
        android:gravity="center"
        android:layout_marginTop="0dp"
        android:layout_alignParentLeft="true"/>
    	
    	
   <Button
    	android:id="@+id/TitleBackBtn"
        android:layout_width="30dp"   
        android:layout_height="30dp"
        android:background="@drawable/back"
        android:gravity="center"
        android:layout_marginTop="0dp"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

5 GridView的XML属性

属性	描述
android:columnWidth	列宽
android:gravity	所处布局的位置
android:horizontalSpacing	两列之间的间距
android:numColumns	设置列数
android:stretchMode	缩放模式
android:verticalSpacing	两行之间的间距