Android app 界面布局.docx
- 文档编号:8703316
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:18
- 大小:651.70KB
Android app 界面布局.docx
《Android app 界面布局.docx》由会员分享,可在线阅读,更多相关《Android app 界面布局.docx(18页珍藏版)》请在冰豆网上搜索。
Androidapp界面布局
Android学习系列(5)--App布局初探之简单模型
人类科技的进步源自探索,探索来自于发现本原,当然App布局没这么先进,本文也只是一个归类总结。
这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用。
Android界面开发多多少少会有很多雷同或者相似的布局,不仅如此,纵观Android应用的界面,总也逃不出那些熟悉的结构。
今天,我根据经验,把我认为的常见的布局做一个分析,归纳出几种简单的模型,这些模型一般是我认为解决其对应布局问题的最佳布局,具体要看情况。
因为工作的限制,我无法专门研究天马行空,万罗天象的布局,只能根据我工作中碰到的布局,略加斟酌。
还有一点我要强调,这些布局的原则就是:
简单,灵活。
模型一:
水平三列坐拥式
效果图:
说明:
水平三列,两边分别是"返回","提交"的按钮,中间是必须居中的几个字,一般都是标题名称。
仿佛标题内容的背景坐拥左右两位美女般的按钮。
方法:
主要使用FrameLayout布局
素材:
、
layout代码:
xmlversion="1.0"encoding="utf-8"?
>
android=" android: layout_width="fill_parent" android: layout_height="wrap_content" android: background="@drawable/layout01_bg" android: paddingLeft="10dip" android: paddingRight="10dip" > layout_gravity="left|center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="返回" android: padding="8dip" /> layout_gravity="center" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="标题内容" android: textSize="18dip" android: textColor="#000000"/> layout_gravity="right|center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="前进" android: padding="8dip" /> 模型二: 水平三列双耳式 效果图: 说明: 水平三列,两边分别是"返回","提交"的按钮,中间是几个字,这几个字可以居左,居中,居右,而不与两边的按钮重叠。 此模型和坐拥式模型相似,但是中间的部分不是把左右按钮坐拥入怀,而是单独占据,且也只占据中间部分。 这种模型能够实现坐拥式模型的效果,而且能偏左偏右而不和两边按钮重叠。 但是因为这种情况使用RelativeLayout布局比较好,需要定义ID,稍微麻烦了一点点。 方法: 主要是RelativeLayout布局 素材: 同上 layout代码: --这种布局: 缺点是代码还算简洁,但是比坐拥式要稍微复杂一点 有点是比坐拥式更强大,更灵活 --> xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="fill_parent" android: layout_height="wrap_content" android: background="@drawable/layout01_bg" android: paddingLeft="10dip" android: paddingRight="10dip" > id="@+id/left_button" android: layout_alignParentLeft="true" android: layout_centerVertical="true" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="返回列表" android: padding="8dip" /> id="@+id/right_button" android: layout_alignParentRight="true" android: layout_centerVertical="true" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="评论" android: padding="8dip" /> --设置LeftOf和RightOf,可填充中间空余部分--> layout_toRightOf="@id/left_button" android: layout_toLeftOf="@id/right_button" android: layout_centerVertical="true" android: gravity="left" android: paddingLeft="5dip" android: layout_width="fill_parent" android: layout_height="wrap_content" android: text="资讯>>正文" android: textSize="18dip" android: textColor="#000000"/> 关于这个模型,我补充一点,很多人认为这个用LinearLayout布局,设置两边的控件居左居右,中间的设置layout_gravity想偏左就偏左,想偏右就偏右。 但是,LinearLayout布局方向为"horizontal",layout_gravity是无效的。 模型三: 水平四列双耳互补式 效果图: 说明: 两边是按钮,中间部分被两个控件互补式分割,主要是左边的会随内容填充,但是必须两者内容宽度之和不能大于中间部分。 这个和双耳式差不多,也说明了,双耳式在保证有空余空间的基础上,可以扩充到4列,5列等多列。 方法: 主要是RelativeLayout布局 素材: 同上 layout代码: --双耳式在多列情况下的扩展式--> xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="fill_parent" android: layout_height="wrap_content" android: background="@drawable/layout01_bg" android: paddingLeft="10dip" android: paddingRight="10dip" > id="@+id/left_button" android: layout_alignParentLeft="true" android: layout_centerVertical="true" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="返回列表" android: padding="8dip" /> id="@+id/right_button" android: layout_alignParentRight="true" android: layout_centerVertical="true" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/layout01_tool" android: text="评论" android: padding="8dip" /> --下面这个宽度是wrap_content,在左边按钮的右边,能够随内容加宽--> id="@+id/center_text_01" android: layout_toRightOf="@id/left_button" android: layout_centerVertical="true" android: gravity="left" android: paddingLeft="5dip" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="#aabbcc" android: text="夫妇+小三" android: textSize="18dip" android: textColor="#000000"/> --下面这个宽度是fill_parent,自动填充中间部分的空余空间,分别定义了左右依赖的控件,所以放在最后--> id="@+id/center_text_02" android: layout_toRightOf="@id/center_text_01" android: layout_toLeftOf="@id/right_button" android: layout_centerVertical="true" android: gravity="right" android: paddingLeft="5dip" android: layout_width="fill_parent" android: layout_height="wrap_content" android: background="#ccaabb" android: text="何求" android: textSize="18dip" android: textColor="#000000"/> 模型四: 水平多列分摊式(增强版) 效果图: 说明: 几大模块均占所有区域,之间以小小的分割线隔离。 因为分割线只占很小的部分,所有模块和分割线并不是分摊的,但是模块标题本身占据大头,他们之间是分摊的。 素材: 方法: 直接用LinearLayout布局,模块均摊,都设置layout_weight="1",分割线不分摊,不设置layout_weight,默认自包裹,不延伸。 layout代码: --此代码采用动态生成,只要稍加判断,效果一样--> xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="fill_parent" android: layout_height="25dip" android: background="#ffffff" > text="首页" android: layout_weight="1" android: gravity="center" android: layout_gravity="center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" /> gravity="center" android: layout_gravity="center_vertical" android: layout_width="10dip" android: layout_height="wrap_content" android: src="@drawable/layout04_split" /> text="资讯" android: layout_weight="1" android: gravity="center" android: layout_gravity="center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" /> gravity="center" android: layout_gravity="center_vertical" android: layout_width="10dip" android: layout_height="wrap_content" android: src="@drawable/layout04_split"/> text="博客" android: layout_weight="1" android: gravity="center" android: layout_gravity="center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" /> gravity="center" android: layout_gravity="center_vertical" android: layout_width="10dip" android: layout_height="wrap_content" android: src="@drawable/layout04_split"/> text="图片" android: layout_weight="1" android: gravity="center" android: layout_gravity="center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" /> gravity="center" android: layout_gravity="center_vertical" android: layout_width="10dip" android: layout_height="wrap_content" android: src="@drawable/layout04_split"/> text="论坛" android: layout_weight="1" android: gravity="center" android: layout_gravity="center_vertical" android: layout_width="wrap_content" android: layout_height="wrap_content" /> 模型五: 垂直三行天地式 效果图: 说明: 类似于水平三列双耳式,上下固定,中间自适应(自填充),不多说。 方法: 同水平三列双耳式,使用RelativeLayout布局 layout代码: xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="fill_parent" android: layout_height="fill_parent"> id="@+id/top_text" android: layout_alignParentTop="true" android: layout_width="fill_parent" android: layout_height="wrap_content" android: gravity="center" android: text="上海车展" android: textColor="#ffffff"/> id="@+id/bottom_linear" android: layout_width="fill_parent" android: layout_height="wrap_content" android: gravity="center" android: layout_alignParentBottom="true" android: background="#123456" android: orientation="horizontal"> layout_width="wrap_content" android: layout_height="wrap_content" android: text="上一张"/> layout_width="wrap_content" android: layout_height="wrap_content" android: layout_gravity="center" android: text="下一张"/> --下面部分是中间主体部分,我特意用LinearLayout包裹起来,表示这里面可以填充其他任何组合的控件--> id="@+id/center_linear" android: layout_below="@id/top_text" android: layout_above="@id/bottom_linear" android: layout_width="fill_parent" android: layout_height="fill_parent" android: background="#ffffff" android: gravity="center"> layout_width="fill_parent" android: layout_height="fill_parent" android: src="@drawable/shanhai"/> 模型六: 垂直三行弹簧式 效果图: 说明: 这种模型很简单,类似于弹簧,最下面的一行能伸能屈,中间部分随内容固定。 方法: 类似于模式五。 layout代码: xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="fill_parent" android: layout_height="fill_parent"> --顶部--> id="@+id/top_text" android: layout_alignParentTop="true" android: layout_width="fill_parent" android: layout_height="wrap_content" android: gravity="center" android: text="上海车展" android: textColor="#ffffff"/> --顶部的下面是中间导航部分--> id="@+id/center_linear" android: layo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Android app 界面布局 界面 布局