RelativeLayout中子控件常用属性:
子控件默认是从父控件的左上角开始排列的
- 相对于父控件
android:layout_alignParentTop="true" 和父控件的顶部对齐 android:layout_alignParentBottom="true" 和父控件的底部对齐 android:layout_alignParentRight="true" 和父控件的右端对齐 android:layout_alignParentLeft="true" 和父控件的左端对齐
- 相对于给定的ID控件
android:layout_above="@id/cat1" 控件的底部置于给定ID的控件之上 android:layout_below="@id/cat1" 控件底部置于给定ID的控件之下· android:layout_toRightOf="@id/cat1" 控件的左边缘与给定ID的控件的右边缘对齐 android:layout_toLeftOf="@id/cat1" 控件的右边缘与给定ID的控件的左边缘对齐 android:layout_alignBottom="@id/cat1" 与给定控件的底边缘对齐 android:layout_alignLeft="@id/cat1" 与给定控件的左边缘对齐 android:layout_alignTop="@id/cat1" 与给定控件的定边缘对齐 android:layout_alignRight="@id/cat1" 与给定控件的右边缘对齐 android:layout_alignbaseline="@id/cat1"控件的baseline与给定ID控件的baseline对齐,其实这个baseline相当于笔记本里写文字时候的底下的那条线 android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐 android:layout_toRightOf 在某元素的右边
- 居中
android:layout_centerHorizontal="true" 水平居中 android:layout_centerVertical="true" 垂直居中 android:layout_centerInParent="true" 相对于父控件处在正中央
一个简单的登录界面:
所的结果:
布局间的所属关系:
Margin和Padding:
盒模型(控件)主要定义四个区域:内容 (content)、边框距(padding)即内边距、边界(border)和外边距(margin)。 对于初学者,经常会搞不清楚margin,background-color,background- image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的平面示意图,希望便于你的理解和记忆。Margin 是整体移动,带着控件里面的内容(content),而padding 是移动控件里面的内容相对于控件Bprder的距离。
将上述界面进行美化:
如下图所示:
安卓按键快速美化:
- 在res/drawable目录下新建按钮样式文件 btn_normal.xml(正常状态) 和 btn_pressed.xml(按下状态)。
btn_normal.xml文件:
btn_pressed.xml文件:
- 在res/drawable目录下新建样式文件 btn_selector.xml 文件,定义按钮的不同状态样式。
btn_selector.xml文件:
练习制作刷卡界面:
结果如下:
LinearLayout常用属性(它的父控件还是RelativeLayout,所以RelativeLayout的属性还可以拿来用):
- orientation: 布局中控件的排列方式,有vertical(竖直,默认)和horizontal(水平)两种方式
- gravity:控制组件所包含的子元素的对齐方式,可多个组合,如left|buttom(这个是基础控件相对于父控件来说的)
- layout_gravity: 控制该组件在父容器中的对齐方式,(这个是布局控件相对于父控件来说的)
- layout_width:布局宽度,通常不直接写数字的,用wrap_content(组件实际大小)和fill_parent或者match_marent(填满父容器)
- layout_height:布局的高度,参数同上
- background:为组件设置一个背景图片,或者直接用颜色覆盖
Weight(权重):
该属性用来等比例地划分区域。
- 最简单的用法:要等比例划分,分谁,谁为0,Weight按比例即可
- 当我们设置宽度为0dp时,同时设置weight属性为1,意思就是在宽度方向上所占比重为1。如果将height设置为0,同时设置weight属性为2,意思就是在竖直方向所占比重为2。
divider分割线:
该属性用于LinearLayout设置分割图片,通过showDivider来设置分割线的所在位置,有四个可选值:none、middle、begining、end,当然还可以通过:
- divider: 为LinearLayout设置分割线的图片
- showDivider: 设置分割线所在位置,有四个通道:none、middle、begining、end
- dividerPadding: 设置分割线的Padding
设置分割线(divider):
然后编辑该分割线的代码:
shape是分割线的形状
使用线性布局和相对布局写一个丑陋的登录界面:
结果如下图所示:



