android 四大布局

最新推荐文章于 2024-04-18 00:09:16 发布

独行侠_阿涛

最新推荐文章于 2024-04-18 00:09:16 发布

阅读量455

点赞数

分类专栏：其他

其他专栏收录该内容

21 篇文章 0 订阅

订阅专栏

四大布局方式

有的地方介绍的是五大布局，因为还有一种是绝对布局（AbsoluteLayout）就是通过坐标和宽高来控制控件的位置，此布局方式在Android开发中已经被弃用了，所以不再今天的讨论范围之内。今天要介绍的布局方式有线性布局（LinearLayout）、相对布局（RelativeLayout）、帧布局（FrameLayout）、表格布局(TableLayout)。前两者是常用的，所以今天就着重的讨论一下LinearLayout。

说到Android中的布局方式我想对比一下iOS开发中的布局方式。可以说iOS布局中基本的有两种方式，一个是绝对布局，另一种就是相对布局。绝对布局就是通过Frame(x, y, width, height), 也就是给控件设置坐标原点以及宽高来确定控件的位置和大小。因为这种布局方式一旦设置Frame后，控件的位置和大小就固定了，所以被成为绝对布局。

另一种iOS中的布局方式就是相对布局了，在iOS开发中可以使用Autolayout + SizeClass来确定控件的位置和大小。我们可以给控件添加不同的约束（宽，高，上下左右边距，上下左右居中，垂直水平居中）等方式来控制控件的大小和位置。这种方式在屏幕适配时更为灵活，在iOS开发中也常常被使用到。关于响度布局iOS开发中你可以通过VFL（Visual format language）给控件添加约束，你也可以通过Storyboard以可视化的方式来进行约束的添加。

iOS的布局方式就先聊到这儿，接下来回到安卓的布局方式当中。在Android开发的几种布局方式当中，你不许指定控件的坐标点，也就是说你不许指定控件的位置，因为特定的布局方式有其特定计算控件坐标点的方法。但是在不同的布局方式中你需要为控件指定宽高。接下来具体的介绍一下Android开发中的布局方式。

1. LinearLayout (线性布局)

说到LinearLayout, 我想说一下流式布局。其实LinearLayout就是流式布局，流式布局有个特点，就是下一个控件的坐标原点由上一个控件来决定，你可以沿水平方向或者垂直方向上来排列你的控件。如果你的控件是垂直排列的，那么你可以给控件指定水平的居中方式（这一点可能说起来抽象，下方会通过实例来进行介绍）。接下来将通过一系列的实例来介绍一下LinearLayout。

(1) 下方有张效果图，我们想实现下方布局方式，如果使用LinearLayout来实现该如何去做呢。

(2) 首先我们先分析布局方式，把每个块进行拆分，分析，然后通过LinearLayout进行组合在一块即可。我们对上述布局方式进行拆分，并且对使用的LinearLayout进行命名，并且指定子视图的布局方式（V-垂直，H-水平），具体的请看下图。最下方我们使用了一个水平布局的LinearLayout1, 在LinearLayout01上又有两个高度等于父视图高度的LinearLayout11和LinearLayout12，两者子控件的布局方式都设置为垂直排列。在LinearLayout12中又有两个子线性布局LinearLayout121和LinearLayout122, 这两个子布局沿垂直方向排列于父布局之上，并且宽度与父布局相等。

(3) 上方说了这么多了，那么接下来看一下上面布局的具体实现方式吧，其布局层次结构图如下所示

具体实现xml如下，在实现中你可以通过android:orientation属性来设置是水平（horizontal）线性排列还是垂直（vertical）线性排列。关于pt等这种单位，下篇博客会给大家详细的介绍一下。

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 3     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
 4     android:paddingRight="@dimen/activity_horizontal_margin"
 5     android:paddingTop="@dimen/activity_vertical_margin"
 6     android:paddingBottom="@dimen/activity_vertical_margin"
 7     tools:context="com.example.lizelu.userinterfacedemo.Main2Activity">
 8     <LinearLayout
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent">
11 
12         <!--垂直线性布局方式-->
13         <LinearLayout
14             android:layout_width="60pt"
15             android:layout_height="match_parent"
16             android:background="#ff0000"
17             android:orientation="vertical">
18         </LinearLayout>
19 
20         <LinearLayout
21             android:layout_width="match_parent"
22             android:layout_height="match_parent"
23             android:orientation="vertical">
24           
25             <LinearLayout
26                 android:layout_width="match_parent"
27                 android:layout_height="50pt"
28                 android:background="#0000ff"
29                 android:orientation="horizontal">
30             </LinearLayout>
31 
32             <LinearLayout
33                 android:layout_width="match_parent"
34                 android:layout_height="match_parent"
35                 android:background="#00ff00"
36                 android:orientation="horizontal">
37             </LinearLayout>
38         </LinearLayout>
39     </LinearLayout>
40 </RelativeLayout>

(4) 垂直布局控件的对齐方式（Left, Center, Right）。垂直布局的控件，我们可以对其指定水平方向的对对齐方式。为了说明这个问题我还是想画个图来解释一下这个看似简单的问题。我们可以通过控件的android:layout_gravity属性来指定对其方式。在垂直布局中，垂直方向的对齐方式（top, center, bottom）是不起作用的，因为垂直方向的位置已经有垂直线性布局所决定了，所以layout_gravity就不起作用了。

原理就先到这儿，接下来就是实现了，我们将在LinearLayout11布局中添加下方的子控件。每个子控件都指定了水平的对齐方式，具体代码如下所示：

 1             <Button
 2                 android:layout_width="wrap_content"
 3                 android:layout_height="wrap_content"
 4                 android:layout_gravity="left"
 5                 android:text="aa"/>
 6             <Button
 7                 android:layout_width="wrap_content"
 8                 android:layout_height="wrap_content"
 9                 android:layout_gravity="center"
10                 android:text="bb"/>
11             <Button
12                 android:layout_width="wrap_content"
13                 android:layout_height="wrap_content"
14                 android:text="cc"
15                 android:layout_gravity="right"/>

添加代码后运行效果如下：

(5) 水平布局控件的对齐方式（Top, Center, Bottom）。如果控件是以水平的方式进行排列的，那么我们就可以对其指定垂直方向的对齐方式，即Top, Center和Bottom。也是通过android:layout_gravity属性来指定的。为了说明一下原理呢，我还是想用一张图来表达一下：

原理看完了，接下来按照上面的套路，我们以上面的布局和对齐方式，在LinearLayout121上添加三个上述布局的Button. 具体代码如下所示：

 1                 <Button
 2                     android:layout_width="wrap_content"
 3                     android:layout_height="wrap_content"
 4                     android:layout_gravity="top"
 5                     android:text="aa"/>
 6                 <Button
 7                     android:layout_width="wrap_content"
 8                     android:layout_height="wrap_content"
 9                     android:text="bb"
10                     android:layout_gravity="center" />
11                 <Button
12                     android:layout_width="wrap_content"
13                     android:layout_height="wrap_content"
14                     android:layout_gravity="bottom"
15                     android:text="cc"/>

接下来就该运行了，下方是运行出来的结果：

（6）在线性布局中有一个不得不提的属性就是android:layout_weight, 该属性允许你以比例的形式来指定控件的大小。接下来我们要做的就是在LinearLayout122中添加三个水平方向上等分的按钮。使用android:layout_weight属性，很容易就可以实现，因为原理比较简单，就不画原理图了，下方是具体的xml实现：

 1                 <Button
 2                     android:layout_width="0pt"
 3                     android:layout_height="wrap_content"
 4                     android:layout_weight="1"
 5                     android:text="你好"/>
 6 
 7                 <Button
 8                     android:layout_width="0pt"
 9                     android:layout_height="wrap_content"
10                     android:layout_weight="1"
11                     android:text="Android"/>
12 
13                 <Button
14                     android:layout_width="0pt"
15                     android:layout_height="wrap_content"
16                     android:layout_weight="1"
17                     android:text="iOS"/>

具体运行效果如下所示：

线性布局就先到这儿，因为线性布局方式在Android开发中经常使用到，所以介绍的会多一些。线性布局还有好多其他的用法，等后边博客中用到的时候会详细的介绍。

2.RelativeLayout (相对布局)

上面也说了一下相对布局, 相对布局的本质就是以不变应万变。也就是说相对布局可以根据已经固定的控件来确定其他新加控件的位置。相对布局用的还是蛮多的，接下来我们将通过一个实例来介绍一下RelativeLayout。

首先我们先来看一下我们要实现的效果，实现思路是我们先根据父视图的中心位置来确定center_button的位置，然后再由Center和Parent的位置来确定出其他按钮的位置，这就是相对布局。

在相对布局中，你可以设置的属性如下所示，还是蛮多的。在本篇博客中就不做一一介绍了，其用法都差不多。如下图所示：

实现上述效果的xml代码如下所示，相对布局使用起来和理解起来还是比较简单的。

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     tools:context="com.example.lizelu.userinterfacedemo.Main3Activity">
 6 
 7     <Button
 8         android:id="@+id/button_center"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_centerInParent="true"
12         android:text="center"/>
13 
14     <Button
15         android:id="@+id/button_above"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_above="@+id/button_center"
19         android:layout_centerInParent="true"
20         android:text="above"/>
21 
22     <Button
23         android:id="@+id/button_below"
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:layout_below="@+id/button_center"
27         android:layout_centerInParent="true"
28         android:text="below"/>
29 
30     <Button
31         android:id="@+id/button_left"
32         android:layout_width="wrap_content"
33         android:layout_height="wrap_content"
34         android:layout_toLeftOf="@+id/button_center"
35         android:layout_centerVertical="true"
36         android:text="left"/>
37 
38     <Button
39         android:id="@+id/button_right"
40         android:layout_width="wrap_content"
41         android:layout_height="wrap_content"
42         android:layout_toRightOf="@+id/button_center"
43         android:layout_centerVertical="true"
44         android:text="right"/>
45 
46 </RelativeLayout>

3.帧布局 (FrameLayout)

说到帧布局, 就比较简单了，而且比较好理解，并且帧布局的用处不是很多，但他的存在还是有他的必要性的。FrameLayout中的Frame和iOS中的Frame不是一个概念，在iOS中的Frame你可以指定任意的坐标，而这个坐标点时相对于父视图的。FrameLayout中的Frame的坐标原点是屏幕的左上角，位置固定，你只需为控件指定大小即可。接下来将通过一个实例来搞一下这个FrameLayout。

下面是使用FrameLayout做的一个效果，可以看出每块区域中除了大小颜色不一样外，他们的坐标点都是左上角的位置。这也是FrameLayout的特点，下面是运行效果截图：

实现上方布局的xml如下：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 3     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
 4     android:paddingRight="@dimen/activity_horizontal_margin"
 5     android:paddingTop="@dimen/activity_vertical_margin"
 6     android:paddingBottom="@dimen/activity_vertical_margin"
 7     tools:context="com.example.lizelu.userinterfacedemo.Main4Activity">
 8 
 9    <FrameLayout
10        android:layout_width="120pt"
11        android:layout_height="120pt"
12        android:background="#00ff00">
13        <FrameLayout
14            android:layout_width="100pt"
15            android:layout_height="100pt"
16            android:background="#00f0f0">
17        </FrameLayout>
18 
19        <FrameLayout
20            android:layout_width="80pt"
21            android:layout_height="80pt"
22            android:background="#0000ff">
23        </FrameLayout>
24 
25        <FrameLayout
26            android:layout_width="60pt"
27            android:layout_height="60pt"
28            android:background="#00ffff">
29        </FrameLayout>
30 
31        <FrameLayout
32            android:layout_width="40pt"
33            android:layout_height="40pt"
34            android:background="#000000">
35        </FrameLayout>
36 
37    </FrameLayout>
38 
39 </RelativeLayout>

4、表格布局（TableLayout）

如果你接触过Web前端的东西的话，虽然常用的时div + css , 但是Web前端也是有表格布局的。在安卓开发中的表格布局和Web前端中的表格布局的概念类似，也就是通过画表表格的方式来实现布局。在表格布局中，整个页面就相当于一张大的表格，控件就放在每个Cell中。接下来我们就使用表格布局来画一个表格，感受一下表格布局。接下来我们将会使用表格布局来实现一个比较经典的“登录”页面，下方是简单画的要实现效果图：

由上图我们容易看出，上面就是一个表格结构。Table中有3行两列，登录按钮占了一个整行，其余控件都占了一列。上面的布局还是蛮简单的，说白了，再复杂的布局也是从简单做起的。下方是实现上面布局的XML代码。

 1     <TableLayout
 2         android:layout_width="match_parent"
 3         android:layout_height="match_parent"
 4         android:stretchColumns="1">
 5         <TableRow>
 6             <TextView
 7                 android:layout_width="wrap_content"
 8                 android:layout_height="wrap_content"
 9                 android:text="用户名:"/>
10             <EditText
11                 android:layout_width="match_parent"
12                 android:layout_height="wrap_content"
13                 android:hint="请输入用户名"/>
14         </TableRow>
15 
16         <TableRow>
17             <TextView
18                 android:layout_width="wrap_content"
19                 android:layout_height="wrap_content"
20                 android:text="密   码:"/>
21             <EditText
22                 android:layout_width="match_parent"
23                 android:layout_height="wrap_content"
24                 android:hint="请输入密码"
25                 android:inputType="textPassword"/>
26         </TableRow>
27 
28         <TableRow>
29             <Button
30                 android:layout_height="wrap_content"
31                 android:layout_width="wrap_content"
32                 android:text="登录"
33                 android:layout_span="2"/>
34         </TableRow>
35 
36     </TableLayout>