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个线性布局 一个水平显示 一个垂直显示。

view source

 

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”

view source

 

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 所以后者就覆盖在了前者上面。

view source

 

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的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。

设置控件的坐标

view source

 

1	android:layout_x="50dip"

2	android:layout_y="30dip"

 

view source

 

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 可以设置 表格中每一行显示的内容 以及位置 ，可以设置显示的缩进，对齐的方式。

view source

 

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大布局的效果，当然这里说的不是全部 有时候还是须要使用其他布局， 所以笔者建议大家开发中以实际情况定夺，以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局