前言

在进行Android开发中，常常需要用到各种布局来进行UI的绘制，今天我们就来讲下Android开发中最常用的五大布局介绍和相关属性的设置。

目录

image

一、布局介绍

在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"

b. "wrap_content"

相应视图的宽和高就会被设定成所需的最小尺寸以适应视图中的内容

android:layout_width="wrap_content"

c. “match_parent"(在Android API 8之前叫作"fill_parent")

视图的宽和高延伸至充满整个父布局

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是控件边缘相对父控件的边距。具体如下图：

image

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. 相对于父空间

2019-04-18_095542.jpg

上述所有属性的取值皆为boolean属性：true、false。

b. 相对于给定控件

2019-04-18_095702.jpg

上述所有属性的取值皆为给定控件的id名，如下例子

//文本控件@+id/tab_textview在控件@+id/tab_imageview的下方

android:id="@+id/tab_textview"

android:layout_below="@+id/tab_imageview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>

选择器selector.xml的属性

3.1 作用

通过设置selector.xml可使得控件在不同操作下(默认、点击、焦点等)的显示不同样式

3.2 属性

2019-04-18_095822.jpg

上述所有属性的取值皆为boolean属性：true、false。

3.3 实例说明

在drawable添加selector.xml资源文件。

button_selector.xml:

< selector xmlns:android="http://schemas.android.com/apk/res/android">

< !-- 指定按钮按下时的图片 -->

android:drawable="@drawable/start_down"

/>

< !-- 指定按钮松开时的图片 -->

android:drawable="@drawable/start"

/>

< /selector>

在布局文件main.xml中控件的属性设置:

android:id="@+id/startButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/button_selector"

/>

布局形状shape.xml的属性

//默认颜色

//哪个方向有边框线

android:bottom="0dp"

android:left="1dp"

android:right="1dp"

android:top="1dp" />

//边框线颜色、大小

android:width="1dp"

android:color="#000000" />

在布局文件main.xml中控件的属性设置:

android:id="@+id/startButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/layout_shape"