Android布局总结

Android布局分别是LinearLayout （ 线性布局）、 TableLayout （表格布局） 、 RelativeLayout （相对布局）、FrameLayout（ 帧布局 ） 、AbsoluteLayout（绝对布局） 。
1、   LinearLayout （线性 布局 ）
“ LinearLayout ”翻译成中文是 “ 线性布局 ” ，所谓线性布局就是在该标签下的所有子元素会根据其 orientation 属性的值来决定是按行或者是按列逐个显示。
示例 main.xml 布局文件如下：

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < LinearLayout 
   
3. xmlns:android ="http://schemas.android.com/apk/res/android" 
   
4. android:orientation = "vertical" 
   
5. android:layout_width ="fill_parent" 
   
6. android:layout_height ="fill_parent" 
   
7. >  
   
8. < TextView 
   
9. android:layout_width ="fill_parent" 
   
10. android:layout_height ="wrap_content" 
    
11. android:text ="@string/name_text" 
    
12. /> 
    
13. < EditText 
    
14. android:layout_width ="fill_parent" 
    
15. android:layout_height ="wrap_content" /> 
    
16. < Button 
    
17. android:layout_width ="wrap_content" 
    
18. android:layout_height ="wrap_content" 
    
19. android:text ="@string/cancle_button" 
    
20. /> 
    
21. < Button 
    
22. android:layout_width ="wrap_content" 
    
23. android:layout_height ="wrap_content" 
    
24. android:text ="@string/ok_button" /> 
    
25. </ LinearLayout > 
    
26. 其对应 strings.xml 内容如下： 
    
27. <? xml version = "1.0"encoding = "utf-8" ?> 
    
28. < resources > 
    
29. < string name = "hello" >Hello World, UIActivity! </ string > 
    
30. < string name = "app_name"> 用户界面 </ string > 
    
31. < string name = "name_text"> 请输入用户名 </ string > 
    
32. < string name = "ok_button"> 确定 </ string > 
    
33. < string name ="cancle_button" > 取消 </ string > 
    
34. </ resources > 

复制代码

效果图如下：

垂直排列元素
其属性“ xmlns:android ”指定命名空间，顶级元素必须指定命名空间。而在该命名空间中的控件的属性 如layout_width ，要在属性前加上“ android ：” 做前缀。其属性 “ layout_width” 指定该元素的宽度，可选值有三种 ， “ fill_parent ” 、“ wrap_content ” 、具体数字（单位为 px ） 。其中 “ fill_parent ” 代表填满其父元素，对于顶级元素来说，其父元素就是整个手机屏幕 。 “ wrap_content ” 代表该元素的大小仅包裹其自身内容，而数字则代表其占相应的 px 。其属性“ layout_height ”指定该元素的高度， 可选参数值与 “ layout_width ” 的参数意义相同。
其属性“ orientation ”指定子元素排列方式， 其中指定为 “ vertical ” 则是子元素垂直排列 ， 每个子元素会占独立的一行 ， 如上图 ， 而另一个可选值为 “ horizontal ” 代表子元素水平排列，即每个子元素会占独立的一列。示例 main.xml 布局文件如下。其对应的strings.xml 内容不变。
main .xml

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < LinearLayout 
   
3. xmlns:android = "http://schemas.android.com/apk/res/android" 
   
4. android:orientation ="horizontal" 
   
5. android:layout_width ="fill_parent" 
   
6. android:layout_height ="fill_parent" 
   
7. >  
   
8. < TextView 
   
9. android:layout_width ="wrap_content" 
   
10. android:layout_height ="fill_parent" 
    
11. android:text = "@string/name_text" 
    
12. /> 
    
13. < EditText 
    
14. android:layout_width ="wrap_content" 
    
15. android:layout_height ="wrap_content" /> 
    
16. < Button 
    
17. android:layout_width ="wrap_content" 
    
18. android:layout_height ="wrap_content" 
    
19. android:text ="@string/cancle_button" 
    
20. /> 
    
21. < Button 
    
22. android:layout_width ="wrap_content" 
    
23. android:layout_height ="wrap_content" 
    
24. android:text ="@string/ok_button" /> 
    
25. </ LinearLayout > 

复制代码

效果图如下：

2 、RelativeLayout （相对布局）
相对布局中的视图组件是按相互之间的相对位置来确定的， 并不是线性布局中的必须
按行或按列单个显示。示例布局文件如下：
main.xml

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < RelativeLayout 
   
3. xmlns:android ="http://schemas.android.com/apk/res/android" 
   
4. android:layout_width ="fill_parent" 
   
5. android:layout_height ="fill_parent" 
   
6. >  
   
7. < TextView 
   
8. android:layout_width ="fill_parent" 
   
9. android:layout_height ="wrap_content" 
   
10. android:text ="@string/name_text" 
    
11. android:id = "@+id/text" /> 
    
12. < EditText 
    
13. android:layout_width ="fill_parent" 
    
14. android:layout_height ="wrap_content" 
    
15. android:layout_below = "@id/text" 
    
16. android:id = "@+id/edit" /> 
    
17. < Button 
    
18. android:layout_width ="wrap_content" 
    
19. android:layout_height ="wrap_content" 
    
20. android:text ="@string/cancle_button" 
    
21. android:layout_alignParentRight ="true" 
    
22. android:layout_below = "@id/edit" 
    
23. android:id = "@+id/cancle" /> 
    
24. < Button 
    
25. android:layout_width ="wrap_content" 
    
26. android:layout_height ="wrap_content" 
    
27. android:layout_toLeftOf ="@id/cancle" 
    
28. android:layout_alignTop ="@id/cancle" 
    
29. android:text = "@string/ok_button"/> 
    
30. </ RelativeLayout > 

复制代码

说明：
android:layout_below="@id/text" ：将该元素放到 id 为 text 的元素的下面
android:layout_toLeftOf="@id/ok" ：放到 id 为 ok 的元素左边
android:layout_alignTop="@id/ok" ：对齐 id 为 ok 的元素的顶部
界面效果如图：

3、   TableLayout （表格布局）
表格布局的风格跟 HTML 中的表格比较接近，只是所采用的标签不同。
<TableLayout > 是顶级元素，说明采用的是表格布局
<TableRow> 定义一个行
<TextView > 定义一个单元格的内容
示例布局文件内容如下：

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < TableLayout 
   
3. xmlns:android ="http://schemas.android.com/apk/res/android" 
   
4. android:layout_width ="fill_parent" 
   
5. android:layout_height ="fill_parent" 
   
6. android:stretchColumns ="0,1,2,3" 
   
7. >  
   
8. < TableRow > 
   
9. < TextView 
   
10. android:text = "@string/name" 
    
11. android:gravity = "center" 
    
12. android:padding = "3dip" /> 
    
13. < TextView 
    
14. android:text = "@string/gender" 
    
15. android:gravity = "center" 
    
16. android:padding = "3dip" /> 
    
17. < TextView 
    
18. android:text = "@string/age" 
    
19. android:gravity = "center" 
    
20. android:padding = "3dip" /> 
    
21. < TextView 
    
22. android:text = "@string/phonenum" 
    
23. android:gravity = "center" 
    
24. android:padding = "3dip" /> 
    
25. </ TableRow > 
    
26. < TableRow > 
    
27. < TextView 
    
28. android:text = "@string/name1" 
    
29. android:gravity = "center" 
    
30. android:padding = "3dip" /> 
    
31. < TextView 
    
32. android:text = "@string/gender1" 
    
33. android:gravity = "center" 
    
34. android:padding = "3dip" /> 
    
35. < TextView 
    
36. android:text = "@string/age1" 
    
37. android:gravity = "center" 
    
38. android:padding = "3dip" /> 
    
39. < TextView 
    
40. android:text ="@string/phonenum1" 
    
41. android:gravity = "center" 
    
42. android:padding = "3dip" /> 
    
43. </ TableRow > 
    
44. < TableRow > 
    
45. < TextView 
    
46. android:text = "@string/name2" 
    
47. android:gravity = "center" 
    
48. android:padding = "3dip" /> 
    
49. < TextView 
    
50. android:text = "@string/gender1" 
    
51. android:gravity = "center" 
    
52. android:padding = "3dip" /> 
    
53. < TextView 
    
54. android:text = "@string/age2" 
    
55. android:gravity = "center" 
    
56. android:padding = "3dip" /> 
    
57. < TextView 
    
58. android:text ="@string/phonenum2" 
    
59. android:gravity = "center" 
    
60. android:padding = "3dip" /> 
    
61. </ TableRow > 
    
62. </ TableLayout > 

复制代码

android:stretchColumns="0,1,2,3"
该属性指定每行都由第“ 0 、 1 、 2 、 3 ”列占满空白空间。
gravity 指定文字对齐方式，本例都设为居中对齐。
padding 指定视图与视图内容间的空隙，单位为像素。
对应的 strings.xml 文件内容如下：

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < resources > 
   
3. < string name = "name" > 姓名 </string > 
   
4. < string name = "gender" > 性别 </string > 
   
5. < string name = "age" > 年龄 </string > 
   
6. < string name = "phonenum"> 电话 </ string > 
   
7. < string name = "gender1" >男 </ string > 
   
8. < string name = "gender2" >女 </ string > 
   
9. < string name = "name1" > 张三 </string > 
   
10. < string name = "age1" > 25</ string > 
    
11. < string name = "phonenum1"> 1234567 </ string > 
    
12. < string name = "name2" > 李四 </string > 
    
13. < string name = "age2" > 24</ string > 
    
14. < string name = "phonenum2"> 7654321 </ string > 
    
15. </ resources > 

复制代码

界面效果如下：

4、FrameLayout （帧布局）
帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，按组件
定义的先后顺序依次逐屏显示， 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。接下来，我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下：

编写 main.xml 文件
其内容如下：

1. <? xml version = "1.0"encoding = "utf-8" ?> 
   
2. < FrameLayout 
   
3. xmlns:android ="http://schemas.android.com/apk/res/android" 
   
4. android:layout_width ="wrap_content" 
   
5. android:layout_height ="wrap_content" 
   
6. android:layout_gravity = "center" 
   
7. android:id = "@+id/frame" > 
   
8. </ FrameLayout > 

复制代码

在该布局文件中定义一个 id 为 frame 的帧布局文件。编写 BirdActivity.java 类内容如下：

1. public class BirdActivity extends Activity{ 
   
2. FrameLayout frame = null ; 
   
3. private boolean flag = true ; 
   
4. // 由该类两个方法间的循环调用，实现界面不断更新。 
   
5. class MyHandler extends Handler{ 
   
6. int i = 0; 
   
7. public void handleMessage(Message msg) { 
   
8. i ++; 
   
9. // 总共三幅图，依次显示 
   
10. show( i % 3); 
    
11. show( i % 3); 
    
12. // 再次调用 sleep 方法 
    
13. sleep(10); 
    
14. } 
    
15. public void sleep( long delayMillis) { 
    
16. // 判断是否继续飞翔 
    
17. if ( flag ) { 
    
18. // 实质上是调用了一次handleMessage 
    
19. sendMessageDelayed(obtainMessage(0),delayMillis); 
    
20. } 
    
21. } 
    
22. } 
    
23. // 该方法是被调用以更新帧布局的前景图片 
    
24. void show( int j) { 
    
25. // 获取三张图片 
    
26. Drawable a =getResources().getDrawable(R.drawable. a ); 
    
27. Drawable b =getResources().getDrawable(R.drawable. b ); 
    
28. Drawable c =getResources().getDrawable(R.drawable. c ); 
    
29. // 不同的情况，设置不同的前景 
    
30. switch (j) { 
    
31. case 0: 
    
32. frame .setForeground(a); 
    
33. break ; 
    
34. case 1: 
    
35. frame .setForeground(b); 
    
36. break ; 
    
37. case 2: 
    
38. frame .setForeground(c); 
    
39. break ; 
    
40. } 
    
41. } 
    
42. /** Called when the activity is firstcreated. */ 
    
43. @Override 
    
44. public void onCreate(BundlesavedInstanceState) { 
    
45. super .onCreate(savedInstanceState); 
    
46. setContentView(R.layout. main ); 
    
47. frame = (FrameLayout) findViewById(R.id.frame ); 
    
48. // 创建一个 Handler 子类对象，要调用其方法 
    
49. final MyHandler myHandler = newMyHandler(); 
    
50. myHandler.sleep(10); 
    
51. // 为 fram 设置点击事件，当其被点击时，在飞翔与暂停飞翔间切换。 
    
52. frame .setOnClickListener( newView.OnClickListener() { 
    
53. @Override 
    
54. public void onClick(View v) { 
    
55. flag = ! flag ; 
    
56. myHandler.sleep(10); 
    
57. } 
    
58. }); 
    
59. } 
    
60. } 

复制代码

说 明：由于 FrameLayout 中后出现的 UI 控件会覆盖前面出现的 UI 控件，每次只能显示一个 UI 控件，因此，我们可以通过在 Activity 中对每次显示的图片内容进行切换以实现动画效果。 或许你会想到开启一条线程来控制切换 ， 但在非主线程中不能更新 UI 界面 ， 所以 ， 我们使用了Android 提供的消息通讯类Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信，进而间接实现非主线程更新 UI 界面。由于 sleep 方法中的sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个消息 ， 该消息会被框架传递给handleMessage 事件。 我们在handleMessage() 方法中再次调用 sleep() 方法，形成一个循环调用。 在我们对界面进行点击之前 ， 两个方法会一直循环调用 。 前景图片也会不断的切换，进而实现动画的效果。运行程序，效果你自己试试就知道了！！！！5、  AbsoluteLayout（绝对布局）绝色地布局由 AbsoluteLayout代表。绝对布局就像java中awt编程中的空布局，就是Android不提供任何布局控制，而是由开发人员自己通过x坐 标、y坐标来控制组件的位置。娄使用AbsoluteLayout作为布局容器时，布局容器不再管理子组件的位置、大小——这些都需要开发人啼自己控制； 使用绝对布局时，每个子组件都可指定如下两个xml属性；Layout_x:指定该子组件上的x坐标；Layout_y:指定该子组件上的y坐标；大部分 时候，使用绝对布局都不是一个好思路，因为运行Adroid应用的手机往往千差万别，因此屏幕大小、分辨率都存在较大差异，使用绝对布局会很验证兼顾不同 屏幕大小、分辨率问题；