Android之页面5大布局

原本也是自己新浪博客的一篇文章，搬移至此！！！

原文链接：http://blog.sina.com.cn/s/blog_87736c410100tt3g.html

所谓布局是给开发者程序员提供一种描述程序中各种界面元素相互之间位置关系的途径，使页面上的组件最大程度的按照开发者所构思的排布在用户界面上。

 

     Android操作系统中的布局采用离散数学中的“树”的思想。整个屏幕是唯一的根节点，其余的界面元素按照层次关系组织，最后显示的组件就好似是“树叶”。在XML布局文件中的书写格式尤其体现了“树”的层次结构。

 

     Android系统显示用户界面时需要两次扫描布局文件。

     第一次是评估记录每个元素需要占用屏幕的空间。第二次是从整个屏幕（或者说是“树跟”）出发，逐层推进，每个父元素根据子元素的属性和布局规则对其进行适当的摆放。系统会尽量使每个子元素都在屏幕上显示出来。

 

    下面就让我们来慢慢了解Android系统的5大常用布局吧！

 

一．LinearLayout（线性布局）：

    这是我们写HelloWorld时系统初始化时使用的布局。也是最长用的布局。按照LinearLayout布局，其元素线性排列，一行或者一列。一行时所有的组件高度都和最高的组件一样；一列时所有组件宽度都和最宽的一样。

二．FrameLayout（框架布局）：

    这个布局一般只用于单个组件的显示。组件被置于屏幕的左上角。若存在多个组件，则会叠加显示或者覆盖。

三．TableLayout（表格布局）：

    和名字一样，这个布局是将组件按照表格的形式进行排列。并且在排列时会以一行或者一列中最高的或者最宽的单元个，以保持表格的美观。

四．AbsoluteLayout（绝对位置布局）：

    绝对位置布局会不通过系统而进行页面布置。绝对位置布局可以定义组件的坐标，使其完全按照开发者的意图进行显示。但缺点就是在一个特定机型上可以完好的运行和显示的程序可能到另一个手机机型上无法显示或者和预期的不一样。就好比Android系统中的尺寸可以有多种描述，px，dip，sp，pts，in...举例其中的px是以像素为单位标记的尺寸大小，无论一个设备的物理尺寸多大，指定了像素不变则在不同像素分辨率显示设备上显示出来的尺寸未必相同。

五．RelativeLayout（相对位置布局）：

相对位置布局也好理解，根据其他组件的相对位置进行组件摆放定位。

 

 

下面让我们来看看怎么实现吧！

 

下面只列举最最简单XML布局文件的实现方法，以便大家理解。

 

1.LinearLayout（线性布局）：

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

    >

    <!-- orientation属性是设置竖排（vertical）还是 横排（horizontal）-->

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:text="TextView1"

    />

<Button 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Button1"

    />

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:text="TextView2"

    />

<Button 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Button2"

    />

<EditText 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content" 

    android:hint="EditView1"

    />

</LinearLayout>

显示结果：

2.FrameLayout（框架布局）：

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

    >

<Button  

    android:layout_width="300dip" 

    android:layout_height="300dip"

    android:text="Button Button Button Button"

    />

<EditText 

    android:layout_width="250dip" 

    android:layout_height="250dip"

    android:text="EditText EditText EditText"

    />

<TextView 

    android:layout_width="150dip"

    android:layout_height="150dip"

    android:text="TextView TextView"

    android:textSize="30dip"

    />

</FrameLayout>

 

3.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:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1行1列"

            />

        <Button 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1行2列"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1行3列"

            />

    </TableRow>

    <TableRow 

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        >

        <Button 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2行1列"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2行2列"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2行3列"

            />

    </TableRow>

</TableLayout>

 

4.AbsoluteLayout（绝对位置布局）：

<?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="wrap_content"

       android:layout_height="wrap_content" 

       android:layout_x="0dip"

       android:layout_y="0dip"

       android:text="左上角"

       />

    <Button 

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_x="130dip"

       android:layout_y="150dip"

       android:text="中间"

       />

    <EditText 

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_x="230dip"

       android:layout_y="300dip"

       android:hint="右下角"

       />

</AbsoluteLayout>

 

5.RelativeLayout（相对位置布局）：

  <?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/TextView01" 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" 

    android:text="文本1"

    android:gravity="top"

    />

<Button 

    android:id="@+id/Button01"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="按钮1"

    android:layout_toRightOf="@+id/TextView01"

    />

<TextView 

    android:id="@+id/TextView02" 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" 

    android:text="文本2"

    android:layout_below="@+id/Button01"

    />

<Button 

    android:id="@+id/Button02" 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" 

    android:text="按钮2"

    android:layout_toRightOf="@+id/Button01"

    />

</RelativeLayout>

上面只是一些基本代码，关于这些布局的属性设置还有很多。

 

并且根据树的思想，布局中也是可以嵌套布局的。

 

 

在设置用户页面时，需要反复调试，不断改进，需要耐心。