加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

跟我一起学Android程序开发之App简单布局模型

[日期:2014-03-12] 作者: 来源: [字体: ]

受限于手机屏幕大小的限制和高宽的固定,有很多web的布局其实在手机上的实现是很难的。本文仅仅归类总结出6种App布局模型

Android界面开发多多少少会有很多雷同或者相似的布局,不仅如此,纵观Android应用的界面,总也逃不出那些熟悉的结构。
今天,我根据经验,把我认为的常见的布局做一个分析,归纳出几种简单的模型,这些模型一般是我认为解决其对应布局问题的最佳布局,具体要看情况。
因为工作的限制,我无法专门研究天马行空,万罗天象的布局,只能根据我工作中碰到的布局,略加斟酌。
还有一点我要强调,这些布局的原则就是:简单,灵活。

模型一: 水平三列坐拥式
     效果图:
<ignore_js_op>     
     说明:水平三列,两边分别是"返回","提交"的按钮,中间是必须居中的几个字,一般都是标题名称。
           仿佛标题内容的背景坐拥左右两位美女般的按钮。
     方法:主要使用FrameLayout布局
     素材:
         <ignore_js_op> 、<ignore_js_op> 
     layout代码:
  1. <!--这种布局:
  2. 缺点是,标题只能就几个字,字多了就会撑开并和两边的按钮重叠
  3. 优点是,代码简洁;-->
  4. <?XML version="1.0" encoding="utf-8"?>
  5. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  6.     android:layout_width="fill_parent"
  7.     android:layout_height="wrap_content"
  8.     android:background="@drawable/layout01_bg"
  9.     android:paddingLeft="10dip"
  10.     android:paddingRight="10dip"
  11.     >
  12.     <Button android:layout_gravity="left|center_vertical"
  13.        android:layout_width="wrap_content"
  14.        android:layout_height="wrap_content"
  15.        android:background="@drawable/layout01_tool"
  16.        android:text="返回"
  17.        android:padding="8dip"
  18.     />
  19.    
  20.     <TextView android:layout_gravity="center"
  21.        android:layout_width="wrap_content"
  22.        android:layout_height="wrap_content"
  23.        android:text="标题内容"
  24.        android:textSize="18dip"
  25.        android:textColor="#000000" />
  26.        
  27.     <Button android:layout_gravity="right|center_vertical"
  28.        android:layout_width="wrap_content"
  29.        android:layout_height="wrap_content"
  30.        android:background="@drawable/layout01_tool"
  31.        android:text="前进"
  32.        android:padding="8dip"
  33.     />
  34. </FrameLayout>
复制代码

模型二:水平三列双耳式
     效果图:
<ignore_js_op> 
     说明: 水平三列,两边分别是"返回","提交"的按钮,中间是几个字,这几个字可以居左,居中,居右,而不与两边的按钮重叠。
           此模型和坐拥式模型相似,但是中间的部分不是把左右按钮坐拥入怀,而是单独占据,且也只占据中间部分。
           这种模型能够实现坐拥式模型的效果,而且能偏左偏右而不和两边按钮重叠。
           但是因为这种情况使用RelativeLayout布局比较好,需要定义ID,稍微麻烦了一点点。 
     方法:主要是RelativeLayout布局
     素材:同上
     layout代码:

  1. <!--这种布局:
  2. 缺点是代码还算简洁,但是比坐拥式要稍微复杂一点
  3. 有点是比坐拥式更强大,更灵活
  4. -->
  5. <?xml version="1.0" encoding="utf-8"?>
  6. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  7.     android:layout_width="fill_parent"
  8.     android:layout_height="wrap_content"
  9.     android:background="@drawable/layout01_bg"
  10.     android:paddingLeft="10dip"
  11.     android:paddingRight="10dip"
  12.     >
  13.     <Button android:id="@+id/left_button"
  14.        android:layout_alignParentLeft="true"
  15.        android:layout_centerVertical="true"
  16.        android:layout_width="wrap_content"
  17.        android:layout_height="wrap_content"
  18.        android:background="@drawable/layout01_tool"
  19.        android:text="返回列表"
  20.        android:padding="8dip"
  21.     />
  22.     <Button android:id="@+id/right_button"
  23.        android:layout_alignParentRight="true"
  24.        android:layout_centerVertical="true"
  25.        android:layout_width="wrap_content"
  26.        android:layout_height="wrap_content"
  27.        android:background="@drawable/layout01_tool"
  28.        android:text="评论"
  29.        android:padding="8dip"
  30.     />
  31.     <!--设置LeftOf和RightOf,可填充中间空余部分-->
  32.     <TextView android:layout_toRightOf="@id/left_button"
  33.        android:layout_toLeftOf="@id/right_button"
  34.        android:layout_centerVertical="true"
  35.        android:gravity="left"
  36.        android:paddingLeft="5dip"
  37.        android:layout_width="fill_parent"
  38.        android:layout_height="wrap_content"
  39.        android:text="资讯>>正文"
  40.        android:textSize="18dip"
  41.        android:textColor="#000000" />
  42.        
  43. </RelativeLayout>
复制代码
  关于这个模型,我补充一点,很多人认为这个用LinearLayout布局,设置两边的控件居左居右,中间的设置layout_gravity想偏左就偏左,想偏右就偏右。
     但是,LinearLayout布局方向为"horizontal" ,layout_gravity是无效的。
模型三: 水平四列双耳互补式
     效果图:
<ignore_js_op> 
<ignore_js_op> 
     说明: 两边是按钮,中间部分被两个控件互补式分割,主要是左边的会随内容填充,但是必须两者内容宽度之和不能大于中间部分。
           这个和双耳式差不多,也说明了,双耳式在保证有空余空间的基础上,可以扩充到4列,5列等多列。
     方法:主要是RelativeLayout布局
     素材:同上
     layout代码:
  1. <!--双耳式在多列情况下的扩展式-->
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="wrap_content"
  6.     android:background="@drawable/layout01_bg"
  7.     android:paddingLeft="10dip"
  8.     android:paddingRight="10dip"
  9.     >
  10.     <Button android:id="@+id/left_button"
  11.        android:layout_alignParentLeft="true"
  12.        android:layout_centerVertical="true"
  13.        android:layout_width="wrap_content"
  14.        android:layout_height="wrap_content"
  15.        android:background="@drawable/layout01_tool"
  16.        android:text="返回列表"
  17.        android:padding="8dip"
  18.     />
  19.     <Button android:id="@+id/right_button"
  20.        android:layout_alignParentRight="true"
  21.        android:layout_centerVertical="true"
  22.        android:layout_width="wrap_content"
  23.        android:layout_height="wrap_content"
  24.        android:background="@drawable/layout01_tool"
  25.        android:text="评论"
  26.        android:padding="8dip"
  27.     />
  28.     <!-- 下面这个宽度是wrap_content,在左边按钮的右边,能够随内容加宽 -->
  29.     <TextView android:id="@+id/center_text_01"
  30.        android:layout_toRightOf="@id/left_button"
  31.        android:layout_centerVertical="true"
  32.        android:gravity="left"
  33.        android:paddingLeft="5dip"
  34.        android:layout_width="wrap_content"
  35.        android:layout_height="wrap_content"
  36.        android:background="#aabbcc"
  37.        android:text="夫妇+小三"
  38.        android:textSize="18dip"
  39.        android:textColor="#000000" />
  40.     <!-- 下面这个宽度是fill_parent,自动填充中间部分的空余空间,分别定义了左右依赖的控件,所以放在最后 -->
  41.     <TextView android:id="@+id/center_text_02"
  42.        android:layout_toRightOf="@id/center_text_01"
  43.        android:layout_toLeftOf="@id/right_button"
  44.        android:layout_centerVertical="true"
  45.        android:gravity="right"
  46.        android:paddingLeft="5dip"
  47.        android:layout_width="fill_parent"
  48.        android:layout_height="wrap_content"
  49.        android:background="#ccaabb"
  50.        android:text="何求"
  51.        android:textSize="18dip"
  52.        android:textColor="#000000" />
  53. </RelativeLayout>
复制代码

模型四:水平多列分摊式(增强版)
     效果图:
<ignore_js_op> 
     说明:几大模块均占所有区域,之间以小小的分割线隔离。
           因为分割线只占很小的部分,所有模块和分割线并不是分摊的,但是模块标题本身占据大头,他们之间是分摊的。
     素材:
<ignore_js_op> 
     方法: 直接用LinearLayout布局,模块均摊,都设置layout_weight="1",分割线不分摊,不设置layout_weight,默认自包裹,不延伸。
     layout代码:

  1. <!--此代码采用动态生成,只要稍加判断,效果一样-->
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="25dip"
  6.     android:background="#ffffff"
  7.     >
  8.     <TextView android:text="首页"
  9.        android:layout_weight="1"
  10.        android:gravity="center"
  11.        android:layout_gravity="center_vertical"
  12.        android:layout_width="wrap_content"
  13.        android:layout_height="wrap_content"
  14.     />
  15.     <ImageView android:gravity="center"
  16.        android:layout_gravity="center_vertical"
  17.        android:layout_width="10dip"
  18.        android:layout_height="wrap_content"
  19.        android:src="@drawable/layout04_split"
  20.     />
  21.     <TextView android:text="资讯"
  22.        android:layout_weight="1"
  23.        android:gravity="center"
  24.        android:layout_gravity="center_vertical"
  25.        android:layout_width="wrap_content"
  26.        android:layout_height="wrap_content"
  27.     />
  28.     <ImageView android:gravity="center"
  29.        android:layout_gravity="center_vertical"
  30.        android:layout_width="10dip"
  31.        android:layout_height="wrap_content"
  32.        android:src="@drawable/layout04_split"/>
  33.     <TextView android:text="博客"
  34.        android:layout_weight="1"
  35.        android:gravity="center"
  36.        android:layout_gravity="center_vertical"
  37.        android:layout_width="wrap_content"
  38.        android:layout_height="wrap_content"
  39.     />
  40.     <ImageView android:gravity="center"
  41.        android:layout_gravity="center_vertical"
  42.        android:layout_width="10dip"
  43.        android:layout_height="wrap_content"
  44.        android:src="@drawable/layout04_split"/>
  45.     <TextView android:text="图片"
  46.        android:layout_weight="1"
  47.        android:gravity="center"
  48.        android:layout_gravity="center_vertical"
  49.        android:layout_width="wrap_content"
  50.        android:layout_height="wrap_content"
  51.     />
  52.     <ImageView android:gravity="center"
  53.        android:layout_gravity="center_vertical"
  54.        android:layout_width="10dip"
  55.        android:layout_height="wrap_content"
  56.        android:src="@drawable/layout04_split"/>
  57.     <TextView android:text="论坛"
  58.        android:layout_weight="1"
  59.        android:gravity="center"
  60.        android:layout_gravity="center_vertical"
  61.        android:layout_width="wrap_content"
  62.        android:layout_height="wrap_content"
  63.     />
  64. </LinearLayout>
复制代码

模型五:垂直三行天地式
     效果图:
<ignore_js_op> 
     说明:类似于水平三列双耳式,上下固定,中间自适应(自填充),不多说。
     方法:同水平三列双耳式,使用RelativeLayout布局
     layout代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent">
  5.     <TextView android:id="@+id/top_text"
  6.             android:layout_alignParentTop="true"
  7.        android:layout_width="fill_parent"
  8.        android:layout_height="wrap_content"
  9.        android:gravity="center" 
  10.        android:text="上海车展"
  11.        android:textColor="#ffffff"/>
  12.     <LinearLayout android:id="@+id/bottom_linear"
  13.        android:layout_width="fill_parent"
  14.        android:layout_height="wrap_content"
  15.        android:gravity="center"
  16.             android:layout_alignParentBottom="true"
  17.        android:background="#123456" 
  18.        android:orientation="horizontal">
  19.        <Button  android:layout_width="wrap_content"
  20.               android:layout_height="wrap_content"
  21.               android:text="上一张"/>
  22.        <Button  android:layout_width="wrap_content"
  23.               android:layout_height="wrap_content"
  24.               android:layout_gravity="center"
  25.               android:text="下一张"/>
  26.     </LinearLayout>
  27.     <!-- 下面部分是中间主体部分,我特意用LinearLayout包裹起来,表示这里面可以填充其他任何组合的控件 -->
  28.     <LinearLayout android:id="@+id/center_linear"
  29.             android:layout_below="@id/top_text"
  30.             android:layout_above="@id/bottom_linear"
  31.        android:layout_width="fill_parent"
  32.        android:layout_height="fill_parent"
  33.        android:background="#ffffff"
  34.        android:gravity="center">
  35.        <ImageView android:layout_width="fill_parent"
  36.        android:layout_height="fill_parent"
  37.        android:src="@drawable/shanhai" />
  38.     </LinearLayout>
  39. </RelativeLayout>
复制代码

模型六:垂直三行弹簧式
     效果图:
<ignore_js_op> 
     说明:这种模型很简单,类似于弹簧,最下面的一行能伸能屈,中间部分随内容固定。
     方法:类似于模式五。
     layout代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent">
  5.     <!-- 顶部 -->
  6.     <TextView android:id="@+id/top_text"
  7.             android:layout_alignParentTop="true"
  8.        android:layout_width="fill_parent"
  9.        android:layout_height="wrap_content"
  10.        android:gravity="center" 
  11.        android:text="上海车展"
  12.        android:textColor="#ffffff"/>
  13.     <!-- 顶部的下面是中间导航部分 -->
  14.     <LinearLayout android:id="@+id/center_linear"
  15.        android:layout_below="@id/top_text"
  16.        android:layout_width="fill_parent"
  17.        android:layout_height="wrap_content"
  18.        android:gravity="center"
  19.        android:background="#123456" 
  20.        android:orientation="horizontal">
  21.        <Button  android:layout_width="wrap_content"
  22.               android:layout_height="wrap_content"
  23.               android:text="上一张"/>
  24.        <Button  android:layout_width="wrap_content"
  25.               android:layout_height="wrap_content"
  26.               android:layout_gravity="center"
  27.               android:text="下一张"/>
  28.     </LinearLayout>
  29.     <!-- 最后部分填充剩下的区域 -->
  30.     <LinearLayout android:id="@+id/bottom_linear"
  31.        android:layout_below="@id/center_linear"
  32.        android:layout_width="fill_parent"
  33.        android:layout_height="fill_parent"
  34.        android:background="#ffffff"
  35.        android:gravity="center"
  36.        android:layout_alignParentBottom="true">
  37.        <ImageView android:layout_width="fill_parent"
  38.        android:layout_height="fill_parent"
  39.        android:src="@drawable/shanhai" />
  40.     </LinearLayout>
  41. </RelativeLayout>
复制代码
   初探之下,列举了简单的6中模型,除此之外,本人发现受限于手机屏幕大小的限制和高宽的固定,有很多web的布局其实在手机上的实现是很难的。
     希望看了文章的人,能支持一下,有什么好的经典的布局,给我留言,一起探讨,一起分享。
     最后公布一个大概布局的三字文:
上中下,左中右,多行列,用相对。
线性局,紧凑排,无方向,可居中。
帧布局,定位准,相关弱,代码少。

关键词:布局  Android  App 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
最新图文
本文评论   查看全部评论 (1)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 1 楼
* 匿名 发表于 2016/12/24 19:33:07
http://www.blue1000.com/bkhtml/c149/2014-03/71514.htm 1年级作文图片 http://www.135995.com/details/zs1101.html 我闯祸了 作文 http://www.135995.com/details/zs1102.html