Android软件开发之盘点界面五大布局

 

Android软件开发之盘点界面五大布局

雨松MOMO原创文章如转载，请注明：转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6655494

1.线性布局(LinearLayout)

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

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

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

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

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

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical"  
7.     >  
8. <LinearLayout   
9.     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>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"><LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="horizontal"android:gravity="center_horizontal"android:layout_weight="2"><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/jay"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"android:background="#FF0000"android:textColor="#000000" android:textSize="18dip" /><EditTextandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="水平方向"/></LinearLayout><LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"android:layout_weight="1"><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"android:background="#FF0000"android:textColor="#000000" android:textSize="18dip" /><EditTextandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="垂直方向"/><Buttonandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"/><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/image"/></LinearLayout></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 plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent"  
6.     >  
7.     <EditText  
8.         android:id="@+id/re_edit_0"  
9.         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>  

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"><EditTextandroid:id="@+id/re_edit_0"android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"android:layout_alignParentRight="true"/><ImageViewandroid:id="@+id/re_iamge_0"android:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/jay"android:layout_below="@id/re_edit_0"android:layout_alignParentRight="true"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:background="#FF0000"android:text="努力学习"android:textColor="#000000" android:textSize="18dip" android:layout_toLeftOf="@id/re_iamge_0"/><EditTextandroid:id="@+id/re_edit_1"android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"android:layout_alignParentBottom="true"/><ImageViewandroid:id="@+id/re_iamge_1"android:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/image"android:layout_above="@id/re_edit_1"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:background="#FF0000"android:text="努力工作"android:textColor="#000000" android:textSize="18dip" android:layout_toRightOf="@id/re_iamge_1"android:layout_above="@id/re_edit_1"/></RelativeLayout>


3.帧布局(FrameLayout)

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

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent">  
6.     <ImageView  
7.         android:layout_width="wrap_content"   
8.         android:layout_height="wrap_content"  
9.         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>  

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/g"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="雨松MOMO"android:background="#FF0000"android:textColor="#000000" android:textSize="18dip" /><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/image"android:layout_gravity="bottom"/><EditTextandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="快乐生活每一天喔" android:layout_gravity="bottom"/></FrameLayout>
4.绝对布局(AbsoluteLayout)

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

设置控件的显示坐标点

view plaincopy to clipboardprint?

1. android:layout_x="50dip"  
2.  android:layout_y="30dip"  

android:layout_x="50dip" android:layout_y="30dip"

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent">  
6.     <ImageView  
7.         android:layout_width="wrap_content"   
8.         android:layout_height="wrap_content"  
9.         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>  

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/f"android:layout_x="100dip" android:layout_y="50dip"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="当前坐标点 x = 100dip y = 50 dip"android:background="#FFFFFF"android:textColor="#FF0000" android:textSize="18dip" android:layout_x="50dip" android:layout_y="30dip"/><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/h"android:layout_x="50dip" android:layout_y="300dip"/><TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="当前坐标点 x = 50dip y = 300 dip"android:background="#FFFFFF"android:textColor="#FF0000" android:textSize="18dip" android:layout_x="30dip" android:layout_y="280dip"/></AbsoluteLayout>
5.表格布局(TableLayout)
      
       在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置 ，可以设置显示的缩进，对齐的方式。

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     >  
6.     <ImageView  
7.         android:layout_width="wrap_content"   
8.         android:layout_height="wrap_content"  
9.         android:src="@drawable/g"  
10.         android:layout_gravity="center"  
11.     />  
12.     <TableRow  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="fill_parent"  
15.         android:padding="10dip">  
16.         <TextView  
17.             android:text="姓名"   
18.             android:gravity="left"  
19.             />  
20.         <TextView  
21.             android:text="电话"  
22.             android:gravity="right"/>  
23.     </TableRow>  
24.      
25.     <View  
26.         android:layout_height="2dip"  
27.         android:background="#FFFFFF" />  
28.      
29.     <TableRow  
30.         android:layout_width="wrap_content"  
31.         android:layout_height="fill_parent"  
32.         android:padding="10dip">  
33.         <TextView  
34.             android:text="雨松"   
35.             android:gravity="left"  
36.             />  
37.         <TextView  
38.             android:text="15810463139"  
39.             android:gravity="right"/>  
40.     </TableRow>  
41.       
42.     <TableRow  
43.         android:layout_width="wrap_content"  
44.         android:layout_height="fill_parent"  
45.         android:padding="10dip">  
46.         <TextView  
47.             android:text="小可爱"   
48.             android:gravity="left"  
49.             />  
50.         <TextView  
51.             android:text="15810463139"  
52.             android:gravity="right"/>  
53.     </TableRow>  
54.   
55.     <TableRow  
56.         android:layout_width="wrap_content"  
57.         android:layout_height="fill_parent"  
58.         android:padding="10dip">  
59.         <TextView  
60.             android:text="好伙伴"   
61.             android:gravity="left"  
62.             />  
63.         <TextView  
64.             android:text="15810463139"  
65.             android:gravity="right"/>  
66.     </TableRow>  
67.   
68.     <TableRow  
69.         android:layout_width="wrap_content"  
70.         android:layout_height="fill_parent"  
71.         android:padding="10dip"  
72.         >  
73.         <TextView  
74.             android:text="姓名"   
75.             android:gravity="left"  
76.             />  
77.         <TextView  
78.             android:text="性别"  
79.             android:gravity="right"/>  
80.     </TableRow>  
81.      
82.     <View  
83.         android:layout_height="2dip"  
84.         android:background="#FFFFFF" />  
85.      
86.     <TableRow  
87.         android:layout_width="wrap_content"  
88.         android:layout_height="fill_parent"  
89.         android:padding="10dip"  
90.         >  
91.         <TextView  
92.             android:text="雨松MOMO"   
93.             android:gravity="left"  
94.             />  
95.         <TextView  
96.             android:text="男"  
97.             android:gravity="right"/>  
98.     </TableRow>  
99.       
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>  

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" ><ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:src="@drawable/g"android:layout_gravity="center"/> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="姓名" android:gravity="left" /> <TextView android:text="电话" android:gravity="right"/> </TableRow> <View android:layout_height="2dip" android:background="#FFFFFF" /> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="雨松" android:gravity="left" /> <TextView android:text="15810463139" android:gravity="right"/> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="小可爱" android:gravity="left" /> <TextView android:text="15810463139" android:gravity="right"/> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="好伙伴" android:gravity="left" /> <TextView android:text="15810463139" android:gravity="right"/> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip" > <TextView android:text="姓名" android:gravity="left" /> <TextView android:text="性别" android:gravity="right"/> </TableRow> <View android:layout_height="2dip" android:background="#FFFFFF" /> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip" > <TextView android:text="雨松MOMO" android:gravity="left" /> <TextView android:text="男" android:gravity="right"/> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="小可爱" android:gravity="left" /> <TextView android:text="女" android:gravity="right"/> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:text="好伙伴" android:gravity="left" /> <TextView android:text="男" android:gravity="right"/> </TableRow></TableLayout>

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



最后如果你还是觉得我写的不够详细 看的不够爽 不要紧我把源代码的下载地址贴出来 欢迎大家一起讨论学习雨松MOMO希望可以和大家一起进步。