再解释其中一些属性的作用:
=>>layout_weight,默认为零,其属性表示当前当前还有多大视图就占据多大视图;如果其值高于零,则表示将父视图中的可用的空间进行分割,分割的大小视当前屏幕整体布局的Layout_weight值与每个组件Layout_weight值占用比例来定。
=>>grivity:每个组件默认其值为左上角对齐,其属性可以调整组件对齐方式比如向左、向右或者居中对齐等。
=>>padding:边距的填充,也称内边距。其边距属性有:
android:paddingTop,设置上边距
android:paddingBottom,设置下边距
android:paddingLeft,设置左边距
android:paddingRight,设置右边距
android:padding则表示周围四方向各内边距统一调整。
边距属性值为具体数字
=>>layout_margin,外边距,其上下左右属性为:
android:layout_marginTop,设置上边距
android:layout_ marginBottom,设置下边距
android:layout_ marginLeft,设置左边距
android:layout_ marginRight,设置右边距
android:layout_margin则表示设置四方向边距统一调整
这里说明一下padding与layout_margin的区别:
padding内边距指的是当前布局与包含的组件之间的边距
layout_margin外边距指的是与其他组件之间的边距。
呼呼,挺多内容的,接下来是RelativeLayout(相对布局)
RelativeLayout(相对布局)是除线性布局之外最常用的,它相对于线性布局来说比较灵活,在进行组件布局的时候用线性布局往往需要进行布局嵌套,而相对布局就不会那么麻烦,每个组件都可以指定与其它组件或父组件的位置,只是必须通过ID来进行指定。
创建项目:Layout_02(相对布局)
项目运行效果:
从项目运行结果可以看到:Button1在界面左上角,Button2在Button1下面,Button3在Button2下面并且对齐Button2右边缘,Button4在Button3下面并且对齐父组件右边缘对齐,Button5在Button4下面并且在水平方向的中央位置。
布局文件代码:
main.xml
[html] view plain copy print ?
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"
>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button1"
android:id = "@+id/btn1"
/>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button2"
android:id = "@+id/btn2"
android:layout_below = "@id/btn1"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button3"
android:id = "@+id/btn3"
android:layout_below = "@id/btn2"
android:layout_alignRight = "@id/btn2"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button4"
android:id = "@+id/btn4"
android:layout_below = "@id/btn3"
android:layout_alignParentRight = "true"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button5"
android:id = "@+id/btn5"
android:layout_below = "@id/btn4"
android:layout_centerHorizontal = "true"
/>
RelativeLayout >
[html] view plain copy print ?
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"
>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button1"
android:id = "@+id/btn1"
/>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button2"
android:id = "@+id/btn2"
android:layout_below = "@id/btn1"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button3"
android:id = "@+id/btn3"
android:layout_below = "@id/btn2"
android:layout_alignRight = "@id/btn2"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button4"
android:id = "@+id/btn4"
android:layout_below = "@id/btn3"
android:layout_alignParentRight = "true"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button5"
android:id = "@+id/btn5"
android:layout_below = "@id/btn4"
android:layout_centerHorizontal = "true"
/>
RelativeLayout >
知识补充:
表1-1 组件之间的位置关系
属性名称
作用
android:layout_above
将组件放在指定ID组件的上方
android:layout_below
将组件放在指定ID组件的下方
android:layout_toLeftOf
将组件放在指定ID组件的左方
android:layout_toRightOf
将组件放在指定ID组件的右方
表1-2 组件对齐方式
属性名称
作用
android:layout_alignBaseline
将该组件放在指定ID组件进行中心线对齐
android:layout_alignTop
将该组件放在指定ID组件进行顶部对齐
android:layout_alignBottom
将该组件放在指定ID组件进行底部对齐
android:layout_alignLeft
将该组件放在指定ID组件进行左边缘对齐
android:layout_alignRight
将该组件放在指定ID组件进行右边缘对齐
表1-3 当前组件与父组件的对齐方式
属性名称
作用
android:layout_alignParentTop
该组件与父组件进行顶部对齐
android:layout_alignParentBottom
该组件与父组件进行底部对齐
android:layout_alignParentLeft
该组件与父组件进行左边缘对齐
android:layout_alignParentRight
该组件与父组件进行右边缘对齐
表1-4 组件放置的位置
属性名称
作用
android:layout_centerHorizontal
将该组件放置在水平方向中央的位置
android:layout_centerVertical
将该组件放置在垂直方向的中央的位置
anroid:layout_centerInParent
将该组件放置在父组件的水平中央及垂直中央的位置
第3 part-TableLayout(表格布局)
TableLayout(表格布局),顾名思义就是像表格一样布局,通常情况下,TableLayout有多个TableRow组成,每个TableRow就是一行,定义几个TableRow就是定义几行;
创建项目:Layout_03(表格布局)
项目运行效果:
修改布局文件:
main.xml
[html] view plain copy print ?
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 >
[html] view plain copy print ?
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 >
TableLayout就那么简单,TableLayout中也有几个常用属性:
(1)shrinkColumns属性:以0为序,当TableRow里面的控件布满布局时,,指定列自动延伸以填充可用部分;当TableRow里面的控件还没有布满布局时,shrinkColumns不起作用。
在布局文件中添加shrinkColumns属性代码:
[html] view plain copy print ?
< TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:shrinkColumns = "2" >
[html] view plain copy print ?
< TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:shrinkColumns = "2" >
指定第3列填充可用部分,运行项目效果如图:
没有发生变化,因为TableRow里面的控件还没有布满布局,现在再修改布局文件如下:
现在可以看到,shinkColumns属性起作用了。
[html] view plain copy print ?
< TableRow >
< Button android:text = "Button1" />
< Button android:text = "Button2" />
< Button android:text = "Button3333333333333333333333333" />
TableRow >
[html] view plain copy print ?
< TableRow >
< Button android:text = "Button1" />
< Button android:text = "Button2" />
< Button android:text = "Button3333333333333333333333333" />
TableRow >
(2)strechColumns属性,以第0行为序,指定列对空白部分进行填充。
在布局中添加strechColumns属性代码如下:
[html] view plain copy print ?
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" >
[html] view plain copy print ?
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" >
android:strechColumns:指定第3列填充空白部分
(3)collapseColumns属性:以0行为序,隐藏指定的列
在布局中添加collapseColumns属性代码如下:
[html] view plain copy print ?
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" >
[html] view plain copy print ?
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" >
运行效果如图:
android:collapseColumns="2":指定第3列隐藏
(4)layout_column属性:以0行为序,设置组件显示指定列
(5)layout_span属性:以第0行为序,设置组件显示占用的列数。
修改布局代码如下:
[html] view plain copy print ?
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 >
[html] view plain copy print ?
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 part AbsoluteLayout(绝对布局)
AbsoluteLayout(绝对布局) 布局用法如其名,组件的位置可以准确的指定其在屏幕的x/y坐标位置。虽然可以精确的去规定坐标,但是由于代码的书写过于刚硬,使得在不同的设备,不同分辨率的手机移动设备上不能很好的显示应有的效果,所以此布局不怎么被推荐使用。
创建项目:Layout_04(绝对布局)
修改布局文件代码如下:
[html] view plain copy print ?
xml version = "1.0" encoding = "utf-8" ?>
< AbsoluteLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< Button
android:layout_width = "wrap_content"
android:layout_height = "fill_parent"
android:text = "Button1"
android:layout_x = "100dp"
/>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button2"
android:layout_y = "100dp"
/>
AbsoluteLayout >
[html] view plain copy print ?
xml version = "1.0" encoding = "utf-8" ?>
< AbsoluteLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< Button
android:layout_width = "wrap_content"
android:layout_height = "fill_parent"
android:text = "Button1"
android:layout_x = "100dp"
/>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button2"
android:layout_y = "100dp"
/>
AbsoluteLayout >
项目运行效果:
运行效果说明:Button1的x坐标设定为了100像素,Button2的y坐标设定为了100像素。
第5 part FrameLayout(单帧布局)
FrameLayout(单帧布局),据说是五种布局中最简单的一种,因为单帧布局在新定义组件的时候都会将组件放置屏幕的左上角,即使在此布局中定义多个组件,后一个组件总会将前一个组件所覆盖,除非最后一个组件是透明的。
创建项目:Layout_05
修改布局文件代码如下:
[html] view plain copy print ?
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 = "fill_parent"
>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button1"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "fill_parent"
android:text = "Button2"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button3"
/>
FrameLayout >
[html] view plain copy print ?
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 = "fill_parent"
>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Button1"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "fill_parent"
android:text = "Button2"
/>
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Button3"
/>
FrameLayout >
项目运行效果:
效果图说明:可以看到3个按钮组件都有重叠的部分,单帧布局不会像线性布局那样每个组件之间自动对齐且组件之间都有间隙