界面布局

LinearLayout（线性布局）

线性布局就是水平(android:orientation="horizontal")地或垂直(android:orientation="vertical")地依次排列元素。

几个例子：

源码：

<?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:id="@+id/tv1"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:textSize="50dip"

    android:textColor="#000000"

    android:text="第一层"/>

<TextView 

    android:id="@+id/tv2"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:textSize="40dip"

    android:textColor="#ffff00"

    android:text="第二层"/>

<TextView 

    android:id="@+id/tv3"

    android:layout_width="fill_content"

    android:layout_height="wrap_content"

    android:textSize="30dip"

    android:textColor="#ff00ff"

    android:text="第三层"/>

<TextView 

    android:id="@+id/tv4"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:textSize="20dip"

    android:textColor="#00ffff"

    android:layout_centerVertical="true"

    android:text="第四层"/>

</LinearLayout>

效果如图

讲垂直排列换成水平排列

android:orientation="horizontal"

效果

第一个文本框的layout_width是fill_parent，即宽度占据整个屏幕，而这四个文本框只能在同一行排列，所以后三个文本框被第一个元素挤出屏幕。

把四个文本框的layout_width改成wrap_content，自适应大小

layout_width="wrap_content"

效果

依次排列

在第三个文本框里面加一条定义

 android:layout_margin="20dip"

第三个文本框与上下左右都有了20dip的间距

RelativeLayout（相对布局）

 RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。在指定位置关系时，引用的ID必须在引用之前，先被定义，否则将出现异常。RelativeLayout是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                   离某元素上边缘的距离 

小例

源码

<?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="#3300FF" 

android:gravity="center" 

android:layout_alignParentTop="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_below="@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_below="@id/text_01" android:text="3"/>

</RelativeLayout>

效果

五大布局使用时机：

1、常用的是linearlayou和relativelayout

2、TableLayout适用于M行N列的布局格式

 <TableLayout>

                       <TableRow>

                                                              <EditText></EditText>

                                                              <EditText></EditText>

                        </TableRow>

                         <TableRow>

                                                               <EditText></EditText>

                                                               <EditText></EditText>

                          </TableRow>

       </TableLayout>

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

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

*如果你是其他语言转过来有点不适应Android的布局方式，你可以用AbsoluteLayout（绝对布局）。

一个总结：

在 android 中我们常用的布局方式有这么几种：

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中的绝对布局一样，一般不推荐使用 )