Android开发之详解五大布局

为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是:

LinearLayout(线性布局)

TableLayout(表格布局)

RelativeLayout(相对布局)

AbsoluteLayout(绝对布局)

FrameLayout(框架布局)

利用这五种布局,可以在屏幕上将控件随心所欲的摆放,而且控件的大小和位置会随着屏幕大小的变化作出相应的调整。下面是这五个布局在View的继承体系中的关系:
<ignore_js_op>

一,LinearLayout(线性布局)

在一个方向上(垂直或水平)对齐所有子元素
一个垂直列表每行将只有一个子元素(无论它们有多宽)
一个水平列表只是一列的高度(最高子元素的高度来填充)

下面是一个简单的线性布局的例子:
<ignore_js_op>

  1. 01 <?xml version="1.0" encoding="utf-8"?>
  2. 02 <LinearLayout
  3. 03 xmlns:android="http://schemas.android.com/apk/res/android"
  4. 04 android:layout_width="match_parent"
  5. 05 android:layout_height="match_parent" android:orientation="vertical">
  6. 06 <EditText android:text="EditText"
  7. 07
  8. 08 android:id="@+id/editText1"
  9. 09
  10. 10 android:layout_height="wrap_content"
  11. 11
  12. 12 android:layout_width="fill_parent">
  13. 13
  14. 14 </EditText>
  15. 15 <LinearLayout android:id="@+id/linearLayout1"
  16. 16
  17. 17 android:layout_height="fill_parent"
  18. 18
  19. 19 android:layout_width="fill_parent"
  20. 20
  21. 21 android:gravity="right">
  22. 22 <Button android:id="@+id/button2"
  23. 23
  24. 24 android:text="Button"
  25. 25
  26. 26 android:layout_width="wrap_content"
  27. 27
  28. 28 android:layout_height="wrap_content"></Button>
  29. 29 <Button android:text="Button"
  30. 30
  31. 31 android:id="@+id/button1"
  32. 32
  33. 33 android:layout_width="wrap_content"
  34. 34
  35. 35 android:layout_height="wrap_content"></Button>
  36. 36 </LinearLayout>
  37. 37 </LinearLayout>

复制代码

最外层布局为垂直线性布局,宽度为整个屏幕(fill_parent),高度为刚好适合子控件(wrap_content)。然后依次添加一个EditText,一个水平布局的LinearLayout,在这个线性布局里面,摆放两个Button,该线性布局的gravity属性设置为”right”,所以里面的两个Button靠右显示。

二,TableLayout(表格布局)

把子元素放入到行与列中
不显示行、列或是单元格边界线
单元格不能横跨行,如HTML中一样
表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。

android:layout_colum官方解释:The index of the column in which this child should be,也即是设置该控件在TableRow中所处的列。
android:layout_span官方解释:Defines how many columns this child should span,也即是设置该控件所跨越的列数。

android:collapseColumns官方解释:The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开。

android:stretchColumns官方解释:The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是设置指定的列为可伸展的列,可伸展的列会尽量伸展以填满所有可用的空间,若有多列需要设置为可伸展,请用逗号将需要伸展的列序号隔开。

android:shrinkColumns官方解释:The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 设置指定的列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时,会纵向延伸空间。当需要设置多列为可收缩时,将列序号用逗号隔开。

下面用一个例子简单说明TableLayout的用法:
<ignore_js_op>

  1. 01 <?xml version="1.0" encoding="utf-8"?>
  2. 02 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. 03 android:layout_width="fill_parent"
  4. 04 android:layout_height="fill_parent"
  5. 05 android:stretchColumns="1">
  6. 06 <TableRow>
  7. 07 <TextView
  8. 08 android:layout_column="1"
  9. 09 android:padding="3dip" android:text="Row1"/>
  10. 10 <TextView
  11. 11 android:text="1"
  12. 12 android:gravity="right"
  13. 13 android:padding="3dip" />
  14. 14 </TableRow>
  15. 15 <View
  16. 16 android:layout_height="2dip"
  17. 17 android:background="#FF909090" />
  18. 18 <TableRow>
  19. 19 <TextView
  20. 20 android:text="*"
  21. 21 android:padding="3dip" />
  22. 22 <TextView
  23. 23 android:text="Row12"
  24. 24 android:padding="3dip" />
  25. 25 <TextView
  26. 26 android:text="2"
  27. 27 android:gravity="right"
  28. 28 android:padding="3dip" />
  29. 29 </TableRow>
  30. 30 <View
  31. 31 android:layout_height="2dip"
  32. 32 android:background="#FF909090" />
  33. 33 <TableRow>
  34. 34 <TextView
  35. 35 android:layout_column="1"
  36. 36 android:text="Row13"
  37. 37 android:padding="3dip" />
  38. 38 </TableRow>
  39. 39 </TableLayout>

复制代码

三、RelativeLayout(相对布局)

相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其它子控件,但是被参照的控件必须要在参照它的控件之前定义。下面是一个简单的例子:
<ignore_js_op>

  1. 01 <?xml version="1.0" encoding="utf-8"?>
  2. 02 <?xml version="1.0" encoding="utf-8"?>
  3. 03 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4. 04 android:layout_width="fill_parent"
  5. 05 android:layout_height="fill_parent"
  6. 06 >
  7. 07 <AnalogClock
  8. 08 android:id="@+id/aclock"
  9. 09 android:layout_width="wrap_content"
  10. 10 android:layout_height="wrap_content"
  11. 11 android:layout_centerInParent="true" />
  12. 12 <DigitalClock
  13. 13 android:id="@+id/dclock"
  14. 14 android:layout_width="wrap_content"
  15. 15 android:layout_height="wrap_content"
  16. 16 android:layout_below="@id/aclock"
  17. 17 android:layout_alignLeft="@id/aclock"
  18. 18 android:layout_marginLeft="40px" />
  19. 19 <TextView
  20. 20 android:layout_width="wrap_content"
  21. 21 android:layout_height="wrap_content"
  22. 22 android:text="当前时间:"
  23. 23 android:layout_toLeftOf="@id/dclock"
  24. 24 android:layout_alignTop="@id/aclock"/>
  25. 25 </RelativeLayout>

复制代码

四、AbsoluteLayout(绝对布局)

绝对布局的子控件需要指定相对于此坐标布局的横纵坐标值,否则将会像框架布局那样被排在左上角。手机应用需要适应不同的屏幕大小,而这种布局模型不能自适应屏幕尺寸大小,所以应用的相对较少。下面以一个例子简单说明绝对布局:
<ignore_js_op>

  1. 01 <?xml version="1.0" encoding="utf-8"?>
  2. 02 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. 03 android:layout_width="fill_parent"
  4. 04 android:layout_height="fill_parent"
  5. 05 >
  6. 06 <TextView
  7. 07 android:layout_width="wrap_content"
  8. 08 android:layout_height="wrap_content"
  9. 09 android:layout_x="10px"
  10. 10 android:layout_y="10px" android:text="Textview"/>
  11. 11 <TextView
  12. 12 android:layout_width="wrap_content"
  13. 13 android:layout_height="wrap_content"
  14. 14 android:layout_x="30px"
  15. 15 android:layout_y="30px" android:text="Textview"/>
  16. 16 <TextView
  17. 17 android:layout_width="wrap_content"
  18. 18 android:layout_height="wrap_content"
  19. 19 android:layout_x="50px"
  20. 20 android:layout_y="50px" android:text="Textview"/>
  21. 21 </AbsoluteLayout>

复制代码

五、FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。下面举一个简单的例子

<ignore_js_op>

  1. 01 <?xml version="1.0" encoding="utf-8"?>
  2. 02 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. 03 android:layout_width="fill_parent" android:layout_height="fill_parent">
  4. 04 <LinearLayout android:id="@+id/linearLayout1"
  5. 05 android:layout_height="match_parent"
  6. 06 android:layout_width="match_parent">
  7. 07 <Button android:text="Button"
  8. 08 android:id="@+id/button1"
  9. 09 android:layout_width="wrap_content"
  10. 10 android:layout_height="wrap_content"></Button>
  11. 11 </LinearLayout>
  12. 12 <LinearLayout android:layout_width="match_parent"
  13. 13 android:id="@+id/linearLayout3"
  14. 14 android:layout_height="match_parent"
  15. 15 android:gravity="bottom|right">
  16. 16 <Button android:text="Button"
  17. 17 android:id="@+id/button3"
  18. 18 android:layout_width="wrap_content"
  19. 19 android:layout_height="wrap_content"></Button>
  20. 20 </LinearLayout>
  21. 21 <LinearLayout android:layout_height="match_parent"
  22. 22 android:id="@+id/linearLayout2"
  23. 23 android:layout_width="match_parent"
  24. 24 android:gravity="right">
  25. 25 <Button android:text="Button"
  26. 26 android:id="@+id/button2"
  27. 27 android:layout_width="wrap_content"
  28. 28 android:layout_height="wrap_content"></Button>
  29. 29 </LinearLayout>
  30. 30 <LinearLayout android:layout_width="match_parent"
  31. 31 android:id="@+id/LinearLayout01"
  32. 32 android:layout_height="match_parent"
  33. 33 android:gravity="bottom|left">
  34. 34 <Button android:id="@+id/Button01"
  35. 35 android:text="Button"
  36. 36 android:layout_width="wrap_content"
  37. 37 android:layout_height="wrap_content"></Button>
  38. 38 </LinearLayout>
  39. 39 </FrameLayout>

复制代码

下面介绍一下RelativeLayout用到的一些重要的属性:

第一类:属性值为true或false
android:layout_centerHrizontal                                           水平居中
android:layout_centerVertical                                            垂直居中
android:layout_centerInparent                                           相对于父元素完全居中
android:layout_alignParentBottom                     贴紧父元素的下边缘
android:layout_alignParentLeft                        贴紧父元素的左边缘
android:layout_alignParentRight                       贴紧父元素的右边缘
android:layout_alignParentTop                        贴紧父元素的上边缘
android:layout_alignWithParentIfMissing               如果对应的兄弟元素找不到的话就以父元素做参照物

第二类:属性值必须为id的引用名“@id/id-name”
android:layout_below                          在某元素的下方
android:layout_above                          在某元素的的上方
android:layout_toLeftOf                       在某元素的左边
android:layout_toRightOf                     在某元素的右边

android:layout_alignTop                      本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft                      本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom                 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight                    本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom              离某元素底边缘的距离
android:layout_marginLeft                   离某元素左边缘的距离
android:layout_marginRight                 离某元素右边缘的距离
android:layout_marginTop                   离某元素上边缘的距离

摘自:http://bbs.chinaunix.net/thread-3654213-1-1.html

时间: 10-05

Android开发之详解五大布局的相关文章

CSDN Android客户端开发(二):详解如何基于Java用Jsoup爬虫HTML数据

本文参考链接详细介绍如何使用Jsoup包抓取HTML数据,是一个纯java工程,并将其打包成jar包.希望了解如何用java语言爬虫网页的可以看下. 杂家前文就又介绍用HTTP访问百度主页得到html的string字符串,但html的文本数据如果不经过处理就是个文本字符串没有任何效果的.所谓的浏览器就是负责将文本的html"翻译"成看到的界面.在前文有介绍,这个csdn的客户端app分首页.业界.移动.研发.程序员.云计算五大类.以业界为例,http://news.csdn.net/ 

Android 四大组件 详解

[置顶] Android四大组件详解 分类: Android四大组件2013-02-09 16:23 19411人阅读 评论(13) 收藏 举报 Android开发 注:本文主要来自网易的一个博主的文章,经过阅读,总结,故留下文章在此 Android四大基本组件介绍与生命周期 Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中,一个

Android平台调用WebService详解

上篇文章已经对Web Service及其相关知识进行了介绍(Android开发之WebService介绍 ),相信有的朋友已经忍耐不住想试试在Android应用中调用Web Service.本文将通过一个简单的示例讲解和演示Android平台的Web Service开发. Ksoap2-android简介       在Android平台调用Web Service需要依赖于第三方类库ksoap2,它是一个SOAP Web service客户端开发包,主要用于资源受限制的Java环境如Applet

Cocos2d-x 3.X手游开发实例详解

Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰然网创始人杨雍力荐) 于浩洋 著   ISBN 978-7-121-23998-4 2014年9月出版 定价:59.00元 356页 16开 编辑推荐 以Cocos2d-x V3.0为框架全面讲解手游开发的知识和方法 以热门游戏2048.卡牌为例,完整再现手游的开发过程 Cocos2d-x作者之一林

android屏幕适配详解

android屏幕适配详解 官方地址:http://developer.android.com/guide/practices/screens_support.html 一.关于布局适配建议 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如果是纯色背景,尽量使用android的shape 自定义. 5.如果需要在特定分辨率下适配,可以在res目录上新建layout

《HTML 5网页开发实例详解》目录

第一篇  从宏观上认识HTML 5 讲述了HTML 5引发的Web革命.HTML 5的整体特性.HTML 5相关概念和框架和开发环境搭建. 第1章 HTML 5引发的Web革命 1.1  你是不是真的了解HTML 5 1.1.1  通过W3C认识HTML 5的发展史 1.1.2  HTML 5.HTML4.XHTML的区别 1.1.3  什么人应该学HTML 5 1.1.4  一个图告诉你如何学习HTML 5 1.2  浏览器之争 1.2.1  说说这些常见的浏览器 1.2.2  浏览器的兼容烦

Android进阶——Preference详解之Preference系的基本应用(三)

引言 前面一篇文章Android进阶--Preference详解之Preference系的基本应用和管理(二)介绍了二级Preference的使用和特点,接下来进入系统给我提供的底级Preference的使用CheckBox选择项CheckBoxPreference.EditText编辑对话框EditTextPreference.列表选择ListPreference.多项选择MultiSelectListPreference. 开关选择SwitchPreference的应用和管理.以期大家能在学

Android SlidingMenu 使用详解

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/36677279 很多APP都有侧滑菜单的功能,部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能,如果对SlidingMenu 还不是很了解的童鞋,可以参考下本篇博客.将侧滑菜单引入项目的方式很多中,本博客先通过例子介绍各种引入方式,然后给大家展示个实例:主布局ViewPager,左右各一个侧滑菜单的用法,差不多已经能满足大部分应用的需求

Android中Context详解 ---- 你所不知道的Context

转载至 :http://blog.csdn.net/qinjuning 前言:本文是我读<Android内核剖析>第7章 后形成的读书笔记 ,在此向欲了解Android框架的书籍推荐此书. 大家好,  今天给大家介绍下我们在应用开发中最熟悉而陌生的朋友-----Context类 ,说它熟悉,是应为我们在开发中 时刻的在与它打交道,例如:Service.BroadcastReceiver.Activity等都会利用到Context的相关方法 : 说它陌生,完全是 因为我们真正的不懂Context