首页 > 代码库 > Android中的五大布局
Android中的五大布局
一、布局介绍
在Android中,共有五种布局方式,分别是:
- FrameLayout(框架布局)
- LinearLayout(线性布局)
- AbsoluteLayout(绝对布局)
- RelativeLayout(相对布局)
- TableLayout(表格布局)
1. FrameLayout框架布局
- 布局特点:放入其中的所有元素都被放置在最左上的区域,而且无法为这些元素指定一个确切的位置,下一个子元素会重叠覆盖上一个子元素
- 应用场景:适合浏览单张图片。
2. LinearLayout线性布局
- 布局特点:放主要提供控件水平或者垂直排列的模型,每个子组件
都是以垂直或水平的方式来线性排布.(默认是垂直) - 应用场景:最常用的布局方式
linearLayout中有一个重要的属性 android:layout_weight="1",这个weight在垂直布局时,代表行距;水平的时候代表列宽;weight值越大就越大。
3. AbsoluteLayout绝对定位布局
- 布局特点:采用坐标轴的方式定位组件,左上角是(0,0)点,往右x轴递增,往下Y轴递增,组件定位属性为android:layout_x和 android:layout_y来确定坐标。
- 应用场景:准确定位空间位置
由于Android手机的屏幕尺寸、分辨率存在较大差异,使用AbsoluteLayout无法兼顾适配问题,所以该布局已经过时
4. RelativeLayout相对布局
- 布局特点:为某一个组件为参照物,来定位下一个组件的位置的布局方式。
- 应用场景:控件之间存在相应关系(适配神器,推荐使用)
5. TableLayout表格布局
- 布局特点:类似Html里的Table.使用TableRow来布局,其中TableRow代表一行,TableRow的每一个视图组件代表一个单元格。
- 应用场景:控件之间存在相应关系。
这五个布局元素可以相互嵌套应用,做出美观的界面。
二、布局属性配置
Android布局里XML的属性配置
1. 五种Layout中Item的基础属性:
- layout_width & layout_height
- layout_margin+方位 & padding+方位
- layout_gravity & gravity
Android五种布局都具备上述几个基础属性
1. layout_width & layout_height
- 作用:设置Layout中组件的宽度和高度
- 取值:
a. 固定的像素值android:layout_width="66px"
相应视图的宽和高就会被设定成所需的最小尺寸以适应视图中的内容android:layout_width="wrap_content"
视图的宽和高延伸至充满整个父布局android:layout_width="match_parent"
2. layout_margin+方位/padding+方位
- 作用:设置放入Layout中的View与Layout的边界或者其他View之间能够相距一段距离
- 设置:
layout_marginLeft //paddingLeft layout_marginTop //paddingTop layout_marginRight //paddingRight layout_marginBottom //paddingBottom layout_margin //padding
- 取值:固定值
android:layout_marginLeft="66px" //android:paddingLeft=”66px“
paddingLeft与android:layout_marginLeft的区别:
- padding和margin都是边距的含义,但二者边距的定义不同:
padding是控件的内容相对控件的边缘的边距;
layout_margin是控件边缘相对父控件的边距。具体如下图:
3. layout_gravity / gravity
- 作用:用来确定View在Layout中的停靠位置
android gravity和layout_gravity区别:
- gravity属性:是对该view 内容的位置的设置。
比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置.- layout_gravity属性:是用来设置该view相对与父view 的位置。
比如一个button 在Linearlayout里,你可以通过设置该属性把该button放在父布局Linearlayout靠左靠右等位置。
2. 各种Layout的特有属性
2.1 FrameLayout
作为最简单的Layout,只具备基础属性:
- layout_width & layout_height
- layout_margin+方位 & padding+方位
- layout_gravity & gravity
2.2 AbsoluteLayout
除了基础属性外,AbsoluteLayout还具备:
- layout_x:指定控件的x坐标
- layout_y:指定控件的x坐标
上述属性的取值均为固定值。
2.3 TableLayout
除了基础属性外,由于TableLayout的行TableRow是一个横向的(horizontal)的LinearLayout,所以具备LinearLayout的属性
2.4 LinearLayout
除了基础属性,还会有:
- orientation
1.作用:设置布局内控件的排列方式
2.取值:vertical(垂直排列-默认值)、horizontal(水平排列)android:orientation="vertical"; //android:orientation="horizontal";
- layout_weight
1.定义:是线性布局(Linelayout)的一个独特比例分配属性
2.作用:使用此属性设置权重,然后按照比例对界面进行空间的分配,公式计算是:控件宽度=控件设置宽度+剩余空间所占百分比宽幅具体可以参考这篇文章,讲解得非常详细
2.5 RelativeLayout
RelativeLayout的属性算是最多的了,除了基本属性外,还有:
a. 相对于父空间
XML属性 | 说明 |
---|---|
layout_alignParentBottom | 当前控件底端与父控件的底端对齐 |
layout_alignParentLeft | 当前控件左端与父控件的左端对齐 |
layout_alignParentRight | 当前控件右端与父控件的右端对齐 |
layout_alignParentTop | 当前控件上端与父控件的上端对齐 |
layout_centerHorizontal | 当前控件位于父控件的横向中间位置(水平方向上的中间) |
layout_centerVertical | 当前控件位于父控件的纵向中间位置(平面上的正中间) |
layout_centerInParent | 当前控件位于父控件的纵横向中间位置(垂直方向上的中间) |
上述所有属性的取值皆为boolean属性:true、false。
b. 相对于给定控件
XML属性 | 说明 |
---|---|
layout_above | 使当前控件位于给出id控件的上方 |
layout_below | 使当前控件位于给出id控件的下方 |
layout_toLeftOf | 使当前控件位于给出id控件的左侧 |
layout_toRightOf | 使当前控件位于给出id控件的右侧 |
layout_alignBottom | 使当前控件与给出id控件的底部部重合 |
layout_alignLeft | 使当前控件与给出id控件的左边重合 |
layout_alignRight | 使当前控件与给出id控件的右边重合 |
layout_alignTop | 使当前控件与给出id控件的顶部重合 |
layout_alignBaseline | 使当前控件的BaseLine与给出id控件t的BaseLine重合 |
上述所有属性的取值皆为给定控件的id名,如下例子
//文本控件@+id/tab_textview在控件@+id/tab_imageview的下方 <TextView android:id="@+id/tab_textview" android:layout_below="@+id/tab_imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" />
3. 选择器selector.xml的属性
3.1 作用
通过设置selector.xml可使得控件在不同操作下(默认、点击、焦点等)的显示不同样式
3.2 属性
XML属性 | 说明 |
---|---|
android:drawable | 放一个drawable资源 |
android:state_pressed | 按下状态,如一个按钮触摸或者点击。 |
android:state_focused | 取得焦点状态,比如用户选择了一个文本框。 |
android:state_hovered | 光标悬停状态,通常与focused state相同,它是4.0的新特性 |
android:state_selected | 选中状态 |
android:state_enabled | 能够接受触摸或者点击事件 |
android:state_checked | 被checked了,如:一个RadioButton可以被check了。 |
android:state_enabled | 能够接受触摸或者点击事件 |
上述所有属性的取值皆为boolean属性:true、false。
3.3 实例说明
在drawable添加selector.xml资源文件。
button_selector.xml:
<?xml version="1.0" encoding="UTF-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android"> < !-- 指定按钮按下时的图片 --> <item android:state_pressed="true" android:drawable="@drawable/start_down" /> < !-- 指定按钮松开时的图片 --> <item android:state_pressed="false" android:drawable="@drawable/start" /> < /selector>
在布局文件main.xml中控件的属性设置:
<Button android:id="@+id/startButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_selector" />
4. 布局形状shape.xml的属性
<shape xmlns:android="http://schemas.android.com/apk/res/android"> //默认颜色 <solid android:color="#876543"/> //哪个方向有边框线 <padding android:bottom="0dp" android:left="1dp" android:right="1dp" android:top="1dp" /> //边框线颜色、大小 <stroke android:width="1dp" android:color="#000000" />
在布局文件main.xml中控件的属性设置:
<Button android:id="@+id/startButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/layout_shape" />
Android中的五大布局