Android中常用的5大布局详述
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。
所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类
- 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。
- 帧布局(FrameLayout):组件从屏幕左上方布局组件。
- 表格布局(TableLayout):按照行列方式布局组件。
- 相对布局(RelativeLayout):相对其它组件的布局方式。
- 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件
1.
LinearLayout 线性布局
线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直(vertical)和水平(horizontal)两种。
常用的属性:
android:orientation:可以设置布局的方向
android:gravity:用来控制组件的对齐方式
layout_weight:控制各个组件在布局中的相对大小
(1)android:orientation="vertical" 表示竖直方式对齐
(2)android:orientation="horizontal"表示水平方式对齐
(3)android:layout_width="fill_parent"定 义当前视图在屏幕上可以消费的宽 度,fill_parent即填充整个屏幕。
(4)android:layout_height="wrap_content": 随着文字栏位的不同 而 改变这个视图的宽度或者高度。有点自动设置框度或者高度的意思
layout_weight默认值是零,用于给一个线性布局中的诸多视图的重要度赋值。比如说我们在 水平方向上有一个文本标签和两个文本编辑元素,该文本标签并无指定layout_weight值,所以它将占据需要提供的最少空间 ;如果两个文本编辑元素每一个的layout_weight值都设置为1,
则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1,而 第二个的设置为2,则剩余空间的三分之一分给第二个,三分之二分给第一个(正比划分)。(仅在LinearLayou中有效)。
首看看一个样例 使用 weight:
xml布局:
- <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="3" >
- <TextView
- android:id="@+id/textView1"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@android:color/black"
- android:text="TextView" />
- <TextView
- android:id="@+id/textView2"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@android:color/holo_blue_light"
- android:text="TextView" />
- <TextView
- android:id="@+id/textView3"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@android:color/holo_green_dark"
- android:text="TextView" />
- </LinearLayout>
复杂一点的样例,使用gravity:
XML布局文件:
- <span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:background="@android:color/black">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="@android:color/white"
- android:orientation="vertical" >
- <EditText
- android:id="@+id/editText1"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- >
- </EditText>
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:gravity="right"
- >
- <!-- android:gravity="right"表示LinearLayout内部组件向右对齐 -->
- <Button
- android:id="@+id/button1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="确 认" />
- <Button
- android:id="@+id/button2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="取消" />
- </LinearLayout>
- </LinearLayout></span>
2.FrameLayout(框架布局)
框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。
作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域,
当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角;
帧布局的大小由子控件中最大的子控件决定,
如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了!
当然我们也可以为组件添加layout_gravity属性,从而制定组件的对其方式
前景图像:
永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片
常用属性:
android:foreground:设置该帧布局容器的前景图像
android:foregroundGravity:设置前景图像显示的位置
实例:xml布局:
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <TextView android:id="@+id/textview1"
- android:layout_width="300dp"
- android:layout_height="300dp"
- android:layout_gravity="center"
- android:background="#FF33ffff" />
- <TextView android:id="@+id/textview2"
- android:layout_width="240dp"
- android:layout_height="240dp"
- android:layout_gravity="center"
- android:background="#FF33ccff" />
- <TextView android:id="@+id/textview3"
- android:layout_width="180dp"
- android:layout_height="180dp"
- android:layout_gravity="center"
- android:background="#FF3399ff" />
- <TextView android:id="@+id/textview4"
- android:layout_width="120dp"
- android:layout_height="120dp"
- android:layout_gravity="center"
- android:background="#FF3366ff" />
- <TextView android:id="@+id/textview5"
- android:layout_width="60dp"
- android:layout_height="60dp"
- android:layout_gravity="center"
- android:background="#FF3300ff" />
- </FrameLayout>
效果如下:
3.TableLayout(表格布局)
把子元素放入到行与列中 不显示行、列或是单元格边界线 单元格不能横跨行,如HTML中一样 表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。
适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。
TableRow是LinearLayout的子类,ablelLayout并不需要明确地声明包含多少行、多少列,而是通过TableRow,以及其他组件来控制表格的行数和列数, TableRow也是容器,因此可以向TableRow里面添加其他组件,没添加一个组件该表格就增加一列。如果想TableLayout里面添加组件,那么该组件就直接占用一行。在表格布局中,列的宽度由该列中最宽的单元格决定,整个表格布局的宽度取决于父容器的宽度(默认是占满父容器本身)。
TableLayout继承了LinearLayout,因此他完全可以支持LinearLayout所支持的全部XML属性,除此之外TableLayout还支持以下属性:
XML属性 相关用法 说明
1. andriod:collapseColumns setColumnsCollapsed(int ,boolean) 设置需要隐藏的列的序列号,多个用逗号隔开
2.android:shrinkColumns setShrinkAllColumns(boolean) 设置被收缩的列的序列号,多个用逗号隔开
3.android:stretchColimns setSretchAllColumnds(boolean) 设置允许被拉伸的列的序列号,多个用逗号隔开
看一下实例会比较好理解:
XML布局文件
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<Button android:text="Button1"/>
<Button android:text="Button2"/>
<Button android:text="Button3"/>
</TableRow>
<TableRow>
<Button android:text="Button4"/>
<Button android:text="Button5"/>
<Button android:text="Button6"/>
</TableRow>
<TableRow>
<Button android:text="Button7"/>
<Button android:text="Button8"/>
<Button android:text="Button9"/>
</TableRow>
</TableLayout>
(1)shrinkColumns属性:以0为序,当TableRow里面的控件布满布局时,指定列自动延伸以填充可用部分;当TableRow里面的控件还没有布满布局时,shrinkColumns不起作用。
例:设置 shrinkColumns="2"当第二列过长时会自动延伸填充可用部分(如果不超长,shrinkColumns不起作用)
在布局文件中添加shrinkColumns属性代码:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="2"
>
<TableRow>
<Button android:text="Button1"/>
<Button android:text="Button2"/>
<Button android:text="Button333333333333333333333"/>
</TableRow>
<TableRow>
<Button android:text="Button4"/>
<Button android:text="Button5"/>
<Button android:text="Button6"/>
</TableRow>
<TableRow>
<Button android:text="Button7"/>
<Button android:text="Button8"/>
<Button android:text="Button9"/>
</TableRow>
</TableLayout>
效果如下:
(2)strechColumns属性,以第0行为序,指定列对空白部分进行填充。
在布局中添加stretchColumns属性代码如下:
- <?xml version="1.0" encoding="utf-8"?>
- <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:stretchColumns="2"
- >
- <TableRow>
- <Button android:text="Button1"/>
- <Button android:text="Button2"/>
- <Button android:text="Button3"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button4"/>
- <Button android:text="Button5"/>
- <Button android:text="Button6"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button7"/>
- <Button android:text="Button8"/>
- <Button android:text="Button9"/>
- </TableRow>
- </TableLayout>
效果如下:
(3)collapseColumns属性:以0行为序,隐藏指定的列
在布局中添加android:collapseColumns="2"指定第3列隐藏:
- <?xml version="1.0" encoding="utf-8"?>
- <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:collapseColumns="2"
- >
- <TableRow>
- <Button android:text="Button1"/>
- <Button android:text="Button2"/>
- <Button android:text="Button3"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button4"/>
- <Button android:text="Button5"/>
- <Button android:text="Button6"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button7"/>
- <Button android:text="Button8"/>
- <Button android:text="Button9"/>
- </TableRow>
- </TableLayout>
效果如下:
(4)layout_column属性:以0行为序,设置组件显示指定列
(5)layout_span属性:以第0行为序,设置组件显示占用的列数。
布局代码如下:
- <?xml version="1.0" encoding="utf-8"?>
- <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <TableRow>
- <Button android:text="Button1"
- android:layout_span="3"/>
- <Button android:text="Button2"/>
- <Button android:text="Button3"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button4"
- android:layout_column="2"/>
- <Button android:text="Button5"
- android:layout_column="0"/>
- <Button android:text="Button6"/>
- </TableRow>
- <TableRow>
- <Button android:text="Button7"/>
- <Button android:text="Button8"/>
- <Button android:text="Button9"/>
- </TableRow>
- </TableLayout>
效果如下:
从效果图可知:Button1被设置了占用了3列,Button4被设置显示在地3列,但代码指定Button5显示在第一列,但没有按照设定显示,这样可知TableRow在表格布局中,一行里的组件都会自动放在前一组件的右侧,依次排列,只要确定了所在列,其后面的组件就无法在进行设置位置。
4.RelativeLayout(相对布局)
RelativeLayout继承于android.widget.ViewGroup,其按照子元素之间的位置关系完成布局的,相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其它子控件,作为Android系统五大布局中最灵活也是最常用的一种布局方式,非常适合于一些比较复杂的界面设计。
注意:在引用其他子元素之前,引用的ID必须已经存在,否则将出现异常。
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 本元素的右边缘和某元素的的右边缘对齐
android:layout_alignBaseline
本元素与和某元素的基准线对齐
基线解释:书写英语单词时为了规范书写会设有四条线,从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐。
图中绿色的水平线就是基线 TextView2 基线和 TextView1对齐,TextView2设置属性
android:layout_alignBaseline="@id/textView1"
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 效果:
第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
例:xml 布局如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
tools:context=".MainActivity" >
<EditText
android:id="@+id/editText1"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_marginTop="40dp"
android:background="@android:color/white"
>
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/editText1"
android:layout_below="@+id/editText1"
android:layout_marginRight="78dp"
android:layout_marginTop="19dp"
android:text="确定" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_alignParentRight="true"
android:text="取消" />
</RelativeLayout>
效果如下:
(1),EditText 控件 位于父控件的上部 使用
layout_alignParentTop;
(1),EditText 控件 相对父控件水平居中使用layout_centerHorizontal;
(1),EditText 控件距离上边框 40dp 使用layout_marginTop;
(2),button1控件右边缘和EditText控件的右边缘对齐使用
layout_alignRight;
(2),button1控件 在EditText控件的下方使用layout_below;
(2),button1控件 距离右边框78dp 使用layout_marginRight;
(2),button1控件
距离上边控件 19dp 使用 layout_marginTop;
(3),button2控件与button2控件基线对齐使用layout_alignBaseline;
(3),button2控件下边缘和button2控件的下边缘对齐使用layout_alignBottom;
(3),button2控件贴紧父元素的右边缘layout_alignParentRight;
5.AbsoluteLayout(绝对布局)
绝对布局中将所有的子元素通过设置android:layout_x 和 android:layout_y属性,将子元素的坐标位置固定下来,即坐标(android:layout_x, android:layout_y) ,layout_x用来表示横坐标,layout_y用来表示纵坐标。屏幕左上角为坐标(0,0),横向往右为正方,纵向往下为正方。实际应用中,这种布局用的比较少,因为Android终端一般机型比较多,各自的屏幕大小。分辨率等可能都不一样,如果用绝对布局,可能导致在有的终端上显示不全等。
在Android2.0 API文档中标明该类已经过期,可以使用FrameLayout或者RelativeLayout来代替。
例:
XML布局文件:
- <?xml version = "1.0" encoding = "utf-8"?>
- <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@android:color/black"
- >
- <TextView
- android:id="@+id/lable"
- android:layout_width="200dp"
- android:layout_height="wrap_content"
- android:textSize="30sp"
- android:layout_x="30dp"
- android:layout_y="50dp"
- android:textColor="@android:color/white"
- android:background="@android:color/holo_orange_dark"
- android:text="我是绝对布局" />
- </AbsoluteLayout>
除上面讲过之外常用的几个布局的属性:
(1)layout_margin
用于设置控件边缘相对于父控件的边距
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom
(2) layout_padding
用于设置控件内容相对于控件边缘的边距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom
(3) layout_width/height
用于设置控件的高度和宽度
wrap_content 内容包裹,表示这个控件的里面文字大小填充
fill_parent 跟随父窗口
match_parent
(4) gravity
用于设置View组件里面内容的对齐方式
top bottom left right center等
(5) android:layout_gravity
layout_gravity是用来设置该view相对与父view
的位置
top bottom left right center等
Android中常用的5大布局详述的更多相关文章
- Android中常用布局单位
Android在UI布局时经常用到一些单位,对单位混用直接会影响UI的显示,要想正确的在布局中使用每种单位就必须先真正的熟悉它. UI显示效果的影响因素:屏幕尺寸.屏幕密度.分辨率:而android手 ...
- Android中常用的布局
一般分为5大类. Android中所有的空间第一字母都是大写 1.线性布局 LinearLayout 2.相对布局 RelativeLayout 3.帧布局--分层显示 FrameLayout 4. ...
- android中常用的布局管理器
Android中的几种常用的布局,主要介绍内容有: View视图 RelativeLayout 相对布局管理器 LinearLayout 线性布局管理器 FrameLayout ...
- Android 中常用的布局
一.线性布局----LinearLayout horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...
- Android中常用控件及属性
在之前的博客为大家带来了很多关于Android和jsp的介绍,本篇将为大家带来,关于Andriod中常用控件及属性的使用方法,目的方便大家遗忘时,及时复习参考.好了废话不多讲,现在开始我们本篇内容的介 ...
- JAVA、android中常用的一些jar包的作用
正文: 这里主要介绍的是hibernate使用到的.jar Hibernate一共包括了23个jar包,令人眼花缭乱.本文将详细讲解Hibernate每个jar包的作用,便于你在应用中根据自己的需要进 ...
- Android 中的AlertDialog使用自定义布局
Android使用指定的View开发弹窗功能 Android开发中进程会使用到我们的AlertDialog,但是比较可惜的是我们的Android原生的AlertDialog的效果又比较的简陋,这个时候 ...
- android中常用的弹出提示框
转自:http://blog.csdn.net/centralperk/article/details/7493731 我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的 ...
- android中常用的布局管理器(二)
接上篇博客 (3)LinearLayout 线性布局管理器 线性布局管理器是将放入其中的组件按照垂直或水平方向来布局,每一行或每一列只能放一个组件,并且不会换行,当组件排列到窗体的边缘后,后面 ...
随机推荐
- 程序员书单_java专项进阶篇
JDBC API数据库编程实作教材 http://download.csdn.net/detail/shenzhq1980/9145715 Java事务设计模式 http://download.csd ...
- Neutron分析(7)—— neutron-l3-agent HA solutions
1. keepalived vrrp/conntrackd High availability features will be implemented as extensions or driver ...
- matlab 画三维图函数
matlab三维绘图 http://blog.sina.com.cn/s/blog_6d5ffd0d0100lyah.html Matlab绘图系列之高级绘图 http://blog.163.com/ ...
- 剑指offer系列21--二叉搜索树的后续遍历序列
* 21[题目]输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. * 如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. * [注]二叉搜索树特点:左子树比根结 ...
- 在Huawei USG2100 上配置通过Huawei VPN客户端的接入
USG2100 设置 一.本地策略 中允许 Untrust 对 L2TP 的访问: 二.勾选 VPN-->L2TP 启用: 三.设置参数: 1.组类型选择LNS,本端隧道名称LNS,对端隧道名称 ...
- 【转】图片IMG标记的alt属性和title属性的使用
alt text 替 换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明.这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器 ...
- DEBUG模式下屏蔽某些烦人的动态日志信息
以上就是控制台循环打印的日志信息,总是会刷屏干扰到那些有用的日志信息,所以要把它们屏蔽掉,虽然如果将log级别调成info级别可以不显示了,但是那样的话,别的有用的日志信息就无法显示了. 要有针对性的 ...
- D触发器
普通的电路,以及常规的逻辑门都有一个共性,那就是输出直接依赖于输入,当输入消失的时候,输入也跟着不存在了.触发器不同,当它触发的时候,输出会发生变化.但是,当输入撤销之后,输出依然能够维持. 这就是说 ...
- studio adb连接不上手机 ADB server didn't ACK
问题描述:在eclipse的Logcat出现错误 [2014-01-08 14:00:07 - adb] ADB server didn't ACK [2014-01-08 14:00:07 - ad ...
- 转 -android:程序无响应,你该如何定位问题?
如果MainThread长时间无响应,系统会提示“XXX无响应”,然后用户会关闭.那么,如何定位问题呢?无响应并不像Crash,它抓取不到异常日志,通常我们需要调试,才能定位问题.如何调试呢? 1.在 ...