Android界面五大布局

转自：http://www.xuanyusong.com/archives/133

1.线性布局(LinearLayout)

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

如图所示使用了线性布局的水平方向与垂直方向，从图中可以清晰的看出来所有控件都是按照线性的排列方式显示出来的，这就是线性布局的特点。

设置线性布局为水平方向

android:orientation=”horizontal”
设置线性布局为垂直方向
android:orientation=”vertical”
设置正比例分配控件范围

android:layout_weight=”1″
设置控件显示位置，这里为水平居中
android:gravity=”center_horizontal”

在xml中我使用了LinearLayout 嵌套的方式配置了2个线性布局一个水平显示一个垂直显示。

01
<?xml version="1.0" encoding="utf-8"?> 

02
  
03
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

04
    android:layout_width="fill_parent"

05
    android:layout_height="fill_parent"

06
    android:orientation="vertical"

07
    > 

08
<LinearLayout

09
    android:layout_width="fill_parent"

10
    android:layout_height="fill_parent"

11
    android:orientation="horizontal"

12
    android:gravity="center_horizontal"

13
    android:layout_weight="2"

14
    > 

15
    <ImageView

16
        android:layout_width="wrap_content"

17
        android:layout_height="wrap_content"

18
        android:src="@drawable/jay"

19
    /> 

20
  
21
    <TextView

22
        android:layout_width="wrap_content"

23
        android:layout_height="wrap_content"

24
        android:text="雨松MOMO"

25
        android:background="#FF0000"

26
        android:textColor="#000000"

27
        android:textSize="18dip"

28
    /> 

29
    <EditText

30
        android:layout_width="wrap_content"

31
        android:layout_height="wrap_content"

32
        android:text="水平方向"

33
    /> 

34
</LinearLayout> 

35
  
36
<LinearLayout

37
    android:layout_width="fill_parent"

38
    android:layout_height="fill_parent"

39
    android:orientation="vertical"

40
    android:layout_weight="1"

41
    > 

42
  
43
    <TextView

44
        android:layout_width="wrap_content"

45
        android:layout_height="wrap_content"

46
        android:text="雨松MOMO"

47
        android:background="#FF0000"

48
        android:textColor="#000000"

49
        android:textSize="18dip"

50
    /> 

51
    <EditText

52
        android:layout_width="wrap_content"

53
        android:layout_height="wrap_content"

54
        android:text="垂直方向"

55
    /> 

56
    <Button

57
        android:layout_width="wrap_content"

58
        android:layout_height="wrap_content"

59
        android:text="雨松MOMO"

60
    /> 

61
    <ImageView

62
        android:layout_width="wrap_content"

63
        android:layout_height="wrap_content"

64
        android:src="@drawable/image"

65
    /> 

66
</LinearLayout> 

67
</LinearLayout>

2.相对布局(RelativeLayout)

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

设置距父元素右对齐
android:layout_alignParentRight=”true”
设置该控件在id为re_edit_0控件的下方
android:layout_below=”@id/re_edit_0″
设置该控件在id为re_image_0控件的左边
android:layout_toLeftOf=”@id/re_iamge_0″
设置当前控件与id为name控件的上方对齐
android:layout_alignTop=”@id/name”
设置偏移的像素值
android:layout_marginRight=”30dip”

01
<?xml version="1.0" encoding="utf-8"?> 

02
  
03
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

04
    android:layout_width="fill_parent"

05
    android:layout_height="fill_parent"

06
    > 

07
    <EditText

08
        android:id="@+id/re_edit_0"

09
        android:layout_width="wrap_content"

10
        android:layout_height="wrap_content"

11
        android:text="雨松MOMO"

12
        android:layout_alignParentRight="true"

13
    /> 

14
    <ImageView

15
        android:id="@+id/re_iamge_0"

16
        android:layout_width="wrap_content"

17
        android:layout_height="wrap_content"

18
        android:src="@drawable/jay"

19
        android:layout_below="@id/re_edit_0"

20
        android:layout_alignParentRight="true"

21
    /> 

22
    <TextView

23
        android:layout_width="wrap_content"

24
        android:layout_height="wrap_content"

25
        android:background="#FF0000"

26
        android:text="努力学习"

27
        android:textColor="#000000"

28
        android:textSize="18dip"

29
        android:layout_toLeftOf="@id/re_iamge_0"

30
    /> 

31
    <EditText

32
        android:id="@+id/re_edit_1"

33
        android:layout_width="wrap_content"

34
        android:layout_height="wrap_content"

35
        android:text="雨松MOMO"

36
        android:layout_alignParentBottom="true"

37
    /> 

38
    <ImageView

39
        android:id="@+id/re_iamge_1"

40
        android:layout_width="wrap_content"

41
        android:layout_height="wrap_content"

42
        android:src="@drawable/image"

43
        android:layout_above="@id/re_edit_1"

44
    /> 

45
    <TextView

46
        android:layout_width="wrap_content"

47
        android:layout_height="wrap_content"

48
        android:background="#FF0000"

49
        android:text="努力工作"

50
        android:textColor="#000000"

51
        android:textSize="18dip"

52
        android:layout_toRightOf="@id/re_iamge_1"

53
        android:layout_above="@id/re_edit_1"

54
    /> 

55
</RelativeLayout>

3.帧布局(FrameLayout)

原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。

01
<?xml version="1.0" encoding="utf-8"?> 

02
<FrameLayout

03
    xmlns:android="http://schemas.android.com/apk/res/android"

04
    android:layout_width="fill_parent"

05
    android:layout_height="fill_parent"> 

06
    <ImageView

07
        android:layout_width="wrap_content"

08
        android:layout_height="wrap_content"

09
        android:src="@drawable/g"

10
    /> 

11
    <TextView

12
        android:layout_width="wrap_content"

13
        android:layout_height="wrap_content"

14
        android:text="雨松MOMO"

15
        android:background="#FF0000"

16
        android:textColor="#000000"

17
        android:textSize="18dip"

18
    /> 

19
    <ImageView

20
        android:layout_width="wrap_content"

21
        android:layout_height="wrap_content"

22
        android:src="@drawable/image"

23
        android:layout_gravity="bottom"

24
    /> 

25
    <EditText

26
        android:layout_width="wrap_content"

27
        android:layout_height="wrap_content"

28
        android:text="快乐生活每一天喔"

29
        android:layout_gravity="bottom"

30
    /> 

31
</FrameLayout>

4.绝对布局(AbsoluteLayout)

使用绝对布局可以设置任意控件的在屏幕中 X Y 坐标点，和帧布局一样后绘制的控件会覆盖住之前绘制的控件，笔者不建议大家使用绝对布局还是那句话因为android的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。

设置控件的坐标

`1`	`android:layout_x="50dip"`

`2`	`android:layout_y="30dip"`

01
<?xml version="1.0" encoding="utf-8"?> 

02
  
03
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

04
    android:layout_width="fill_parent"

05
    android:layout_height="fill_parent"> 

06
    <ImageView

07
        android:layout_width="wrap_content"

08
        android:layout_height="wrap_content"

09
        android:src="@drawable/f"

10
        android:layout_x="100dip"

11
        android:layout_y="50dip"

12
    /> 

13
    <TextView

14
        android:layout_width="wrap_content"

15
        android:layout_height="wrap_content"

16
        android:text="当前坐标点 x = 100dip y = 50 dip"

17
        android:background="#FFFFFF"

18
        android:textColor="#FF0000"

19
        android:textSize="18dip"

20
        android:layout_x="50dip"

21
        android:layout_y="30dip"

22
    /> 

23
  
24
    <ImageView

25
        android:layout_width="wrap_content"

26
        android:layout_height="wrap_content"

27
        android:src="@drawable/h"

28
        android:layout_x="50dip"

29
        android:layout_y="300dip"

30
    /> 

31
    <TextView

32
        android:layout_width="wrap_content"

33
        android:layout_height="wrap_content"

34
        android:text="当前坐标点 x = 50dip y = 300 dip"

35
        android:background="#FFFFFF"

36
        android:textColor="#FF0000"

37
        android:textSize="18dip"

38
        android:layout_x="30dip"

39
        android:layout_y="280dip"

40
    /> 

41
</AbsoluteLayout>

5.表格布局(TableLayout)

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

001
<?xml version="1.0" encoding="utf-8"?> 

002
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

003
    android:layout_width="fill_parent"

004
    android:layout_height="fill_parent"

005
    > 

006
    <ImageView

007
        android:layout_width="wrap_content"

008
        android:layout_height="wrap_content"

009
        android:src="@drawable/g"

010
        android:layout_gravity="center"

011
    /> 

012
    <TableRow

013
        android:layout_width="wrap_content"

014
        android:layout_height="fill_parent"

015
        android:padding="10dip"> 

016
        <TextView

017
            android:text="姓名"

018
            android:gravity="left"

019
            /> 

020
        <TextView

021
            android:text="电话"

022
            android:gravity="right"/> 

023
    </TableRow> 

024
  
025
    <View

026
        android:layout_height="2dip"

027
        android:background="#FFFFFF" /> 

028
  
029
    <TableRow

030
        android:layout_width="wrap_content"

031
        android:layout_height="fill_parent"

032
        android:padding="10dip"> 

033
        <TextView

034
            android:text="雨松"

035
            android:gravity="left"

036
            /> 

037
        <TextView

038
            android:text="15810463139"

039
            android:gravity="right"/> 

040
    </TableRow> 

041
  
042
    <TableRow

043
        android:layout_width="wrap_content"

044
        android:layout_height="fill_parent"

045
        android:padding="10dip"> 

046
        <TextView

047
            android:text="小可爱"

048
            android:gravity="left"

049
            /> 

050
        <TextView

051
            android:text="15810463139"

052
            android:gravity="right"/> 

053
    </TableRow> 

054
  
055
    <TableRow

056
        android:layout_width="wrap_content"

057
        android:layout_height="fill_parent"

058
        android:padding="10dip"> 

059
        <TextView

060
            android:text="好伙伴"

061
            android:gravity="left"

062
            /> 

063
        <TextView

064
            android:text="15810463139"

065
            android:gravity="right"/> 

066
    </TableRow> 

067
  
068
    <TableRow

069
        android:layout_width="wrap_content"

070
        android:layout_height="fill_parent"

071
        android:padding="10dip"

072
        > 

073
        <TextView

074
            android:text="姓名"

075
            android:gravity="left"

076
            /> 

077
        <TextView

078
            android:text="性别"

079
            android:gravity="right"/> 

080
    </TableRow> 

081
  
082
    <View

083
        android:layout_height="2dip"

084
        android:background="#FFFFFF" /> 

085
  
086
    <TableRow

087
        android:layout_width="wrap_content"

088
        android:layout_height="fill_parent"

089
        android:padding="10dip"

090
        > 

091
        <TextView

092
            android:text="雨松MOMO"

093
            android:gravity="left"

094
            /> 

095
        <TextView

096
            android:text="男"

097
            android:gravity="right"/> 

098
    </TableRow> 

099
  
100
    <TableRow

101
        android:layout_width="wrap_content"

102
        android:layout_height="fill_parent"

103
        android:padding="10dip"> 

104
        <TextView

105
            android:text="小可爱"

106
            android:gravity="left"

107
            /> 

108
        <TextView

109
            android:text="女"

110
            android:gravity="right"/> 

111
    </TableRow> 

112
  
113
    <TableRow

114
        android:layout_width="wrap_content"

115
        android:layout_height="fill_parent"

116
        android:padding="10dip"> 

117
        <TextView

118
            android:text="好伙伴"

119
            android:gravity="left"

120
            /> 

121
        <TextView

122
            android:text="男"

123
            android:gravity="right"/> 

124
    </TableRow> 

125
  
126
</TableLayout>

Android五大布局的基本使用方法已经介绍完，最后笔者在这里强调一下在开发与学习中建议大家使用相对布局，首先它的方法属性是最强大的其次它基本可以实现其它4大布局的效果，当然这里说的不是全部有时候还是须要使用其他布局，所以笔者建议大家开发中以实际情况定夺，以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局