因为学习比较晚,我用的相关版本为SDK4.1、eclipse4.2,而自己看的教材都是低版本的,这造成了细节上的不同,有时候给学习造成了不小的困扰,不过这样也好,通过解决问题获得的知识理解更加深刻一点,这篇文章就是因为版本不同这个原因由来的。
使用上面说的版本新建一个Android项目,然后打开main.xml文件,注意看代码:
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:layout_width="wrap_content"
8. android:layout_height="wrap_content"
9. android:layout_centerHorizontal="true"
10. android:layout_centerVertical="true"
11. android:text="@string/hello_world"
12. tools:context=".Main" />
13.
14. </RelativeLayout>
RelativeLayout,这个就是五种布局的其中之一,而大多数教材上面讲的都是LinearLayout布局,布局的不同造成模拟机界面显示的不同,为了避免再次困然,先把五种布局都了解一下吧。
五个布局对象:RelativeLayout、LinearLayout、TableLayout、FrameLayout、AbsoulteLayout。
布局一:
相对布局RelativeLayout,定义各控件之间的相对位置关系,通过位置属性和各自的ID配合指定位置关系,在指定位置关系时引用的ID必须在引用之前先被定义,否则将出现异常。
layout/main.xml的代码
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:background="#FFFFFF"
11. android:text="@string/first" />
12.
13. <TextView
14. android:id="@+id/secondText"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:background="#FFFF00"
18. android:text="@string/second" />
19.
20. <TextView
21. android:id="@+id/thirdText"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:background="#FF00FF"
25. android:text="@string/third" />
26.
27. <TextView
28. android:id="@+id/fourthText"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:background="#00FFFF"
32. android:text="@string/fourth" />
33.
34. </RelativeLayout>
定义了4个文本标签,各自的文本值(下面几种布局使用同样的strings.xml文件)
1. <string name="first">First</string>
2. <string name="second">Second</string>
3. <string name="third">Third</string>
4. <string name="fourth">Fourth</string>
为了清晰展示,从一到四标签的背景颜色为白黄红绿,注意看上面没有定义任何相对位置属性,结果:
都重合到一起了,这说明在没有定义相对位置属性的情况下,所有标签都是相对于屏幕左上角布局的,现在更改一下main.xml的代码:
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:background="#FFFFFF"
11. android:text="@string/first" />
12.
13. <TextView
14. android:id="@+id/secondText"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:background="#FFFF00"
18. android:layout_below="@id/firstText"
19. android:text="@string/second" />
20.
21. <TextView
22. android:id="@+id/thirdText"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:background="#FF00FF"
26. android:layout_below="@id/secondText"
27. android:text="@string/third" />
28.
29. <TextView
30. android:id="@+id/fourthText"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:background="#00FFFF"
34. android:layout_below="@id/thirdText"
35. android:text="@string/fourth" />
36.
37. </RelativeLayout>
从二开始、每个标签都加了一个属性android:layout_below,意思是该组件位于引用组件的下方,而引用的组件就是这个属性值里面的内容“@id/要引用的id名”。然后再运行一下,看结果:
OK,符合预期,这就是相对布局,下面列出所有的位置属性以及他们代表的意思,参考一下:
android:layout_above 位于引用组件的上方
android:layout_below 位于引用组件的下方
android:layout_toLeftOf 位于引用组件的左方
android:layout_toRightOf 位于引用组件的右方
android:layout_alignParentTop 是否对齐父组件的顶部
android:layout_alignParentBottom 是否对齐父组件的底部
android:layout_alignParentLeft 是否对齐父组件的左端
android:layout_alignParentRight 是否齐其父组件的右端
android:layout_centerInParent 是否相对于父组件居中
android:layout_centerHorizontal 是否横向居中
android:layout_centerVertical 是否垂直居中
另外可能会用到:ViewGroup.LayoutParams.WRAP_CONTENT,在main.java中可以动态添加控件,这个是添加的控件长宽自适应内容。
布局二:
线性布局LinearLayout,按照垂直或者水平的顺序依次排列子元素(如果不指定,默认为水平),每一个子元素都位于前一个元素之后。这样形成单行N列,或者单列N行的布局;如果想要N行N列,可以嵌套使用LinearLayout。先看看效果:
layout/main.xml
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:background="#FFFFFF"
11. android:text="@string/first" />
12.
13. <TextView
14. android:id="@+id/secondText"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:background="#FFFF00"
18. android:text="@string/second" />
19.
20. <TextView
21. android:id="@+id/thirdText"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:background="#FF00FF"
25. android:text="@string/third" />
26.
27. <TextView
28. android:id="@+id/fourthText"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:background="#00FFFF"
32. android:text="@string/fourth" />
33.
34. </LinearLayout>
这里没有指定任何属性,显示如下,可以看到4个标签水平依次排列:
现在略微修改一下代码,在LinearLayout节点内添加属性android:orientation="vertical",显示如下:
再来演示下N行N列的布局方法,使用嵌套结构,还是main.xml代码:
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6.
7. <LinearLayout
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:orientation="horizontal" >
11.
12. <TextView
13. android:id="@+id/firstText"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:background="#FFFFFF"
17. android:text="@string/first" />
18.
19. <TextView
20. android:id="@+id/secondText"
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:background="#FFFF00"
24. android:text="@string/second" />
25. </LinearLayout>
26.
27. <LinearLayout
28. android:layout_width="match_parent"
29. android:layout_height="wrap_content"
30. android:orientation="horizontal" >
31.
32. <TextView
33. android:id="@+id/thirdText"
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:background="#FF00FF"
37. android:text="@string/third" />
38.
39. <TextView
40. android:id="@+id/fourthText"
41. android:layout_width="wrap_content"
42. android:layout_height="wrap_content"
43. android:background="#00FFFF"
44. android:text="@string/fourth" />
45. </LinearLayout>
46.
- </LinearLayout>
所得效果如下:(注意每个TextView里面的android:layout_width和android:layout_height的属性值,有兴趣的可以试试不同的值显示的不同的效果)
这个布局中还有个android:layout_weight属性限定在水平布局时,不同的控件占的宽度比率,具体规则为:如果水平布局有两个控件,其android:layout_weight属性值分别为n和m,则属性值为n的控件所占的长度比例为总长的n/(n+m),属性值为m的控件所占的长度比例为m/(n+m);属性值越大,占的份额越多。
这里再演示一下,main.xml中四个控件分别加上android:layout_weight=“对应的数字”:
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6.
7. <LinearLayout
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:orientation="horizontal" >
11.
12. <TextView
13. android:id="@+id/firstText"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_weight="1"
17. android:background="#FFFFFF"
18. android:text="@string/first" />
19.
20. <TextView
21. android:id="@+id/secondText"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:layout_weight="2"
25. android:background="#FFFF00"
26. android:text="@string/second" />
27. </LinearLayout>
28.
29. <LinearLayout
30. android:layout_width="match_parent"
31. android:layout_height="wrap_content"
32. android:orientation="horizontal" >
33.
34. <TextView
35. android:id="@+id/thirdText"
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:layout_weight="3"
39. android:background="#FF00FF"
40. android:text="@string/third" />
41.
42. <TextView
43. android:id="@+id/fourthText"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:layout_weight="4"
47. android:background="#00FFFF"
48. android:text="@string/fourth" />
49. </LinearLayout>
50.
51. </LinearLayout>
显示效果:
另外还能通过LinearLayout的android:gravity属性或者控件的android:layout_gravity属性,结合LinearLayout的android:orientation属性来设置水平或者垂直居中,这个可以自己多调试一下。
布局三:
表格布局TableLayout,更方便的展示N行N列的布局格式。TableLayout由许多TableRow组成,每个TableRow都代表一行。
TableRow继承自LinearLayout,android:orientation="horizontal",android:layout_width=“match_parent”,android:layout_height =“wrap_content”。里面定义的控件都是横向排列,并且宽高一致的,相当于表格中的单元格,但是不能合并单元格。
看代码,layout/main.xml
1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TableRow
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content" >
9.
10. <TextView
11. android:id="@+id/firstText"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:layout_weight="1"
15. android:background="#FFFFFF"
16. android:text="@string/first" />
17.
18. <TextView
19. android:id="@+id/secondText"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_weight="1"
23. android:background="#FFFF00"
24. android:text="@string/second" />
25. </TableRow>
26.
27. <TableRow
28. android:layout_width="fill_parent"
29. android:layout_height="wrap_content" >
30.
31. <TextView
32. android:id="@+id/thirdText"
33. android:layout_width="wrap_content"
34. android:layout_height="wrap_content"
35. android:layout_weight="1"
36. android:background="#FF00FF"
37. android:text="@string/third" />
38.
39. <TextView
40. android:id="@+id/fourthText"
41. android:layout_width="wrap_content"
42. android:layout_height="wrap_content"
43. android:layout_weight="1"
44. android:background="#00FFFF"
45. android:text="@string/fourth" />
46. </TableRow>
47.
48. </TableLayout>
效果图:(有兴趣的可以去掉android:layout_weight属性看看效果)
关于表格布局需要了解的还有:
android:stretchColumns某一列自动填充空白区域
android:shrinkColumns压缩某个列(用于内容过长,横向显示不完全,多余的往下自动扩展)
TableLayout的列序号从0开始
android:gravity设置对齐规则可以多个条件中间用|分开,比如android:gravity=“top|right”,注意|前后不能有空格
布局四:
单帧布局FrameLayout,理解起来最简单,所有的控件都不能指定位置,从左上角对齐依次叠加,后面的控件直接覆盖在前面的控件之上。为了清晰的显示出效果,这里使用两种不同的控件大小展示。
layout/main.xml代码:
1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:background="#FFFFFF"
11. android:text="@string/first" />
12.
13. <TextView
14. android:id="@+id/secondText"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:background="#FFFF00"
18. android:text="@string/second" />
19.
20. <TextView
21. android:id="@+id/thirdText"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:background="#FF00FF"
25. android:text="@string/third" />
26.
27. <TextView
28. android:id="@+id/fourthText"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:background="#00FFFF"
32. android:text="@string/fourth" />
33.
34. </FrameLayout>
显示效果:(因为second比fourth长那么一点点,所以露出来一点)
换个代码再演示一下main.xml
1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_width="match_parent"
9. android:layout_height="match_parent"
10. android:background="#FFFFFF"
11. android:text="@string/first" />
12.
13. <TextView
14. android:id="@+id/secondText"
15. android:layout_width="200dp"
16. android:layout_height="200dp"
17. android:background="#FFFF00"
18. android:text="@string/second" />
19.
20. <TextView
21. android:id="@+id/thirdText"
22. android:layout_width="100dp"
23. android:layout_height="100dp"
24. android:background="#FF00FF"
25. android:text="@string/third" />
26.
27. <TextView
28. android:id="@+id/fourthText"
29. android:layout_width="50dp"
30. android:layout_height="50dp"
31. android:background="#00FFFF"
32. android:text="@string/fourth" />
33.
34. </FrameLayout>
效果:
布局五:
绝对布局AbsoluteLayout,使用android:layout_x和android:layout_y属性来限定控件的位置,左上角坐标为(0,0),各控件位置可以重叠,实际开发中因为限定的位置太过死板而很少用到,实际上我使用的版本已经提示这个布局过期,不推荐使用,这里简单介绍一下。
layout/main.xml代码:
1. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <TextView
7. android:id="@+id/firstText"
8. android:layout_x="50dp"
9. android:layout_y="50dp"
10. android:layout_width="50dp"
11. android:layout_height="50dp"
12. android:background="#FFFFFF"
13. android:text="@string/first" />
14.
15. <TextView
16. android:id="@+id/secondText"
17. android:layout_x="80dp"
18. android:layout_y="80dp"
19. android:layout_width="50dp"
20. android:layout_height="50dp"
21. android:background="#FFFF00"
22. android:text="@string/second" />
23.
24. <TextView
25. android:id="@+id/thirdText"
26. android:layout_x="120dp"
27. android:layout_y="100dp"
28. android:layout_width="50dp"
29. android:layout_height="50dp"
30. android:background="#FF00FF"
31. android:text="@string/third" />
32.
33. <TextView
34. android:id="@+id/fourthText"
35. android:layout_x="180dp"
36. android:layout_y="10dp"
37. android:layout_width="50dp"
38. android:layout_height="50dp"
39. android:background="#00FFFF"
40. android:text="@string/fourth" />
41.
42. </AbsoluteLayout>
效果:
布局到此为止,不同的布局之间还可以嵌套,大家有兴趣的话可以自己多尝试尝试。