24848威尼斯(中国)有限公司

在Android开发中，界面设计是开发过程中的一个很重要的部分，今天主要来给大家介绍一下Android开发中主要应用到的一些界面布局。

Android界面设计中应用较多的是以下几个布局：LinearLayout(线性布局)、TableLayout(表格布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)等、帧布局（FrameLayout）。接下来我将对它们来进行详细的介绍。

一、  界面布局之线性布局（LinearLayout）

这种布局比较常用，也比较简单，就是每个元素占一行，把它按照横向排放，也就是每个元素占一列。在布局中都按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。

（1）垂直线性布局

"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:orientation="horizontal"

    tools:context=".MainActivity" >

  "@+id/button1"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"           

           android:text="Button1"

           android:layout_weight="1"

           />

   

"@+id/button2"

                   android:layout_width="wrap_content"

                   android:layout_height="wrap_content"

                   android:text="Button2"

                   android:layout_weight="1"

                   />

 

"@+id/button2"

android:id="@+id/button3"

                    android:layout_width="wrap_content"

              android:layout_height="wrap_content"

    android:text="Button3"

               android:layout_weight="1"

/>

                                            

图一：垂直线性布局

（1）    水平线性布局

将android:orientation="horizontal"设置为vertical,则他的方向为垂直的，具体效果如下图

图二：水平线性布局

二、  界面布局之相对布局（RelativeLayout）

相对布局是android界面设计中比较常用和好用的一个布局方式。

1. 相对布局的属性

相对于兄弟元素
android:layout_below="@id/aaa"：在指定View的下方
android:layout_above="@id/xxx"：在指定View的上方
android:layout_toLeftOf="@id/bbb"：在指定View的左边
android:layout_toRightOf="@id/cccc"：在指定View的右边
相对于父元素
android:layout_alignParentLeft="true"：在父元素内左边
android:layout_alignParentRight="true"：在父元素内右边
android:layout_alignParentTop="true"：在父元素内顶部
android:layout_alignParentBottom="true"：在父元素内底部
对齐方式
android:layout_centerInParent="true"：居中布局
android:layout_centerVertical="true"：水平居中布局
android:layout_centerHorizontal="true"：垂直居中布局
android:layout_alignTop="@id/xxx"：与指定View的上边界一致
android:layout_alignBottom="@id/xxx"：与指定View下边界一致
android:layout_alignLeft="@id/xxx"：与指定View的左边界一致
android:layout_alignRight="@id/xxx"：与指定View的右边界一致
间隔
android:layout_marginBottom=""; 离某元素底边缘的距离
android:layout_marginLeft=""; 离某元素左边缘的距离
android:layout_marginRight ="";离某元素右边缘的距离
android:layout_marginTop=""; 离某元素上边缘的距离
android:layout_paddingBottom=""; 离父元素底边缘的距离
android:layout_paddingLeft=""; 离父元素左边缘的距离
android:layout_paddingRight ="";离父元素右边缘的距离
android:layout_paddingTop=""; 离父元素上边缘的距离

2.用例说明

"http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#000000"

    >

   

        android:id="@+id/label"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="Type here:"

        android:textColor="#ffffff"

        android:textSize="30px"/>

   

        android:id="@+id/entry"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@android:drawable/editbox_background"

        android:layout_below="@id/label"/>

   

        android:id="@+id/ok"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/entry"

        android:layout_alignParentRight="true"

        android:layout_marginLeft="10dip"

         android:textColor="#ffffff"

        android:text="OK" />

   

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_toLeftOf="@id/ok"

        android:layout_alignTop="@id/ok"

         android:textColor="#ffffff"

        android:text="Cancel" />

图三：相对布局

三、  界面布局之表格布局（TableLayout）

表格布局采用行、列的形式来管理元素组件。TableLayout的行和列不需要声明，而是采用添加方法控制。

每次在TableLayout中添加一个TableRow，一个TableRow就代表表格中的一行，也同样是容器，往里面添加一个子组件就代表增加一列。在表格布局中，列的宽度由最宽的那个单元格决定，整个表格布局宽度取决于父容器的宽度。

用例表示：

"http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

   

     android:id="@+id/tableRow1"

     android:layout_height="wrap_content"

     android:gravity="center" >    

    

    android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="用户名" />   

    

     android:id="@+id/userName"

     android:layout_weight="1"

     android:layout_height="wrap_content"

     />   

    

 

     android:id="@+id/tableRow2"

     android:layout_height="wrap_content"

     android:gravity="center">    

    

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="密码" />    

    

     android:id="@+id/password"

     android:layout_weight="1"

     android:layout_height="wrap_content"

     android:inputType="textPassword" 

     />    

    

     android:id="@+id/tableRow4"

     android:layout_height="wrap_content"

     android:gravity="center" >    

    

     android:id="@+id/register"

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="登     陆" />

    

     android:id="@+id/register"

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="取   消" />    

   

图四:表格布局

四、  界面布局之绝对布局（AbsoluteLayout）

特点：以坐标的方式来定位在屏幕上的位置，引起缺乏灵活性，在没有绝对定位的情况下相比其他类型的布局更难维护。

"http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

   

         android:id="@+id/lable1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="10dip"

        android:layout_y="10dip"

        android:text="inputname" />

   

        android:id="@+id/entry"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_y="40dip" />

   

        android:id="@+id/test1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="190dip"

        android:layout_y="100dip"

        android:width="70dip"

        android:text="OK" />

   

        android:id="@+id/test2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

 android:layout_x="260dip"

        android:layout_y="100dip"

       android:width="70dip"

        android:text="Cancle" />

图五：绝对布局

五、  界面布局之帧布局（FrameLayout）

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

用例所示：

"http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    

         android:layout_width="fill_parent"

         android:layout_height="fill_parent"

         android:background="#ff000000"

         android:gravity="center"

         android:text="1"/>

    

         android:layout_width="fill_parent"

         android:layout_height="fill_parent"

         android:background="#ff654321"

         android:gravity="center"

         android:text="2"/>

    

         android:layout_width="50dp"

         android:layout_height="50dp"

         android:background="#fffedcba"

         android:gravity="center"

         android:text="3" />

图六：帧布局