Android学习系列(5)--App布局初探之简单模型
这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用。
今天,我根据经验,把我认为的常见的布局做一个分析,归纳出几种简单的模型,这些模型一般是我认为解决其对应布局问题的最佳布局,具体要看情况。
因为工作的限制,我无法专门研究天马行空,万罗天象的布局,只能根据我工作中碰到的布局,略加斟酌。
还有一点我要强调,这些布局的原则就是:简单,灵活。
效果图:
<ignore_js_op>

说明:水平三列,两边分别是"返回","提交"的按钮,中间是必须居中的几个字,一般都是标题名称。
仿佛标题内容的背景坐拥左右两位美女般的按钮。
方法:主要使用FrameLayout布局
素材:
<ignore_js_op>


layout代码:
- <!--这种布局:
- 缺点是,标题只能就几个字,字多了就会撑开并和两边的按钮重叠
- 优点是,代码简洁;-->
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/layout01_bg"
- android:paddingLeft="10dip"
- android:paddingRight="10dip"
- >
- <Button android: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"
- />
- <TextView android:layout_gravity="center"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="标题内容"
- android:textSize="18dip"
- android:textColor="#000000" />
- <Button android: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"
- />
- </FrameLayout>
复制代码
模型二:水平三列双耳式
效果图:
<ignore_js_op>
说明: 水平三列,两边分别是"返回","提交"的按钮,中间是几个字,这几个字可以居左,居中,居右,而不与两边的按钮重叠。
此模型和坐拥式模型相似,但是中间的部分不是把左右按钮坐拥入怀,而是单独占据,且也只占据中间部分。
这种模型能够实现坐拥式模型的效果,而且能偏左偏右而不和两边按钮重叠。
但是因为这种情况使用RelativeLayout布局比较好,需要定义ID,稍微麻烦了一点点。
方法:主要是RelativeLayout布局
素材:同上
layout代码:
- <!--这种布局:
- 缺点是代码还算简洁,但是比坐拥式要稍微复杂一点
- 有点是比坐拥式更强大,更灵活
- -->
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/layout01_bg"
- android:paddingLeft="10dip"
- android:paddingRight="10dip"
- >
- <Button android: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"
- />
- <Button android: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,可填充中间空余部分-->
- <TextView android: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" />
- </RelativeLayout>
复制代码
但是,LinearLayout布局方向为"horizontal" ,layout_gravity是无效的。
效果图:
<ignore_js_op>

<ignore_js_op>

说明: 两边是按钮,中间部分被两个控件互补式分割,主要是左边的会随内容填充,但是必须两者内容宽度之和不能大于中间部分。
这个和双耳式差不多,也说明了,双耳式在保证有空余空间的基础上,可以扩充到4列,5列等多列。
方法:主要是RelativeLayout布局
素材:同上
layout代码:
- <!--双耳式在多列情况下的扩展式-->
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/layout01_bg"
- android:paddingLeft="10dip"
- android:paddingRight="10dip"
- >
- <Button android: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"
- />
- <Button android: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,在左边按钮的右边,能够随内容加宽 -->
- <TextView android: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,自动填充中间部分的空余空间,分别定义了左右依赖的控件,所以放在最后 -->
- <TextView android: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" />
- </RelativeLayout>
复制代码
模型四:水平多列分摊式(增强版)
效果图:
<ignore_js_op>
说明:几大模块均占所有区域,之间以小小的分割线隔离。
因为分割线只占很小的部分,所有模块和分割线并不是分摊的,但是模块标题本身占据大头,他们之间是分摊的。
素材:
<ignore_js_op>
方法: 直接用LinearLayout布局,模块均摊,都设置layout_weight="1",分割线不分摊,不设置layout_weight,默认自包裹,不延伸。
layout代码:
- <!--此代码采用动态生成,只要稍加判断,效果一样-->
- <?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="25dip"
- android:background="#ffffff"
- >
- <TextView android:text="首页"
- android:layout_weight="1"
- android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <ImageView android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="10dip"
- android:layout_height="wrap_content"
- android:src="@drawable/layout04_split"
- />
- <TextView android:text="资讯"
- android:layout_weight="1"
- android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <ImageView android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="10dip"
- android:layout_height="wrap_content"
- android:src="@drawable/layout04_split"/>
- <TextView android:text="博客"
- android:layout_weight="1"
- android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <ImageView android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="10dip"
- android:layout_height="wrap_content"
- android:src="@drawable/layout04_split"/>
- <TextView android:text="图片"
- android:layout_weight="1"
- android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <ImageView android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="10dip"
- android:layout_height="wrap_content"
- android:src="@drawable/layout04_split"/>
- <TextView android:text="论坛"
- android:layout_weight="1"
- android:gravity="center"
- android:layout_gravity="center_vertical"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- </LinearLayout>
复制代码
模型五:垂直三行天地式
效果图:
<ignore_js_op>
说明:类似于水平三列双耳式,上下固定,中间自适应(自填充),不多说。
方法:同水平三列双耳式,使用RelativeLayout布局
layout代码:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <TextView android: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"/>
- <LinearLayout android: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">
- <Button android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="上一张"/>
- <Button android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:text="下一张"/>
- </LinearLayout>
- <!-- 下面部分是中间主体部分,我特意用LinearLayout包裹起来,表示这里面可以填充其他任何组合的控件 -->
- <LinearLayout android: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">
- <ImageView android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:src="@drawable/shanhai" />
- </LinearLayout>
- </RelativeLayout>
复制代码
模型六:垂直三行弹簧式
效果图:
<ignore_js_op>
说明:这种模型很简单,类似于弹簧,最下面的一行能伸能屈,中间部分随内容固定。
方法:类似于模式五。
layout代码:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <!-- 顶部 -->
- <TextView android: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"/>
- <!-- 顶部的下面是中间导航部分 -->
- <LinearLayout android:id="@+id/center_linear"
- android:layout_below="@id/top_text"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:background="#123456"
- android:orientation="horizontal">
- <Button android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="上一张"/>
- <Button android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:text="下一张"/>
- </LinearLayout>
- <!-- 最后部分填充剩下的区域 -->
- <LinearLayout android:id="@+id/bottom_linear"
- android:layout_below="@id/center_linear"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff"
- android:gravity="center"
- android:layout_alignParentBottom="true">
- <ImageView android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:src="@drawable/shanhai" />
- </LinearLayout>
- </RelativeLayout>
复制代码
希望看了文章的人,能支持一下,有什么好的经典的布局,给我留言,一起探讨,一起分享。
最后公布一个大概布局的三字文:
Android学习系列(5)--App布局初探之简单模型的更多相关文章
- Android学习系列(23)--App主界面实现
在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...
- Android学习系列(15)--App列表之游标ListView(索引ListView)
游标ListView,提供索引标签,使用户能够快速定位列表项. 也可以叫索引ListView,有的人称也为Tweaked ListView,可能更形象些吧. 一看图啥都懂了: 1. ...
- Android学习系列(11)--App列表之拖拽ListView(下)
接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法. 在这个方法中我们主要是处理 ...
- Android学习系列(10)--App列表之拖拽ListView(上)
研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨. 鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...
- Android学习系列(3)--App自动更新之自定义进度视图和内部存储
友好的视觉感知和稳定的不出错表现,来自于我们追求美感和考虑的全面性,博客园从技术的角度,一直我都很欣赏.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 这 ...
- Android学习系列(37)--App调试内存泄露之Context篇(下)
接着<Android学习系列(36)--App调试内存泄露之Context篇(上)>继续分析. 5. AsyncTask对象 我N年前去盛大面过一次试,当时面试官极力推荐我使用AsyncT ...
- Android学习系列(7)--App轮询服务器消息
这篇文章是android开发人员的必备知识. 1.轮询服务器 一般的应用,定时通知消息可以采用轮询的方法从服务器拿取消息,当然实时消息通知的话,建议采用推送服务. 其中需要注意轮询的频率 ...
- Android学习系列(17)--App列表之圆角ListView(续)
http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html 本来这篇文章想并到上篇Android学习系列(16)- ...
- Android学习系列(18)--App工程结构搭建
本文算是一篇漫谈,谈一谈关于Android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构. 关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的 ...
随机推荐
- Spark Streaming的编程模型
Spark Streaming的编程和Spark的编程如出一辙,对于编程的理解也非常类似.对于Spark来说,编程就是对于RDD的操作:而对于Spark Streaming来说,就是对DStream的 ...
- 字符串转换成JSON的三种方式
采用Ajax的项目开发过程中,经常需要将JSON格式的字符串返回到前端,前端解析成JS对象(JSON ).ECMA-262(E3) 中没有将JSON概念写到标准中,但在 ECMA-262(E5) 中J ...
- Objective-C:在类中设置不同协议
在下面的代码中,设置了两种不同的协议规则:一种是老师对学生设置的协议:即老师发出命令后,学生站起来.回答问题.坐下; 另一种是我对学生设置的协议:即学生按照我的协议中的初始化函数去初始化一个整数. / ...
- 我所遭遇过的游戏中间件---nvDXTLib
我所遭遇过的游戏中间件---nvDXTLib nvDXTLib是Nvidia提供的一套用于DXT纹理压缩SDK.接口十分简洁,就是提供了几个纹理压缩的函数,其中我使用最多的函数是: DXTLIB_AP ...
- utf-8-validation
https://leetcode.com/problems/utf-8-validation/ public class Solution { public boolean validUtf8(int ...
- opencv学习_5 (IplImage的结构)
IplImage结构体为: typedef struct _IplImage { int nSize; /* IplImage大小 */ int ID; /* 版本 (=0)*/ int nChann ...
- OA系统启动:基础数据,工作流设计
自从开源OA系统启动:系统概览放 出来后.园友们反馈了一些不错的建议.主要集中在工作流部分.本来是先不考虑工作流部分.这些天的交流和思考.决定把工作流部分作为系统基础结构贯穿整个 系统.所以先考虑了这 ...
- java获取指定文件夹下的所有文件名
package com.henu.util; import java.io.File; public class TakeFilePathAndName { public static void ma ...
- Linux上如何查看Deb和RPM软件包的更新日志
导读 当一个程序或库打包成Deb或RPM软件包后会有一些元数据文件包含在其中,其中之一就是 changelog文件,它记录了软件包每次更新后发生了什么变化.因此,如果你想找出你安装或更新的软件包发生了 ...
- Angular路由与Nodejs路由的区别
转自:http://www.imooc.com/qadetail/114683?t=148182 觉得angualr.js的路由是针对于单页面的路由,每次路由发生变化,只是页面的状态发生变化,页面本身 ...