Android开发⾃学笔记(AndroidStudio)—4.1布局组件⼀、引⾔
Android的界⾯是有布局和组件协同完成的,布局好⽐是建筑⾥的框架,⽽组件则相当于建筑⾥的砖⽡。组件按照布局的要求依次排列,就组成了⽤户所看见的界⾯。在Android4.0之前,我们通常说Android开发五⼤布局和四⼤组件,这五⼤布局就是:
1. LinearLayout 线性布局
2. FrameLayout 单帧布局,也有中⽂翻译为帧布局、框架布局。
3. RelativeLayout 相对布局
4. AbsoluteLayout 绝对布局
5. TableLayout 表格布局
⽽在Android4.0之后⼜新增了⼀种GridLayout⽹格布局。
⼆、LinearLayout线性布局
线性布局是Android开发中最常见的⼀种布局⽅式,它是按照垂直或者⽔平⽅向来布局,通过“android:orie
ntation”属性可以设置线性布局的⽅向。属性值有垂直(vertical)和⽔平(horizontal)两种。线性布局的排列在某⾏或者某列并不会⾃动换⾏或换列,就是说如果采⽤⽔平布局,控件宽度超过屏幕显⽰的话,后⾯的控件都将被隐藏,不会⾃动换⾏。
常⽤的属性有:
1. android:orientation:可以设置布局的⽅向
2. android:id - 为控件指定相应的ID
3. android:text - 指定控件当中显⽰的⽂字,需要注意的是,这⾥尽量使⽤l
4. android:gravity - 指定控件的基本位置,⽐如说居中,居右等位置
5. android:textSize - 指定控件当中字体的⼤⼩
6. android:background - 指定控件所⽤的背景⾊,RGB命名法
7. android:layout_width - 指定控件的宽度
8. android:layout_height - 指定控件的⾼度
9. android:layout_weight - 指定控件的占⽤⽐例
10. android:padding - 指定控件的内边距,也就是说控件当中的内容
11. android:sigleLine - 如果设置为真的话,则将控件的内容显⽰在⼀⾏当中
layout_weight属性以控制各个控件在布局中的相对⼤⼩。layout_weight属性是⼀个⾮负整数值;线性布局会根据该控件
layout_weight值与其所处布局中所有控件layout_weight值之和的⽐值为该控件分配占⽤的区域。例如,在⽔平布局的
LinearLayout中有两个Button,这两个Button的layout_weight属性值都为1,那么这两个按钮都会被拉伸到整个屏幕宽度的⼀
半。如果layout_weight指为0,控件会按原⼤⼩显⽰,不会被拉伸;对于其余layout_weight属性值⼤于0的控件,系统将会减去layout_weight属性值为0的控件的宽度或者⾼度,再⽤剩余的宽度或⾼度按相应的⽐例来分配每⼀个控件显⽰的宽度或⾼度。
线性⽔平布局代码和⽰意图如下:
线性垂直布局代码和⽰意图如下(android:orientation通过修改该属性值控制⽔平或者垂直):
布局也是可以嵌套的,代码和⽰意图如下:
三、FrameLayout单帧布局
FrameLayout是布局中最简单的⼀个布局,在这个布局中,整个界⾯被当成⼀块空⽩备⽤区域,所有的⼦元素都不能被指定放置的位置,它们统统放于这块区域的左上⾓,并且后⾯的⼦元素直接覆盖在前⾯的⼦元素之上,将前⾯的⼦元素部分和全部遮挡。
代码及显⽰效果图如下:
可以看到3个按钮组件都有重叠的部分,单帧布局不会像线性布局那样每个组件之间⾃动对齐。
对于单帧布局的使⽤场景我还是有所疑惑的,不知道这种布局⽅式会⽤在什么场景下,不过我看了这⼀篇⽂章倒是略有感触,分享⼀下,或许也能给⼤家些启发:
四、RelativeLayout相对布局
RelativeLayout(相对布局)是除线性布局之外最常⽤的,它相对于线性布局来说⽐较灵活,在进⾏组件布
局的时候⽤线性布局往往需要进⾏布局嵌套,⽽相对布局就不会那么⿇烦,每个组件都可以指定与其它组件或⽗组件的位置,只是必须通过ID来进⾏指定。RelativeLayout按照各⼦元素之间的位置关系完成布局。在此布局中的⼦元素⾥与位置相关的属性将⽣效。例如android:layout_below,
android:layout_above等。⼦元素就通过这些属性和各⾃的ID配合指定位置关系。注意在指定位置关系时,引⽤的ID必须在引⽤之前,先被
定义,否则将出现异常。
代码及演⽰⽰例如下:
补充⼀下⽤到的属性的说明:android layout布局
表1.组件之间的位置关系属性
属性名称作⽤说明
android:layout_above将组件放在指定ID组件的上⽅
android:layout_below将组件放在指定ID组件的下⽅
android:layout_toLeftOf将组件放在指定ID组件的左⽅
android:layout_toRightOf将组件放在指定ID组件的右⽅
表2.组件对齐关系属性
android:layout_alignBaseline将该组件放在指定ID组件进⾏中⼼线对齐
android:layout_alignTop将该组件放在指定ID组件进⾏顶部对齐
android:layout_alignBottom将该组件放在指定ID组件进⾏底部对齐
android:layout_alignLeft将该组件放在指定ID组件进⾏左边缘对齐
android:layout_alignRight将该组件放在指定ID组件进⾏右边缘对齐
表3.当前组件与⽗组件对齐关系属性
android:layout_centerHorizontal将该组件放置在⽔平⽅向中央的位置
android:layout_centerVertical将该组件放置在垂直⽅向的中央的位置
anroid:layout_centerInParent将该组件放置在⽗组件的⽔平及垂直中央
⽽对于相对布局的属性,这⾥也推荐⼀篇博⽂供⼤家参考学习:
五、AbsoluteLayout绝对布局
AbsoluteLayout(绝对布局)布局⽤法如其名,组件的位置可以准确的指定其在屏幕的x/y坐标位置。虽然可以精确的去规定坐标,但是由于代码的书写过于刚硬,使得在不同的设备,不同分辨率的⼿机移动设备上不能很好的显⽰应有的效果,所以此布局不怎么被推荐使⽤。在此布局中的⼦元素的android:layout_x和android:layout_y属性将⽣效,⽤于描述该⼦元素的坐标位置。屏幕左上⾓为坐标原点(0,0),第⼀个0代表横坐标,向右移动此值增⼤,第⼆个0代表纵坐标,向下移动,此值增⼤。在此布局中的⼦元素可以相互重叠。在实际开发中,通常不采⽤此布局格式。
虽然实际开发总已经不推荐使⽤该布局,不过我们还是了解⼀下他的使⽤⽅法(不做详细介绍,感兴趣的⾃⾏去查⽂档),代码和⽰意图如下:
六、TableLayout表格布局
TableLayout顾名思义,此布局为表格布局,适⽤于N⾏N列的布局格式。⼀个TableLayout由许多TableRow组成,⼀个TableRow就代表TableLayout中的⼀⾏。
TableRow是LinearLayout的⼦类,它的android:orientation属性值恒为horizontal,并且它的android:layout_width和android:layout_height属性值恒为MATCH_PARENT和WRAP_CONTENT。所以它的⼦元素都是横向排列,并且宽⾼⼀致的。这样的设计使得每个TableRow⾥的⼦元素都相当于表格中的单元格⼀样。在TableRow中,单元格可以为空,但是不能跨列。
下⾯我们使⽤表格布局编写⽰例代码做⼀个三⾏三列的布局:
TableLayout不复杂,使⽤也就是这么简单,下⾯补充⼏个常⽤属性的作⽤:
1.shrinkColumns属性:以0为序,当TableRow⾥⾯的控件布满布局时,,指定列⾃动延伸以填充可⽤部分;当TableRow⾥⾯
的控件还没有布满布局时,shrinkColumns不起作⽤。
我们在布局代码中加⼊该属性时会发现没有发⽣变化,因为TableRow⾥⾯的控件还没有布满布局,修改代码如下就可以看到效果:
2.strechColumns属性,以第0⾏为序,指定列对空⽩部分进⾏填充。代码及效果如下:
4.layout_column属性:以0⾏为序,设置组件显⽰指定列
5.layout_span属性:以第0⾏为序,设置组件显⽰占⽤的列数。
这两个属性之所以放⼀起,因为有些事项需要说明,先看代码和效果图:
注意:从⽰意图可知:Button1被设置了占⽤了2列,Button4被设置显⽰在地2列,但代码指定Button5显⽰在第1列,但没有按照设定显⽰,这样可知TableRow在表格布局中,⼀⾏⾥的组件都会⾃动放在前⼀组件的右侧,依次排列,只要确定了所在列,其后⾯的组件就⽆法再进⾏位置的设置。
七、GridLayout⽹格布局
GridLayout⽹格布局是Android4.0之后新加⼊的布局⽅式,与TableLayout⼤同⼩异,不过也新增了⼀些内容:
1.可以设置容器中组件的对其⽅式。
2.容器中的组件可以跨多⾏也可以跨多列
需要注意的是因为是Android4.0之后新增的,所以API Level14之前的SDK⽆法直接使⽤,还想使⽤的话就⾃⼰去百度⽅法,这⾥不再说,因为我觉得应该很少⼈再做4.0之前的程序了吧?
先看⽰例代码吧,这个⽹格布局做计算器⽰例应该是最简单的:
说明:rowCount和columnCount是定义了⾏和列,就是这个布局定义了6⾏4列。这⾥layout_columnSpan是指占⽤了⼏列,在⽰例代码中,“BackSpace”和”Clear“按钮都占⽤了2列,其他按钮默认都是占⽤1⾏1列。其中layout_rowSpan是占⽤了⼏⾏,这⾥不再写⽰例,各位可以⾃⾏实验,再通过将layout_gravity设置为fill就是填满占⽤的⾏或列。
其它扩展的内容各位可以查对应的API说明⽂档进⾏学习。
⼋、参考⽂章
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论