为了适应不同界面的风格,android为开发人员提供了5种常用布局,分别是LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)/AbsoluteLayout(绝对布局)。
1.LinearLayout(线性布局)
首先我们来介绍线性布局,线性布局是在实际开发中比较常用的,他主要以水平和垂直的方式来显示界面中的控件。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
/>
</LinearLayout>
首先是layout_width和layout_height这两个控件属性,这两个值可以设置为wrap_content(控件大小由控件内容大小变化而变化)和match_parent(填满父窗体由父容器决定控件大小),也可以自定义大小。
改变btn3的layout_width的值使他变成match_parent:
改变三个按钮的layout_width的值,自定义为100dp、200dp、300dp:
同理layout_height也是可以一样根据自己的需求自己定义自己需要的高度大小。
之后是orientation一个关键的属性,用于控制控件的排列方向,它有两个值 vertical表示线性布局垂直显示,horizontal表示线性布局水平显示。
将orientation的值变为vertical就会变成水平显示:
你也可以根据需要使用嵌套线性布局即在线性布局中再使用线性布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
/>
</LinearLayout>
</LinearLayout>
2.相对布局
相对布局是通过相对定位的方式指定控件位置,即以其它控件或父容器为参照物,摆放控件位置。
表1 设置控件间距的属性
控件属性 | 功能描述 |
---|---|
android:layout_marginTop | 设置当前控件上边界与某控件的距离 |
android:layout_marginBottom | 设置当前控件底边界与某控件的距离 |
android:layout_marginLeft | 设置当前控件左边界与某控件的距离 |
android:layout_marginRight | 设置当前控件右边界与某控件的距离 |
表2 设置控件位置的属性
控件属性 | 功能描述 |
---|---|
android:layout_centerInparent | 设置当前控件位置位于父布局的中央位置 |
android:layout_centerVertical | 设置当前控件位置位于父布局的垂直居中位置 |
android:layout_centerHrizontal | 设置当前控件位置位于父布局的水平居中位置 |
android:layout_above | 设置当前控件位于某控件上方 |
android:layout_below | 设置当前控件位于某控件下方 |
android:layout_toLeftOf | 设置当前控件位于某控件左侧 |
android:layout_toRightOf | 设置当前控件位于某控件右侧 |
android:layout_alignParentTop | 设置当前控件是否与父控件顶端对齐 |
android:layout_alignParentLeft | 设置当前控件是否与父控件左对齐 |
android:layout_alignParentRight | 设置当前控件是否与父控件右对齐 |
android:layout_alignParentBottom | 设置当前控件是否与父控件底端对齐 |
android:layout_alignTop | 设置当前控件的上边界与某控件的上边界对齐 |
android:layout_alignBottom | 设置当前控件的下边界与某控件的下边界对齐 |
android:layout_alignLeft | 设置当前控件的左边界与某控件的左边界对齐 |
android:layout_alignRight | 设置当前控件的右边界与某控件的右边界对齐 |
表3 设置布局内边距的属性
布局属性 | 功能描述 |
---|---|
android:paddingTop | 设置布局顶部内边距的距离 |
android:paddingBottom | 设置布局底部内边距的距离 |
android:paddingLeft | 设置布局左边内边距的距离 |
android:paddingRight | 设置布局右边内边距的距离 |
android:padding | 设置布局四周内边距的距离 |
熟练的掌握以上的表,就能很好的运用相对布局了。下面通过示例来使用以上表中的内容。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="100dp"
>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_alignParentTop="true"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_centerInParent="true"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:layout_alignLeft="@+id/btn2"
android:layout_marginLeft="50dp"
android:layout_above="@id/btn2"
/>
</RelativeLayout>
父布局与顶部边距为100dp,A与父控件顶端对齐,B位置位于父布局的中央位置,C的左边界与B控件的左边界对齐,C左边界与B控件的距离为50dp,C位于B控件的上方。
3.帧布局
帧布局是Android中最简单的一种布局,该布局为每个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧。
表4 FrameLayout 属性
布局属性 | 功能描述 |
---|---|
android:foreground | 设置帧布局容器的前景图像(始终在所有子控件之上) |
android:foregroundGravity | 设置前景图像显示位置 |
通过一个例子来熟悉一下帧布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="@drawable/b"
android:foregroundGravity="center"
>
<Button
android:id="@+id/btn1"
android:layout_width="300dp"
android:layout_height="450dp"
android:text="A"
/>
<Button
android:id="@+id/btn2"
android:layout_width="150dp"
android:layout_height="100dp"
android:text="B"
/>
<Button
android:id="@+id/btn3"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="C"
/>
</FrameLayout>
从运行结果可以看出,按钮都被前景图片给挡住了,所以要注意在使用帧布局的时候,一定要记住前景图片会始终保持在最上层。
当我们把前景图删除后:按钮就可以显示了。
4.表格布局
表格布局是以表格的形式排列空间的,通过行和列将界面划分为多个单元格,每个单元格都可以添加控件。
表5 TableLayout 布局属性
布局属性 | 功能描述 |
---|---|
android:stretchColumns | 拉伸列 |
android:shrinkColumns | 收缩列 |
android:collapseColumns | 隐藏列 |
表6 TableLayout 控件属性
控件属性 | 功能描述 |
---|---|
android:layout_column | 设置单元格显示位置 |
android:layout_span | 设置单元格占据几行 |
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>
<TableRow>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="A"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="B"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="D"
/>
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="E"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
/>
</TableRow>
</TableLayout>
上述定义了一个2行3列的表格布局,第1列被拉伸。
通过TableRow来布局每一行。
设置collapseColumns可以使第一列隐藏
android:collapseColumns="1"
通过是设置layout_span可以设置控件占据大小。
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_span="2"
android:text="E"
/>
5.绝对布局
绝对布局是通过设定X,Y的值来控制控件的位置。
表7 AbsoluteLayout 属性
布局属性 | 功能描述 |
---|---|
android:layout_x | 设置X坐标 |
android:layout_y | 设置Y坐标 |
设置控件ABC的位置分别位于<100,100>,<100,200>,<300,300>处。
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100dp"
android:layout_y="100dp"
android:text="A"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100dp"
android:layout_y="200dp"
android:text="B"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="300dp"
android:layout_y="300dp"
android:text="C"
/>
</AbsoluteLayout>
通过上述例子可以发现绝对布局就2个属性,想要掌握一很容易但是想要和好的设置控件在自己想要的位置就要自己一点一点的去慢慢的调整了。
总结
通过上述5种布局的了解,可以发现布局其实不难,只要记住每种布局所含有的属性,然后根据自己的需求设置自己想要的值,就可以通过布局设置出让自己满意的界面了,但是想要做出比较好的布局效果还是要善于使用嵌套布局。
参考文献:Android移动开发基础案例教程
作者:罗庆辉,原文网址