浅谈Android五大布局——LinearLayout、FrameLayout、AbsoulteLayout、RelativeLayout和TableLayout

Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建 筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。Android的五大布局分别是LinearLayout（线性布局）、 FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）和 TableLayout（表格布局）。

　　LinearLayout：

　　LinearLayout按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。如果是垂直排列，那么将是一个N行单列的 结构，每一行只会有一个元素，而不论这个元素的宽度为多少；如果是水平排列，那么将是一个单行N列的结构。如果搭建两行两列的结构，通常的方式是先垂直排列两个元素，每一个元素里再包含一个LinearLayout进行水平排列。

　　LinearLayout中的子元素属性android:layout_weight生效，它用于描述该子元素在剩余空间中占有的大小比例。加 入一行只有一个文本框，那么它的默认值就为0，如果一行中有两个等长的文本框，那么他们的android:layout_weight值可以是同为1。如 果一行中有两个不等长的文本框，那么他们的android:layout_weight值分别为1和2，那么第一个文本框将占据剩余空间的三分之二，第二 个文本框将占据剩余空间中的三分之一。android:layout_weight遵循数值越小，重要度越高的原则。显示效果如下：

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff000000" android:text="@string/hello"/>
 <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff654321" android:layout_weight="1" android:text="1"/>
 <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#fffedcba" android:layout_weight="2"  android:text="2"/>
 </LinearLayout>
 </LinearLayout>

　　FrameLayout：

　　FrameLayout是五大布局中最简单的一个布局， 在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。显示效果如下，第一个TextView被第二个TextView完全遮挡，第三个TextView遮挡了第二 个TextView的部分位置。

 

 

<?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff000000" android:gravity="center" android:text="1"/>
 <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff654321" android:gravity="center" android:text="2"/>
 <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:text="3"/>
 </FrameLayout>

 

 

　　AbsoluteLayout：

　　AbsoluteLayout是绝对位置布局。 在此布局中的子元素的android:layout_x和android:layout_y属性将生效，用于描述该子元素的坐标位置。屏幕左上角为坐标原 点（0,0），第一个0代表横坐标，向右移动此值增大，第二个0代表纵坐标，向下移动，此值增大。在此布局中的子元素可以相互重叠。在实际开发中，通常不 采用此布局格式，因为它的界面代码过于刚性，以至于有可能不能很好的适配各种终端。显示效果如下：

 

<?xml version="1.0" encoding="utf-8"?>
 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ffffffff" android:gravity="center" android:layout_x="50dp" android:layout_y="50dp" android:text="1"/>
 <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_x="25dp" android:layout_y="25dp" android:text="2"/>
 <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>
 </AbsoluteLayout>

 

RelativeLayout：

　　RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。例如 android：layout_below, android:layout_above等。子元素就通过这些属性和各自的ID配合指定位置关系。注意在指定位置关系时，引用的ID必须在引用之前，先 被定义，否则将出现异常。

　　RelativeLayout里常用的位置属性如下：
　　　　android:layout_toLeftOf —— 该组件位于引用组件的左方
　　　　android:layout_toRightOf —— 该组件位于引用组件的右方
　　　　android:layout_above —— 该组件位于引用组件的上方
　　　　android:layout_below —— 该组件位于引用组件的下方
    　　 android:layout_alignParentLeft —— 该组件是否对齐父组件的左端
    　　 android:layout_alignParentRight —— 该组件是否齐其父组件的右端
    　　 android:layout_alignParentTop —— 该组件是否对齐父组件的顶部
    　　 android:layout_alignParentBottom —— 该组件是否对齐父组件的底部
　　　　android:layout_centerInParent —— 该组件是否相对于父组件居中
　　　　android:layout_centerHorizontal —— 该组件是否横向居中
　　　　android:layout_centerVertical —— 该组件是否垂直居中

　　RelativeLayout是Android五大布局结构中最灵活的一种布局结构，比较适合一些复杂界面的布局。下面示例就展示这么一个情况，第一个文本框与父组件的底部对齐，第二个文本框位于第一个文本框的上方，并且第三个文本框位于第二个文本框的左方。

<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TextView android:id="@+id/text_01" android:layout_width="50dp" android:layout_height="50dp" android:background="#ffffffff" android:gravity="center" android:layout_alignParentBottom="true" android:text="1"/>
 <TextView android:id="@+id/text_02" android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_above="@id/text_01" android:layout_centerHorizontal="true" android:text="2"/>
 <TextView android:id="@+id/text_03" android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:layout_toLeftOf="@id/text_02" android:layout_above="@id/text_01" android:text="3"/>
 </RelativeLayout>

 

TableLayout：

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

　　TableRow是LinearLayout的子类，它的android:orientation属性值恒为horizontal，并且它的 android:layout_width和android:layout_height属性值恒为MATCH_PARENT和 WRAP_CONTENT。所以它的子元素都是横向排列，并且宽高一致的。这样的设计使得每个TableRow里的子元素都相当于表格中的单元格一样。在 TableRow中，单元格可以为空，但是不能跨列。

　　下面示例演示了一个TableLayout的布局结构，其中第二行只有两个单元格，而其余行都是三个单元格。

<?xml version="1.0" encoding="utf-8"?>
  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
  <TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/>
  <TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
  <TextView  android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>
  </TableRow>
  <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
  <TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
 <TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>        
 </TableRow>
 <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
 <TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>
 <TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
 <TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/>        
 </TableRow>
 </TableLayout>

　

1.LinearLayout ( 线性布局 ) ：(里面只可以有一个控件，并且不能设计这个控件的位置，控件会放到左上角)

线性布局分为水平线性和垂直线性二者的属性分别为： android:orientation= " horizontal "   android:orientation= "vertical" 。

 2.RelativeLayout ( 相对布局 ) ： (里面可以放多个控件，但是一行只能放一个控件)

附加几类 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          本元素的右边缘和某元素的的右边缘对齐

 

第三类：属性值为具体的像素值，如 30dip ， 40px

android:layout_marginBottom              离某元素底边缘的距离

android:layout_marginLeft                 离某元素左边缘的距离

android:layout_marginRight                离某元素右边缘的距离

android:layout_marginTop                  离某元素上边缘的距离

 

 

3.TableLayout ( 表格布局 ) ： (这个要和TableRow配合使用，很像html里面的table)

      这个表格布局不像HTML中的表格那样灵活，只能通过 TableRow 属性来控制它的行而列的话里面有几个控件就是几列(一般情况)。 如：

       

<TableLayout>
    <TableRow>
          <EditText></EditText>
          <EditText></EditText>
    </TableRow>
    <TableRow>
          <EditText></EditText>
          <EditText></EditText>
    </TableRow>
</TableLayout>

表示两行两列的一个表格。

android:gravity="center" 书面解释是权重比。其时就是让它居中显示。它还可以动态添加里面的每行每列。如下代码所示:

/*根据id查找表格对象*/

TableLayout tableLayout = (TableLayout) findViewById(R.id.table01);

/*创建列对象*/

TableRow tableRow = new TableRow(this);

/*文本框对象*/

TextView temp = new TextView(this);

temp.setText("text的值");

/*将此文本添加到列中*/

tableRow.addView(temp);

android:stretchColumns="1,2,3,4" 它的意思就是自动拉伸1,2,3,4列。                                       

4.AbsoluteLayout ( 绝对布局 ) ： (里面可以放多个控件，并且可以自己定义控件的x,y的位置)

5.FrameLayout ( 帧布局 ) ：(里面可以放多个控件，不过控件的位置都是相对位置)

                               在它里面的控件都是按后面的一个控件叠加在前一个控件上来显示的,所有元素都被放置在最左上角。 如：

                                     

<FrameLayout android:layout_width="wrap_content"
                                                       android:layout_height="wrap_content" android:layout_weight="1">
<ImageView android:id="@+id/iv1" android:layout_width="wrap_content"
                                                         android:layout_height="wrap_content" android:visibility="invisible"
                                                           android:src="@drawable/lotusleaf"></ImageView>
<ImageView android:id="@+id/f1" android:layout_width="wrap_content"
                                                           android:layout_height="wrap_content" android:src="@drawable/frog_right"
                                                            android:visibility="invisible"></ImageView>
</FrameLayout> 

表示的是id为f1的控件叠加在id为iv1的控件上面显示

           (LinearLayout 和 RelativeLayout 应该又是其中用的较多的两种。AbsoluteLayout 比较少用，因为它是按屏幕的绝对位置来布局的如果屏幕大小发生改变的话控件的位置也发生了改变。这个就相当于HTML中的绝对布局一样，一般不推荐使用 )  

 

六、滚动 属性详解
ScrollView

main.xml布局文件
ScrollView滚动视图是指当拥有很多内容，屏幕显示不完时，需要通过滚动跳来显示的视图。
ScrollView只支持垂直滚动。

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< ScrollView xmlns:android = " http://schemas.android.com/apk/res/android "
android:layout_width = " fill_parent "
android:layout_height = " fill_parent "
android:scrollbars = " vertical " >
< LinearLayout android:orientation = " vertical "
android:layout_width = " fill_parent "
android:layout_height = " fill_parent " >
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
< ImageView android:layout_width = " wrap_content "
android:layout_height = " wrap_content "
android:src = " @drawable/p1 "
android:layout_gravity = " center_horizontal " />
</ LinearLayout >
</ ScrollView >

显示效果

android布局属性

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 本元素的右边缘和某元素的的右边缘对齐 
第三类：属性值为具体的像素值，如30dip，40px 
android:layout_marginBottom 离某元素底边缘的距离 
android:layout_marginLeft 离某元素左边缘的距离 
android:layout_marginRight 离某元素右边缘的距离 
android:layout_marginTop 离某元素上边缘的距离 

EditText的android:hint 
设置EditText为空时输入框内的提示信息。 
android:gravity　 
android:gravity属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．以button为例，android:gravity="right"则button上面的文字靠右 
android:layout_gravity 
android:layout_gravity是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里，你想把该button放在靠左、靠右等位置就可以通过该属性设置．以button为例，android:layout_gravity="right"则button靠右 

android:layout_alignParentRight 
使当前控件的右端和父控件的右端对齐。这里属性值只能为true或false，默认false。 
android:scaleType： 
android:scaleType是控制图片如何resized/moved来匹对ImageView的size。ImageView.ScaleType / android:scaleType值的意义区别： 
CENTER /center 按图片的原来size居中显示，当图片长/宽超过View的长/宽，则截取图片的居中部分显示 
CENTER_CROP / centerCrop 按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽) 
CENTER_INSIDE / centerInside 将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽 
FIT_CENTER / fitCenter 把图片按比例扩大/缩小到View的宽度，居中显示 
FIT_END / fitEnd 把图片按比例扩大/缩小到View的宽度，显示在View的下部分位置 
FIT_START / fitStart 把图片按比例扩大/缩小到View的宽度，显示在View的上部分位置 
FIT_XY / fitXY 把图片不按比例扩大/缩小到View的大小显示 
MATRIX / matrix 用矩阵来绘制，动态缩小放大图片来显示。 
Drawable文件夹里面的图片命名是不能大写的。

七、个别属性说明

Android fill_parent、wrap_content和match_parent的区别

三个属性都用来适应视图的水平或垂直大小，一个以视图的内容或尺寸为基础的布局比精确地指定视图范围更加方便。

1）fill_parent

设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。

2） wrap_content

设置一个视图的尺寸为wrap_content将强制性地使视图扩展以显示全部内容。以TextView和ImageView控件为例，设置为wrap_content将完整显示其内部的文本和图像。布局元素将根据内容更改大小。设置一个视图的尺寸为wrap_content大体等同于设置Windows控件的Autosize属性为True。

3）match_parent
   Android2.2中match_parent和fill_parent是一个意思 .两个参数意思一样，match_parent更贴切，于是从2.2开始两个词都可以用。那么如果考虑低版本的使用情况你就需要用fill_parent了

android五大布局居中对齐方式

1.LinearLayout(线性布局)

如果是要把imagebutton之类的控件居中对齐的话，要用android:layout_gravity  代码如下:

 <LinearLayout
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             android:layout_gravity="center_horizontal"
             >

             <ImageView
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="20dp"
                 android:src="@drawable/ic_mytce" />

         </LinearLayout>

如果是textview之类文本控件就不能像上面那样设置了，要用android:gravity="center"，  这个用于文本对齐

 

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

 

<TextView android:id="@+id/text_02" android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_above="@id/text_01" android:layout_centerHorizontal="true" android:text="2"/>

 

</RelativeLayout>

5.TableLayout（表格布局）

暂时没使用过，就不说了。

 

 

            <LinearLayout
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             
             >
             <TextView
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:gravity="center"
                 android:layout_marginTop="8dp"
                 android:textColor="#3A3C3B"
                 android:textSize="14dp"
                 android:text="版本号1.0"
                />

         </LinearLayout>

 

2.FrameLayout(单帧布局)

因为它的特证就是，所有的子元素都只会显示窗口的左上角，而且下一个子元素会覆盖上一个子元素，所以理论上控件是不可以居中的；只有在textview文本控件的情况下可文本局中；

 

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

    <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff000000" android:gravity="center" android:text="1"/>

 

</FrameLayout>

3.AbsoluteLayout（绝对布局）

它要定位就要确定绝对的x,y的坐标，如果你能获取到你手机屏幕的像素值，它用起来还是很好的

 

 

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

  

    <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba"

android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>


</AbsoluteLayout>

 

4.RelativeLayout（相对布局）
这个我个人很喜欢，很灵活，用得也很多；它指定居中非常简单，直接android:layout_centerHorizontal="true"就行了