第六讲：用户界面 View（二）

Bertha 。 2022-08-04 08:36 159阅读 0赞

3、绝对布局 AbsoluteLayout

绝对定位AbsoluteLayout，又可以叫做坐标布局，可以直接指定子元素的绝对位置，这种布局简单直接，直观性强，但是由于手机屏幕尺寸差别比较大，使用绝对定位的适应性会比较差。

下面我们举一个例子看看：例子里的机器人图片大小是250X250，可以看到我们使用android:layout\_x和android:layout\_y来指定子元素的纵横坐标。

1.  <?xml version=”1.0″ encoding=”utf-8″?>  
    
2.  <AbsoluteLayout android:id=”@+id/AbsoluteLayout01″  
    
3.  android:layout\_width=”fill\_parent”  
    
4.  android:layout\_height=”fill\_parent”  
    
5.  xmlns:android=”http://schemas.android.com/apk/res/android”  
    
6.  android:background=”\#fff”><ImageView  
    
7.  android:src=”@drawable/android”  
    
8.  android:layout\_y=”40dip”  
    
9.  android:layout\_width=”wrap\_content”  
    
10. android:layout\_x=”35dip”  
    
11. android:id=”@+id/ImageView01″  
    
12. android:layout\_height=”wrap\_content”>  
    
13. </ImageView>  
    
14. <TextView  
    
15. android:layout\_height=”wrap\_content”  
    
16. android:layout\_width=”fill\_parent”  
    
17. android:id=”@+id/TextView01″  
    
18. android:text=”Android2.2 学习指南”  
    
19. android:textColor=”\#0f0″  
    
20. android:textSize=”28dip”  
    
21. android:layout\_y=”330dip”  
    
22. android:layout\_x=”35dip“>  
    
23. </TextView>  
    
24. <TextView  
    
25. android:layout\_height=”wrap\_content”  
    
26. android:layout\_width=”fill\_parent”  
    
27. android:id=”@+id/TextView02″  
    
28. android:text=”图文并茂，理论清晰，操作性强”  
    
29. android:textColor=”\#333″  
    
30. android:textSize=”18dip”  
    
31. android:layout\_y=”365dip”  
    
32. android:layout\_x=”35dip“>  
    
33. </TextView>  
    
34. </AbsoluteLayout>

复制代码

让我们看一下在WQVGA的模拟器下的显示效果：

[![132142j0ezj0h5h255zzhe.png][]][132142j0ezj0h5h255zzhe.png 1]

再在WVGA800的模拟器下看看显示效果：

[![1322249gl6lt6gfkxukt4h.png][]][1322249gl6lt6gfkxukt4h.png 1]

Tip: 在绝对定位中，如果子元素不设置layout\_x和layout\_y，那么它们的默认值是0，也就是说它会像在FrameLayout一样这个元素会出现在左上角。

4、相对布局 RelativeLayout

相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。它灵活性大很多，当然属性也多，操作难度也大，属性之间产生冲突的的可能性也大，使用相对布局时要多做些测试。

下面我们用相对布局再做一次上面的例子，首先放置一个图片，其它两个文本分别相对上一个元素定位：

1.  <?xml version=”1.0″ encoding=”utf-8″?><RelativeLayout android:id=”@+id/RelativeLayout01″  
    
2.  android:layout\_width=”fill\_parent”  
    
3.  android:layout\_height=”fill\_parent”  
    
4.  android:background=”\#fff”  
    
5.  xmlns:android=”http://schemas.android.com/apk/res/android”><ImageView android:id=”@+id/ImageView01″  
    
6.  android:src=”@drawable/android”  
    
7.  android:layout\_width=”fill\_parent”  
    
8.  android:layout\_height=”wrap\_content”  
    
9.  android:layout\_marginTop=”40dip”  
    
10. >  
    
11. </ImageView>  
    
12. <TextView  
    
13. android:layout\_height=”wrap\_content”  
    
14. android:layout\_width=”wrap\_content”  
    
15. android:id=”@+id/TextView01″  
    
16. android:text=”Android2.2 学习指南”  
    
17. android:textColor=”\#0f0″  
    
18. android:textSize=”28dip”  
    
19. android:layout\_below=”@id/ImageView01″  
    
20. android:layout\_centerHorizontal=”true”  
    
21. android:layout\_marginTop=”10dip”>  
    
22. </TextView>  
    
23. <TextView  
    
24. android:layout\_height=”wrap\_content”  
    
25. android:layout\_width=”wrap\_content”  
    
26. android:id=”@+id/TextView02″  
    
27. android:text=”图文并茂，理论清晰，操作性强”  
    
28. android:textColor=”\#333″  
    
29. android:textSize=”18dip”  
    
30. android:layout\_below=”@id/TextView01″  
    
31. android:layout\_centerHorizontal=”true”  
    
32. android:layout\_marginTop=”5dip“>  
    
33. </TextView>  
    
34. </RelativeLayout>

复制代码

让我们看一下在WQVGA的模拟器下的显示效果：

[![132237zly70f869tigixcx.png][]][132237zly70f869tigixcx.png 1]

再看一下在更大屏幕（WVGA800）模拟器上的显示效果：

[![132307o2ouocruye6zo7m2.png][]][132307o2ouocruye6zo7m2.png 1]

从上图可以看到界面效果基本保持了一致，而不是像绝对定位一样龟缩在左上角；同学们看到自动缩放的功能是采用了dip做单位带来的好处。关于dip，不懂的同学可以看我在开发小知识里写的专门的文章。

下面介绍一下RelativeLayout用到的一些重要的属性：

> 第一类:属性值为true或false  
> android:layout\_centerHrizontal                                           水平居中  
> android:layout\_centerVertical                                            垂直居中  
> android:layout\_centerInparent                                           相对于父元素完全居中  
> android:layout\_alignParentBottom                                     贴紧父元素的下边缘  
> android:layout\_alignParentLeft                                          贴紧父元素的左边缘  
> android:layout\_alignParentRight                                        贴紧父元素的右边缘  
> android:layout\_alignParentTop                                          贴紧父元素的上边缘  
> android:layout\_alignWithParentIfMissing                            如果对应的兄弟元素找不到的话就以父元素做参照物
> 
> 第二类：属性值必须为id的引用名“@id/id-name”  
> android:layout\_below                          在某元素的下方  
> android:layout\_above                          在某元素的的上方  
> android:layout\_toLeftOf                       在某元素的左边  
> android:layout\_toRightOf                     在某元素的右边
> 
> android:layout\_alignTop                      本元素的上边缘和某元素的的上边缘对齐  
> android:layout\_alignLeft                      本元素的左边缘和某元素的的左边缘对齐  
> android:layout\_alignBottom                 本元素的下边缘和某元素的的下边缘对齐  
> android:layout\_alignRight                    本元素的右边缘和某元素的的右边缘对齐
> 
> 第三类：属性值为具体的像素值，如30dip，40px  
> android:layout\_marginBottom              离某元素底边缘的距离  
> android:layout\_marginLeft                   离某元素左边缘的距离  
> android:layout\_marginRight                 离某元素右边缘的距离  
> android:layout\_marginTop                   离某元素上边缘的距离
> 
> 我们再把上面的例子重新做一遍，这一次多放一些属性在里面，大家试验一下：
> 
>   
> 
> 
> 1.  <?xml version=”1.0″ encoding=”utf-8″?><RelativeLayout android:id=”@+id/RelativeLayout01″  
>     
> 2.  android:layout\_width=”fill\_parent”  
>     
> 3.  android:layout\_height=”fill\_parent”  
>     
> 4.  android:background=”\#cfff” 色彩的设置是argb,第一个c是透明度  
>     
> 5.  xmlns:android=”http://schemas.android.com/apk/res/android”><ImageView android:id=”@+id/ImageView01″  
>     
> 6.  android:src=”@drawable/android”  
>     
> 7.  android:layout\_width=”wrap\_content”  
>     
> 8.  android:layout\_height=”wrap\_content”  
>     
> 9.  android:layout\_marginTop=”40dip”  
>     
> 10. android:layout\_centerHorizontal=”true”>  
>     
> 11. </ImageView><TextView  
>     
> 12. android:layout\_height=”wrap\_content”  
>     
> 13. android:layout\_width=”wrap\_content”  
>     
> 14. android:id=”@+id/TextView01″  
>     
> 15. android:text=”Android2.2 学习指南”  
>     
> 16. android:textColor=”\#0f0″  
>     
> 17. android:textSize=”28dip”  
>     
> 18. android:layout\_below=”@id/ImageView01″  
>     
> 19. android:layout\_centerHorizontal=”true”  
>     
> 20. android:layout\_marginTop=”10dip”>  
>     
> 21. </TextView><TextView  
>     
> 22. android:layout\_height=”wrap\_content”  
>     
> 23. android:layout\_width=”wrap\_content”  
>     
> 24. android:id=”@+id/TextView02″  
>     
> 25. android:text=”图文并茂，理论清晰，操作性强”  
>     
> 26. android:textColor=”\#333″  
>     
> 27. android:textSize=”18dip”  
>     
> 28. android:layout\_below=”@id/TextView01″  
>     
> 29. android:layout\_centerHorizontal=”true”  
>     
> 30. android:layout\_marginTop=”5dip”>  
>     
> 31. </TextView><TextView  
>     
> 32. android:layout\_height=”wrap\_content”  
>     
> 33. android:layout\_width=”wrap\_content”  
>     
> 34. android:id=”@+id/TextView03″  
>     
> 35. android:text=”alignTop”  
>     
> 36. android:textColor=”\#333″  
>     
> 37. android:textSize=”18dip”  
>     
> 38. android:layout\_alignTop=”@id/ImageView01″  和ImageView01上边缘对齐  
>     
> 39. android:layout\_centerHorizontal=”true”>  
>     
> 40. </TextView><TextView  
>     
> 41. android:layout\_height=”wrap\_content”  
>     
> 42. android:layout\_width=”wrap\_content”  
>     
> 43. android:id=”@+id/TextView04″  
>     
> 44. android:text=”alignLeft”  
>     
> 45. android:textColor=”\#333″  
>     
> 46. android:textSize=”18dip”  
>     
> 47. android:layout\_alignLeft=”@id/ImageView01″  
>     
> 48. android:layout\_centerHorizontal=”true”>  
>     
> 49. </TextView><TextView  
>     
> 50. android:layout\_height=”wrap\_content”  
>     
> 51. android:layout\_width=”wrap\_content”  
>     
> 52. android:id=”@+id/TextView05″  
>     
> 53. android:text=”alignRight”  
>     
> 54. android:textColor=”\#333″  
>     
> 55. android:textSize=”18dip”  
>     
> 56. android:layout\_alignRight=”@id/ImageView01″  
>     
> 57. android:layout\_centerHorizontal=”true”>  
>     
> 58. </TextView><TextView  
>     
> 59. android:layout\_height=”wrap\_content”  
>     
> 60. android:layout\_width=”wrap\_content”  
>     
> 61. android:id=”@+id/TextView06″  
>     
> 62. android:text=”alignBottom”  
>     
> 63. android:textColor=”\#333″  
>     
> 64. android:textSize=”18dip”  
>     
> 65. android:layout\_alignBottom=”@id/ImageView01″  
>     
> 66. android:layout\_centerHorizontal=”true”>  
>     
> 67. </TextView>  
>     
> 68. </RelativeLayout>
> 
> 复制代码
> 
>   
>   
> 
> 
> [![132120hd8rr2azcc05cgcz.png][]][132120hd8rr2azcc05cgcz.png 1]

[132142j0ezj0h5h255zzhe.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132142j0ezj0h5h255zzhe.png
[132142j0ezj0h5h255zzhe.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image39.png
[1322249gl6lt6gfkxukt4h.png]: http://www.apkbus.com/data/attachment/forum/201104/23/1322249gl6lt6gfkxukt4h.png
[1322249gl6lt6gfkxukt4h.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image40.png
[132237zly70f869tigixcx.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132237zly70f869tigixcx.png
[132237zly70f869tigixcx.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image41.png
[132307o2ouocruye6zo7m2.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132307o2ouocruye6zo7m2.png
[132307o2ouocruye6zo7m2.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image42.png
[132120hd8rr2azcc05cgcz.png]: http://www.apkbus.com/data/attachment/forum/201104/23/132120hd8rr2azcc05cgcz.png
[132120hd8rr2azcc05cgcz.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image43.png