【ALearning】第四章 Android Layout组件布局(一)

在本章中，我们将Android学习组件布局。在前面的章节，我们也开始使用LinearLayout布局。然后我们在布局文件更加具体的学习和理解，会。

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

Android的五大布局各自是LinearLayout（线性布局）、FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）和TableLayout（表格布局）。

1、线性布局(LinearLayout)

       线性布局的形式能够分为两种，第一种横向线性布局 另外一种纵向线性布局，总而言之都是以线性的形式 一个个排列出来的，纯线性布局的缺点是非常不方便改动控件的显示位置，所以开发中常常会以线性布局与相对布局嵌套的形式设置布局。

2、帧布局(FrameLayout)

       原理是在控件中绘制不论什么一个控件都能够被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。

3、绝对布局(AbsoluteLayout)

      使用绝对布局能够设置随意控件的 在屏幕中 X Y 坐标点，和帧布局一样后绘制的控件会覆盖住之前绘制的控件。

4、相对布局(RelativeLayout)

      相对布局是android布局中最为强大的。首先它能够设置的属性是最多了，其次它能够做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局 它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。

5、表格布局(TableLayout)

      在表格布局中能够设置TableRow 能够设置 表格中每一行显示的内容 以及位置 ，能够设置显示的缩进。对齐的方式。

【博客专栏：http://blog.csdn.net/column/details/alearning.html】

LinearLayout （线性布局）

       LinearLayout依照垂直或者水平的顺序依次排列子元素。每个子元素都位于前一个元素之后。不仅LinearLayout布局能够嵌套使用。其它的布局方式也能够嵌套使用。

LinearLayout中的子元素属性android:layout_weight的作用是描写叙述该子元素在剩余空间中占有的大小比例，默认值就为0。

本例拓展的属性配置是：

• android:layout_weight   权重

       假设LinearLayout中有两个不等长的文本框(TextView等)，那么他们的android:layout_weight值分别为1和2，那么第一个文本框将占领剩余空间的三分之二。第二个文本框将占领剩余空间中的三分之中的一个。android:layout_weight遵循数值越小，重要度越高的原则。本例演示时android:layout_weight都为1。所以两个LinearLayout平均分配宽度。

【布局文件】activity_linearlayout.xml

<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <!-- 单个LinearLayout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#99CCFF"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:text="#99CCFF" />
    </LinearLayout>

    <!-- 单个LinearLayout下包括两个水平平均分布的LinearLayout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#CCFF66"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="#CCFF66" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FF9900"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="#FF9900" />
        </LinearLayout>
    </LinearLayout>

    <!-- 以上两种情况的叠加 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#CC99CC"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:gravity="center"
                android:text="#CC99CC" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#CC9933"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="#CC9933" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#99CCCC"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="#99CCCC" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

效果截图：

FrameLayout （帧布局）

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

本例拓展的属性配置是：

• android: gravity 指定控件的基本位置

注：该属性之前也有介绍过，本例特殊之处。旨在说明假设给此属性指定两个參数时。能够用採用下面格式，以“|”连接。

android:gravity="bottom|center"

【布局文件】activity_framelayoutt.xml

<?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">
    <TextView android:layout_height="match_parent"
        android:background="#99CCFF"
        android:layout_width="match_parent"
        android:gravity="bottom|center"
        android:text="第一层\n【#99CCFF】"/>

     <TextView android:layout_height="200dp"
         android:background="#CC99CC"
        android:layout_width="200dp"
        android:gravity="bottom|center"
        android:text="第二层\n【#CC99CC】"/>

     <TextView android:layout_height="100dp"
        android:layout_width="100dp"
        android:gravity="bottom|center"
        android:background="#99CCCC"
        android:text="第三层\n【#99CCCC】"/>

</FrameLayout>

效果截图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFob2tpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

AbsoluteLayout （绝对布局）

        AbsoluteLayout是绝对位置布局。

在此布局中的子元素的android:layout_x和android:layout_y属性将生效，用于描写叙述该子元素的坐标位置。屏幕左上角为坐标原点（0,0）。第一个0代表横坐标，向右移动此值增大，第二个0代表纵坐标，向下移动，此值增大。

在此布局中的子元素能够相互重叠。在实际开发中，通常不採用此布局格式，由于它的界面代码过于刚性，以至于有不能非常好的适配各种各样的终端设备。

本例拓展的属性配置是：

• android:layout_x 指定控件的x轴的位置
• android:layout_y 指定控件的y轴的位置

【布局文件】activity_absolutelayout.xml。

<?

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" >

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="30dp"
        android:layout_y="30dp"
        android:background="#009966"
        android:text="#009966" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="90dp"
        android:layout_y="80dp"
        android:background="#CC6699"
        android:text="#CC6699" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="30dp"
        android:layout_y="180dp"
        android:background="#3366CC"
        android:text="#3366CC" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="180dp"
        android:layout_y="90dp"
        android:background="#FFCC99"
        android:text="#FFCC99" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="240dp"
        android:layout_y="200dp"
        android:background="#FF6666"
        android:text="#FF6666" />

</AbsoluteLayout>

效果截图：

參考资料

1、http://blog.chinaunix.net/uid-23544029-id-2985631.html

2、http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

3、http://blog.csdn.net/jzp12/article/details/7590591