Android五大布局Layout



Android开发中,我们可能会遇到过一些很复杂的布局,对于初学者来说,可能脑子会嗡的一下,“这么复杂!该怎么整?!”。

不要担心!再复杂的布局其实也是由简单地布局组成的,我们要学会将它分解成基本的布局,那么问题就迎刃而解了。

Android共有五种常见布局方式,分别是:LinearLayout(线性布局),FrameLayout(单帧布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout(表格布局)。

下面首先看一下这些布局的关系

由此我们可以看出所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。

一、LinearLayout,线性布局方式

  这种布局比较常用,也比较简单,就是每个元素占一行,可声明为横向或纵向排放,也就是每个元素占一列。

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

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

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:background="@android:color/holo_blue_bright" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="0.2"
            android:background="@android:color/holo_green_dark" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="0.3"
            android:background="@android:color/holo_orange_dark" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="0.3"
            android:background="@android:color/holo_blue_light" />
        <!--
               android:layout_weight="0.3"   作用:子控件占父控件的比例,即0.3/(0.2+0.3+0.3),
               值得注意的是如果有父布局中有一个子控件有weight值,那么其他同在父布局中的子控件都要有,否则就显示不出来。
        -->
    </LinearLayout>

    <LinearLayout
        android:layout_width="80dp"
        android:layout_height="60dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:background="@android:color/holo_red_dark" >

        <!-- 很容易看出      android:layout_marginBottom="20dp"(离底部20dp)没有起作用,因为LinearLayout是一个控件挨着一个布局的 -->
    </LinearLayout>

</LinearLayout>

效果图:   

二、Relative Layout,相对布局

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

  RelativeLayout是Android五大布局结构中最灵活的一种布局结构,比较适合一些复杂界面的布局。初学者可以利用可视化编辑器直接拖动控件到指定位置,来熟悉相关的位置属性。

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

    <TextView
        android:id="@+id/a1"
        android:layout_width="50dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_green_dark"/>
   <TextView
       android:id="@+id/a2"
       android:layout_width="70dp"
       android:layout_height="60dp"
       android:layout_alignParentTop="true"
       android:layout_marginLeft="36dp"
       android:layout_toRightOf="@+id/a1"
       android:background="@android:color/holo_blue_bright" />

   <TextView
       android:id="@+id/a3"
       android:layout_width="30dp"
       android:layout_height="60dp"
       android:layout_toEndOf="@id/a1"
       android:background="@android:color/holo_orange_dark" />

   <!-- layout_toEndOf和 layout_toRightOf有什么区别??-->

   <TextView
       android:id="@+id/a4"
       android:layout_width="70dp"
       android:layout_height="60dp"
       android:layout_marginLeft="36dp"
       android:layout_below="@id/a2"
       android:background="@android:color/black" />
    <TextView
       android:id="@+id/a5"
       android:layout_width="90dp"
       android:layout_height="30dp"
       android:layout_marginLeft="36dp"
       android:layout_alignParentRight="true"
       android:layout_alignParentBottom="true"
       android:background="@android:color/holo_purple" />

</RelativeLayout>

效果图: 

三、AbsoluteLayout,绝对位置布局

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

<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
  >
  <TextView
      android:layout_width="90dp"
      android:layout_height="30dp"
      android:layout_x="0dp"
      android:layout_y="0dp"
      android:background="@android:color/holo_orange_dark"/>
   <TextView
      android:layout_width="90dp"
      android:layout_height="50dp"
      android:layout_x="100dp"
      android:layout_y="200dp"
      android:background="@android:color/holo_blue_light"/>

   <!-- 绝对布局是写死的坐标,不具有适配性,不建议使用 -->

</AbsoluteLayout>

效果图:

四、FrameLayout,帧布局

  FrameLayout是五大布局中最简单的一个布局,可以说成是层布局方式。在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。并且android:gravity属性失效,但是可以通过layout_marginLeft等进行更改位置。

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

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/holo_blue_bright"/>
     <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/holo_green_light"/>
      <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="60dp"
        android:gravity="bottom"
        android:background="@android:color/holo_red_dark"/>
    <!-- gravity属性无效 -->

</FrameLayout>

效果图: 

五、TableLayout,表格布局

适用于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)                         设置允许被拉伸的列的序列号,多个用逗号隔开

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
  >
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_blue_dark"/>
             <TextView
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_red_dark"/>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="200dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_red_dark"/>
             <TextView
                android:layout_width="10dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_green_dark"/>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_green_dark"/>

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:background="@android:color/holo_blue_dark"/>
        </TableRow>
    <!-- 列的宽度为什么是一致的??? -->

</TableLayout>

效果图:(红色的实际尺寸)

demo地址:http://download.csdn.net/detail/u011747781/8481315

Android布局文件Layout.xml的一些常见属性值:http://blog.csdn.net/google_acmer/article/details/44119741







时间: 2024-10-05 23:47:38

Android五大布局Layout的相关文章

android的五大布局(layout)

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建 筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLayout(线性布局). FrameLayout(单帧布局).RelativeLayout(相对布局).AbsoluteLayout(绝对布局)和 TableLayout(表格布局). LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元

Android五大布局对象--FrameLayout,LinearLayout,AbsoluteLayout,RelativeLayout,TableLayout

出处: http://zwkufo.blog.163.com/blog/static/2588251201011161220635/ 讲一下Android对用五大布局对象,它们分别是FrameLayout(框架布局:不知道是不是这么翻译的),LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout(表格布局). FrameLayout: FrameLayout是最简单的一个布局对象.它被定制为你屏幕上的一个

Android五大布局介绍&amp;属性设置大全

前言 在进行Android开发中,常常需要用到各种布局来进行UI的绘制,今天我们就来讲下Android开发中最常用的五大布局介绍和相关属性的设置. 目录 Android五大布局介绍&属性设置.jpg 一.布局介绍 在Android中,共有五种布局方式,分别是: FrameLayout(框架布局) LinearLayout(线性布局) AbsoluteLayout(绝对布局) RelativeLayout(相对布局) TableLayout(表格布局) 1. FrameLayout框架布局 布局特

浅谈Android五大布局

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLayout(线性布局).FrameLayout(单帧布局).RelativeLayout(相对布局).AbsoluteLayout(绝对布局)和TableLayout(表格布局). LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后

安卓笔记-android五大布局

1.LinearLayout,线性布局     在android项目开发中最经常用到的线性布局,相比相对布局适配度高,不容易因界面改变而变形,LinearLayout可通过设置布局属性orientation来设置子元素水平(horizontal)或垂直排列(vertical) LinearLayout中的子元素属性android:layout_weight生效,它用于描述该子元素在剩余空间中占有的大小比例,如果一个LinearLayout中含有俩个TextView控件.第一个TextView设置

浅谈Android五大布局(二)——RelativeLayout和TableLayout

在浅谈Android五大布局(一)中已经描述了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoulteLayout(绝对布局)三种布局结构,剩下的两种布局RelativeLayout(相对布局)和TableLayout(表格布局)相对之前布局结构稍显复杂一点,所以这里另起篇幅进行介绍. RelativeLayout: RelativeLayout按照各子元素之间的位置关系完成布局.在此布局中的子元素里与位置相关的属性将生效.例如android:layout_be

浅谈Android五大布局(二)——RelativeLayout和TableLayout【转】

http://www.cnblogs.com/wisekingokok/archive/2011/08/24/2152004.html 在浅谈Android五大布局(一)中已经描述了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoulteLayout(绝对布局)三种布局结构,剩下的两种布局RelativeLayout(相对布局)和TableLayout(表格布局)相对之前布局结构稍显复杂一点,所以这里另起篇幅进行介绍. RelativeLayout: Relat

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

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLayout(线性布局).FrameLayout(单帧布局).RelativeLayout(相对布局).AbsoluteLayout(绝对布局)和TableLayout(表格布局). LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后

Android五大布局之一帧布局(FrameLayout)

一.FrameLayout(帧布局)重点: FrameLayout(帧布局)可以说是五大布局中最为简单的一个布局,这个布局会默认把控件放在屏幕上的左上角的区域,后续添加的控件会覆盖前一个,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个控件 二.FrameLayout(帧布局)常用属性: android:foreground:设置改帧布局容器的前景图像 android:foregroundGravity:设置前景图像显示的位置 三.例子: 1.首先先创建一个FrameLayout的X