Rupert

::Me(C#,VC,MonoTouch,MonoforAndroid);

导航

线性布局

Posted on 2014-03-05 15:11  ArRan  阅读(880)  评论(0编辑  收藏  举报

1.线性布局

 

线性布局由LinearLayout类来代表,它们将容器里的组件一个挨着一个地排列起来。不仅可以控制个组件横向排列,也可控制各组件纵向排列。

 

LinearLayout的常用XML属性及相关方法的说明

 

 

 

XML属性 相关方法 说明
android:gravity setGravity(int)

设置布局管理器内组件的对齐方式。该属性支持top,bottom,left,right,center_certical,

center_horizontal,fill_horizontal,center,

fill,clip_vertical,clip_horizontal。也可以同时制定多种堆砌方式的组合,例如left|center_horizontal 代表出现在屏幕左边,而且垂直居中。竖线前后千万不能出现空格

android:orientation setOrientation(int)

设置布局管理器内组件的排列方式,可以设置为

horizontal(水平排列)、vertical(垂直排列、默认值)两个值的其中之一

 

 

 

1.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2. android:orientation="vertical" 
3. android:layout_width="fill_parent" 
4. android:layout_height="fill_parent" 
5. android:gravity="right|center_horizontal"
6. <Button android:layout_height="wrap_content" 
7. android:text="@string/btl1" 
8. android:id="@+id/btl1" android:layout_width="94dp"
9. </Button> 
10. <Button android:layout_height="wrap_content" 
11. android:text="@string/btl2" 
12. android:id="@+id/btl2" android:layout_width="94dp"
13. </Button> 
14. <Button android:layout_height="wrap_content" 
15. android:text="@string/btl3" 
16. android:id="@+id/btl3" android:layout_width="94dp"
17. </Button> 
18. <Button android:layout_height="wrap_content" 
19. android:text="@string/btl4" 
20. android:id="@+id/btl4" android:layout_width="94dp"
21. </Button> 
22. <Button android:layout_height="wrap_content" 
23. android:text="@string/btl5" 
24. android:id="@+id/btl5" android:layout_width="94dp"
25. </Button> 
26. <Button android:layout_height="wrap_content" 
27. android:text="@string/btl6" 
28. android:id="@+id/btl6" android:layout_width="94dp"
29. </Button> 
30.</LinearLayout>

 

 

 

 

2.表格布局

 

表格布局由TableLayout所代表,表格布局采用行,列的形式来管理UI组件,TableLayout并不需要明确地声明包含多少行,列,而是通过添加TableRow,其他组件来控制表格的行数和列数。

每次想TableLayout中添加一个TableRow,该TableRow就是一个表格行,TableRow也是容器,因此它可以不断地添加其他组件,每添加一个子组件该表格就增加一列。

 

TableLayout的常用XML属性及相关方法的说明

 

 

XML属性 相关方法 说明
android:collapseColumns setColumnCollapsed(int,boolean) 设置需要被隐藏的列的列序号,多个列序号之间用逗号隔开
android:shrinkColumns setShrinkAkllColumns(boolean) 设置允许被收缩的列的列序号,多个列序号之间用逗号隔开
android:stretchColumns setStretchAllColumns(boolean) 设置允许被拉伸的列的列序号,多个列序号之间用逗号隔开

 

 

1.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2. android:orientation
="vertical" 
3. android:layout_width
="fill_parent" 
4. android:layout_height
="fill_parent" 
5. 
> 
6. <!-- 第一个表格布局,指定第2列允许收缩,第3列允许拉伸 --> 
7. <TableLayout android:id="@+id/tl1" 
8. android:layout_width
="fill_parent" 
9. android:layout_height
="wrap_content" 
10. android:shrinkColumns
="1" 
11. android:stretchColumns
="2" 
12. 
> 
13. <!-- 独占一行 --> 
14. <Button android:layout_height="wrap_content" 
15. android:layout_width
="wrap_content" 
16. android:text
="独自一行的按钮" 
17. android:id
="@+id/btt1"> 
18. </Button> 
19. <TableRow > 
20. <Button android:layout_height="wrap_content" 
21. android:layout_width
="wrap_content" 
22. android:text
="普通按钮" 
23. android:id
="@+id/btt2" > 
24. </Button> 
25. <Button android:layout_height="wrap_content" 
26. android:layout_width
="wrap_content" 
27. android:text
="允许收缩按钮" 
28. android:id
="@+id/btt3"> 
29. </Button> 
30. <Button android:layout_height="wrap_content" 
31. android:layout_width
="wrap_content" 
32. android:text
="可以被允许拉伸按钮" 
33. android:id
="@+id/btt4"> 
34. </Button> 
35. </TableRow> 
36. </TableLayout> 
37. 
38. <!-- 第二个表格布局,指定第2列隐藏 --> 
39. <TableLayout android:id="@+id/tl2" 
40. android:layout_width
="fill_parent" 
41. android:layout_height
="wrap_content" 
42. android:collapseColumns
="1" 
43. 
> 
44. <!-- 独占一行 --> 
45. <Button android:layout_height="wrap_content" 
46. android:layout_width
="wrap_content" 
47. android:text
="独自一行的按钮" 
48. android:id
="@+id/btt5"> 
49. </Button> 
50. <TableRow > 
51. <Button android:layout_height="wrap_content" 
52. android:layout_width
="wrap_content" 
53. android:text
="普通按钮1" 
54. android:id
="@+id/btt6" > 
55. </Button> 
56. <Button android:layout_height="wrap_content" 
57. android:layout_width
="wrap_content" 
58. android:text
="普通按钮3" 
59. android:id
="@+id/btt7"> 
60. </Button> 
61. <Button android:layout_height="wrap_content" 
62. android:layout_width
="wrap_content" 
63. android:text
="普通按钮3" 
64. android:id
="@+id/btt8"> 
65. </Button> 
66. </TableRow> 
67. </TableLayout> 
68. <!-- 第三个表格布局,指定第2列和第3列允许拉伸 --> 
69. <TableLayout android:id="@+id/tl3" 
70. android:layout_width
="fill_parent" 
71. android:layout_height
="wrap_content" 
72. android:stretchColumns
="1,2" 
73. 
> 
74. <!-- 独占一行 --> 
75. <Button android:layout_height="wrap_content" 
76. android:layout_width
="wrap_content" 
77. android:text
="独自一行的按钮" 
78. android:id
="@+id/btt9"> 
79. </Button> 
80. <TableRow > 
81. <Button android:layout_height="wrap_content" 
82. android:layout_width
="wrap_content" 
83. android:text
="普通按钮1" 
84. android:id
="@+id/btt10" > 
85. </Button> 
86. <Button android:layout_height="wrap_content" 
87. android:layout_width
="wrap_content" 
88. android:text
="允许拉伸按钮" 
89. android:id
="@+id/btt11"> 
90. </Button> 
91. <Button android:layout_height="wrap_content" 
92. android:layout_width
="wrap_content" 
93. android:text
="普通按钮3" 
94. android:id
="@+id/btt12"> 
95. </Button> 
96. </TableRow> 
97. <TableRow > 
98. <Button android:layout_height="wrap_content" 
99. android:layout_width
="wrap_content" 
100. android:text
="允许拉伸按钮" 
101. android:id
="@+id/btt13" > 
102. </Button> 
103. <Button android:layout_height="wrap_content" 
104. android:layout_width
="wrap_content" 
105. android:text
="允许拉伸按钮" 
106. android:id
="@+id/btt14"> 
107. </Button> 
108. </TableRow> 
109. </TableLayout> 
110.</LinearLayout>

效果图:

 

 

3.帧布局

 

帧布局由FrameLayout所代表,帧布局容器为每个加入其中的组件创建一个空白的区域(成为一帧),所有每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。也就是说,把组件一个一个的叠加在一起。

 

FrameLayout的常用XML属性及相关方法的说明

 
XML属性 相关方法 说明
android:foreground setForeground(Drawable)

设置该帧布局容器的前景图像

android:foregroundGravity

 

 

 

渐进效果

 

1.<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2. android:orientation
="vertical" 
3. android:layout_width
="fill_parent" 
4. android:layout_height
="fill_parent"> 
5.<!-- 一次定义7个Textview,先定义的TextView位于底层,后定义的TextView位于上层 --> 
6.<TextView android:id="@+id/view01" 
7. android:layout_width
="wrap_content" 
8. android:layout_height
="wrap_content" 
9. android:width
="210px" 
10. android:height
="50px" 
11. android:background
="#ff0000"/> 
12. 
13.<TextView android:id="@+id/view02" 
14. android:layout_width
="wrap_content" 
15. android:layout_height
="wrap_content" 
16. android:width
="180px" 
17. android:height
="50px" 
18. android:background
="#dd0000"/> 
19. 
20.<TextView android:id="@+id/view03" 
21. android:layout_width
="wrap_content" 
22. android:layout_height
="wrap_content" 
23. android:width
="150px" 
24. android:height
="50px" 
25. android:background
="#bb0000"/> 
26. 
27.<TextView android:id="@+id/view04" 
28. android:layout_width
="wrap_content" 
29. android:layout_height
="wrap_content" 
30. android:width
="120px" 
31. android:height
="50px" 
32. android:background
="#990000"/> 
33. 
34. 
35.<TextView android:id="@+id/view05" 
36. android:layout_width
="wrap_content" 
37. android:layout_height
="wrap_content" 
38. android:width
="90px" 
39. android:height
="50px" 
40. android:background
="#770000"/> 
41. 
42.<TextView android:id="@+id/view06" 
43. android:layout_width
="wrap_content" 
44. android:layout_height
="wrap_content" 
45. android:width
="60px" 
46. android:height
="50px" 
47. android:background
="#550000"/> 
48. 
49.<TextView android:id="@+id/view07" 
50. android:layout_width
="wrap_content" 
51. android:layout_height
="wrap_content" 
52. android:width
="30px" 
53. android:height
="50px" 
54. android:background
="#330000"/> 
55.</FrameLayout>

 

效果图: