Android中常用的5大布局详述

　 Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。

Android中常用的5大布局详述

所有的布局方式都可以归类为ViewGroup的5个类别，即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类

线性布局（LinearLayout）：按照垂直或者水平方向布局的组件。
帧布局（FrameLayout）：组件从屏幕左上方布局组件。
表格布局（TableLayout）：按照行列方式布局组件。
相对布局（RelativeLayout）：相对其它组件的布局方式。
绝对布局（AbsoluteLayout）：按照绝对坐标来布局组件

1. LinearLayout

线性布局是Android开发中最常见的一种布局方式，它是按照垂直或者水平方向来布局，通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直（vertical）和水平（horizontal）两种。

常用的属性：

android:orientation：可以设置布局的方向
android:gravity:用来控制组件的对齐方式
layout_weight：控制各个组件在布局中的相对大小

（1）android:orientatinotallow="vertical" 表示竖直方式对齐

（2）android:orientatinotallow="horizontal"表示水平方式对齐

（3）android:layout_width="fill_parent"定义当前视图在屏幕上可以消费的宽度，fill_parent即填充整个屏幕。

（4）android:layout_height="wrap_content": 随着文字栏位的不同而改变这个视图的宽度或者高度。有点自动设置框度或者高度的意思

layout_weight默认值是零，用于给一个线性布局中的诸多视图的重要度赋值。比如说我们在水平方向上有一个文本标签和两个文本编辑元素，该文本标签并无指定layout_weight值，所以它将占据需要提供的最少空间；如果两个文本编辑元素每一个的layout_weight值都设置为1，则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1，而第二个的设置为2，则剩余空间的三分之一分给第二个，三分之二分给第一个(正比划分)。(仅在LinearLayou中有效)。

首看看一个样例使用 weight：

Android中常用的5大布局详述

xml布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="3" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/black"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_light"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_green_dark"
        android:text="TextView" />

</LinearLayout>

复杂一点的样例，使用gravity：

Android中常用的5大布局详述

XML布局文件：

<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="@android:color/black">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical" >
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
              >
        </EditText>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal"
        android:gravity="right"
        >
 <!-- android:gravity="right"表示LinearLayout内部组件向右对齐 --> 
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确 认" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消" />

    </LinearLayout>

</LinearLayout></span>

2.FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。

作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域,

当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角;

帧布局的大小由子控件中最大的子控件决定,

如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！

当然我们也可以为组件添加layout_gravity属性,从而制定组件的对其方式

前景图像:

永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片

常用属性:

android:foreground:设置该帧布局容器的前景图像

android:foregroundGravity:设置前景图像显示的位置

实例：xml布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    <TextView android:id="@+id/textview1" 
        android:layout_width="300dp"
        android:layout_height="300dp" 
        android:layout_gravity="center" 
        android:background="#FF33ffff" />
    <TextView android:id="@+id/textview2" 
        android:layout_width="240dp"
        android:layout_height="240dp" 
        android:layout_gravity="center" 
        android:background="#FF33ccff" />
    <TextView android:id="@+id/textview3" 
        android:layout_width="180dp"
        android:layout_height="180dp" 
        android:layout_gravity="center" 
        android:background="#FF3399ff" />
    <TextView android:id="@+id/textview4" 
        android:layout_width="120dp"
        android:layout_height="120dp" 
        android:layout_gravity="center" 
        android:background="#FF3366ff" />
    <TextView android:id="@+id/textview5" 
        android:layout_width="60dp"
        android:layout_height="60dp" 
        android:layout_gravity="center" 
        android:background="#FF3300ff" />
</FrameLayout>

效果如下：

Android中常用的5大布局详述

3.TableLayout(表格布局)

把子元素放入到行与列中不显示行、列或是单元格边界线单元格不能横跨行，如HTML中一样表格布局模型以行列的形式管理子控件，每一行为一个TableRow的对象，当然也可以是一个View的对象。TableRow可以添加子控件，每添加一个为一列。

适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。

　　TableRow是LinearLayout的子类，ablelLayout并不需要明确地声明包含多少行、多少列，而是通过TableRow，以及其他组件来控制表格的行数和列数， TableRow也是容器，因此可以向TableRow里面添加其他组件，没添加一个组件该表格就增加一列。如果想TableLayout里面添加组件，那么该组件就直接占用一行。在表格布局中，列的宽度由该列中最宽的单元格决定，整个表格布局的宽度取决于父容器的宽度（默认是占满父容器本身）。

　　TableLayout继承了LinearLayout，因此他完全可以支持LinearLayout所支持的全部XML属性，除此之外TableLayout还支持以下属性：

　　　　　　XML属性相关用法说明

　　1. andriod：collapseColumns setColumnsCollapsed（int ，boolean）设置需要隐藏的列的序列号，多个用逗号隔开

　　2.android：shrinkColumns setShrinkAllColumns（boolean）设置被收缩的列的序列号，多个用逗号隔开

　　3.android：stretchColimns setSretchAllColumnds（boolean）设置允许被拉伸的列的序列号，多个用逗号隔开

看一下实例会比较好理解：

Android中常用的5大布局详述

XML布局文件

    <?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

（1）shrinkColumns属性：以0为序，当TableRow里面的控件布满布局时，指定列自动延伸以填充可用部分；当TableRow里面的控件还没有布满布局时，shrinkColumns不起作用。

例：设置 shrinkColumns="2"当第二列过长时会自动延伸填充可用部分（如果不超长，shrinkColumns不起作用）

在布局文件中添加shrinkColumns属性代码：

<?xml versinotallow="1.0" encoding="utf-8"?>  
     <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:shrinkColumns="2"
         >  
         <TableRow>  
             <Button android:text="Button1"/>  
             <Button android:text="Button2"/>  
             <Button android:text="Button333333333333333333333"/>  
         </TableRow>  
         <TableRow>  
             <Button android:text="Button4"/>  
             <Button android:text="Button5"/>  
             <Button android:text="Button6"/>  
         </TableRow>  
         <TableRow>  
             <Button android:text="Button7"/>  
             <Button android:text="Button8"/>  
             <Button android:text="Button9"/>  
         </TableRow>  
     </TableLayout>

效果如下：

（2）strechColumns属性，以第0行为序，指定列对空白部分进行填充。

在布局中添加stretchColumns属性代码如下：

<?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:stretchColumns="2"
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

效果如下：

（3）collapseColumns属性：以0行为序，隐藏指定的列

在布局中添加android:collapseColumns="2"指定第3列隐藏：

<?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:collapseColumns="2"
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

效果如下：

(4)layout_column属性：以0行为序，设置组件显示指定列

(5)layout_span属性：以第0行为序，设置组件显示占用的列数。

布局代码如下：

<?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent">  
        <TableRow>  
            <Button android:text="Button1"  
                android:layout_span="3"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"  
                android:layout_column="2"/>  
            <Button android:text="Button5"  
                android:layout_column="0"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

效果如下：

Android中常用的5大布局详述

从效果图可知：Button1被设置了占用了3列，Button4被设置显示在地3列，但代码指定Button5显示在第一列，但没有按照设定显示，这样可知TableRow在表格布局中，一行里的组件都会自动放在前一组件的右侧，依次排列，只要确定了所在列，其后面的组件就无法在进行设置位置。

4.RelativeLayout(相对布局)

RelativeLayout继承于android.widget.ViewGroup，其按照子元素之间的位置关系完成布局的，相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其它子控件,作为Android系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。

注意：在引用其他子元素之前，引用的ID必须已经存在，否则将出现异常。

RelativeLayout用到的一些重要的属性：

第一类:属性值为true或false

控件于容器

android:layout_centerHrizontal                                        水平居中
android:layout_centerVertical                                           垂直居中
android:layout_centerInparent                                        相对于父元素完全居中

android:layout_alignParentBottom                   贴紧父元素的下边缘
android:layout_alignParentLeft                      贴紧父元素的左边缘
android:layout_alignParentRight                      贴紧父元素的右边缘
android:layout_alignParentTop                      贴紧父元素的上边缘
android:layout_alignWithParentIfMissing             如果对应的兄弟元素找不到的话就以父元素做参照物

第二类：属性值必须为id的引用名“@id/id-name”

控件于控件位置相关,

android:layout_below                         在某元素的下方
android:layout_above                         在某元素的的上方
android:layout_toLeftOf                      在某元素的左边
android:layout_toRightOf                   在某元素的右边

控件于控件对齐相关
android:layout_alignTop                   本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft                   本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom                本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight                   本元素的右边缘和某元素的的右边缘对齐

android:layout_alignBaseline 本元素与和某元素的基准线对齐

基线解释：书写英语单词时为了规范书写会设有四条线，从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐。

图中绿色的水平线就是基线 TextView2 基线和 TextView1对齐，TextView2设置属性

android:layout_alignBaseline="@id/textView1"

Android中常用的5大布局详述

android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐效果：

Android中常用的5大布局详述

第三类：属性值为具体的像素值，如30dip，40px
android:layout_marginBottom             离某元素底边缘的距离
android:layout_marginLeft                离某元素左边缘的距离
android:layout_marginRight                离某元素右边缘的距离
android:layout_marginTop                离某元素上边缘的距离

例:xml 布局如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@android:color/black"
     tools:cnotallow=".MainActivity" >

     <EditText
         android:id="@+id/editText1"
         android:layout_width="300dp"
         android:layout_height="wrap_content"
         android:layout_alignParentTop="true"
         android:layout_centerHoriznotallow="true"
         android:textSize="30sp"
         android:layout_marginTop="40dp"
         android:background="@android:color/white"
        >
     </EditText>

     <Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignRight="@+id/editText1"
         android:layout_below="@+id/editText1"
         android:layout_marginRight="78dp"
         android:layout_marginTop="19dp"
         android:text="确定" />

     <Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignBaseline="@+id/button1"
         android:layout_alignBottom="@+id/button1"
         android:layout_alignParentRight="true"
         android:text="取消" />

 </RelativeLayout>

效果如下：

Android中常用的5大布局详述

（1），EditText 控件位于父控件的上部使用 layout_alignParentTop；

（1），EditText 控件相对父控件水平居中使用layout_centerHorizontal；

（1），EditText 控件距离上边框 40dp 使用layout_marginTop；

（2），button1控件右边缘和EditText控件的右边缘对齐使用 layout_alignRight；

（2），button1控件在EditText控件的下方使用layout_below；

（2），button1控件距离右边框78dp 使用layout_marginRight；

（2），button1控件距离上边控件 19dp 使用 layout_marginTop；

（3），button2控件与button2控件基线对齐使用layout_alignBaseline；

（3），button2控件下边缘和button2控件的下边缘对齐使用layout_alignBottom；

（3），button2控件贴紧父元素的右边缘layout_alignParentRight；

5.AbsoluteLayout(绝对布局)

绝对布局中将所有的子元素通过设置android:layout_x 和 android:layout_y属性，将子元素的坐标位置固定下来，即坐标(android:layout_x, android:layout_y) ，layout_x用来表示横坐标，layout_y用来表示纵坐标。屏幕左上角为坐标(0,0)，横向往右为正方，纵向往下为正方。实际应用中，这种布局用的比较少，因为Android终端一般机型比较多，各自的屏幕大小。分辨率等可能都不一样，如果用绝对布局，可能导致在有的终端上显示不全等。

在Android2.0 API文档中标明该类已经过期，可以使用FrameLayout或者RelativeLayout来代替。

例：

Android中常用的5大布局详述

XML布局文件：

<?xml version = "1.0" encoding = "utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black"
     >

    <TextView
        android:id="@+id/lable"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_x="30dp"
        android:layout_y="50dp"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_orange_dark"
        android:text="我是绝对布局" />

</AbsoluteLayout>

除上面讲过之外常用的几个布局的属性：
(1)layout_margin
用于设置控件边缘相对于父控件的边距
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom

(2) layout_padding
用于设置控件内容相对于控件边缘的边距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom

(3) layout_width/height
用于设置控件的高度和宽度
wrap_content 内容包裹，表示这个控件的里面文字大小填充
fill_parent 跟随父窗口
match_parent

(4) gravity
用于设置View组件里面内容的对齐方式
top bottom left right center等

(5) android:layout_gravity
layout_gravity是用来设置该view相对与父view 的位置

top bottom left right center等

秒客网

Android中常用的5大布局详述

1. LinearLayout

2.FrameLayout(框架布局)

3.TableLayout(表格布局)

4.RelativeLayout(相对布局)

5.AbsoluteLayout(绝对布局)

相关文章