也来遵守android UI 规范--GridView主界面设计
2012-08-23 21:55
155 查看
1 概览
l
Androiduipatterns网站针对android应用界面的设计提出了一些规范性的建议,可以参考参考
l
GridView实现主界面
2 实现的截图
3 主要实现代码
3.1 定义GridView
GridView gridview = (GridView)findViewById(R.id.indexMenu);
3.2 初始化适配器
3.3 绑定适配器
gridview.setAdapter(myAdapter);
3.4 增加每个Item的监听
gridview.setOnItemClickListener(newItemClickListener());//ItemClickListener为自定义类
4 相关布局
4.1 index.xml
4.2 Item布局
4.3 自定义菜单栏布局
5 GridView的XML属性
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 | 两行之间的间距 |
相关文章推荐
- iOS与Android用户界面(UI)设计规范
- 一套完整的UI设计规范手册(Android版)
- Android UI 设计(14):GridView 控件
- Android UI 设计规范
- UI设计规范之Android尺寸单位换算及切图规范
- AndroidUI模板设计
- (Android) 针对不同屏幕解析度设计UI
- [经验分享] Android 系统 UI 效率低下的框架设计的问题
- Android系统UI设计之:视图
- Android ActionBar应用实战,高仿微信主界面的设计
- 最新Android & iOS设计尺寸规范
- UI设计规范技巧——文件整理
- [置顶] Android仿人人客户端(v5.7.1)——应用主界面之左侧面板UI实现
- Android手机UI设计---”知乎“界面外观模仿篇(二)---在Fragment里使用自定义listview以及popupwindow弹出窗口
- Android UI控件应用分享:如何实现“带分割线并且Item为正方形”的GridView
- Android UI系统控件进阶(四)—网格视图控件GridView
- Material Design Android 5.0设计规范之CoordinatorLayout的使用
- Android UI设计之<六>使用HTML标签,实现在TextView中对部分文字进行加粗显示
- Android 自定义UI组合控件设计方法
- Android UI模板设计--自定义actionbar(topbar)模板(慕课网学习笔记)