android布局详解

最新推荐文章于 2024-10-16 17:45:37 发布

经纬

最新推荐文章于 2024-10-16 17:45:37 发布

阅读量215

点赞数

文章标签： android layout encoding cmd 手机 html

本文链接：https://blog.csdn.net/xiaowei1122/article/details/7051256

版权

1、帧布局 FrameLayout：

是最简单的一个布局对象。在他里面的的所有显示对象爱你过都将固定在屏幕的左上角，不能指定位置，但允许有多个显示对象，只是后一个会直接覆盖在前一个之上显示，会把前面的组件部分或全部挡住。下图的例子里，FrameLayout中放了3个ImageView组件，第一个是蓝色的，第二个是绿色的，第三个是树状图（透明的png格式）。ImageView就相当于Html中的img标签，接下来会讲到这个组件。

下面看一个FrameLayout的例子：

1. <?xml version=\"1.0\"encoding=\"utf-8\"?>

2. <FrameLayoutandroid:id=\"@+id/FrameLayout01\"

3. android:layout_width=\"fill_parent\"android:layout_height=\"fill_parent\"

4. xmlns:android=\"http://schemas.android.com/apk/res/android\">

5. <ImageViewandroid:id=\"@+id/ImageView01\" android:src=\"@drawable/p1\"

6. android:layout_width=\"wrap_content\"android:layout_height=\"wrap_content\"></ImageView>

7. <ImageViewandroid:id=\"@+id/ImageView02\"android:src=\"@drawable/p2\"

8. android:layout_width=\"wrap_content\"android:layout_height=\"wrap_content\"></ImageView>

9. <ImageViewandroid:id=\"@+id/ImageView03\"android:src=\"@drawable/p3\"

10. android:layout_width=\"wrap_content\"android:layout_height=\"wrap_content\"></ImageView>

11. </FrameLayout>

2、线性布局 LinearLayout：

线性布局是所有布局中最常用的类之一，也是RadioGroup, TabWidget, TableLayout,TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行（不设置方向的时候默认按照垂直方向排列）。

下面看一个LinearLayout的例子：别被例子的长度吓住，仔细看一下其实就是一个LinearLayout中放5个TextView标签而已，TextView相当于Html标签中的Label。

1. <?xml version=\"1.0\"encoding=\"utf-8\"?>

2. <LinearLayoutxmlns:android=\"http://schemas.android.com/apk/res/android\"

3. android:orientation=\"vertical\"

4. android:layout_width=\"fill_parent\"

5. android:layout_height=\"fill_parent\"

6. android:gravity=\"center_horizontal\"

7. >

8. <TextView

9. android:layout_width=\"fill_parent\"

10. android:layout_height=\"wrap_content\"

11. android:text=\"给力CMD100\"

12. android:textSize=\"20px\"

13. android:textColor=\"#0ff\"

14. android:background=\"#333\"

15. />

16. <TextView

17. android:layout_width=\"wrap_content\"

18. android:layout_height=\"wrap_content\"

19. android:text=\"给力GM\"

20. android:textSize=\"20px\"

21. android:textColor=\"#0f0\"

22. android:background=\"#eee\"

23. android:layout_weight=\"3\"

24. />

25. <TextView

26. android:layout_width=\"wrap_content\"

27. android:layout_height=\"wrap_content\"

28. android:text=\"给力开发团队\"

29. android:textColor=\"#00f\"

30. android:textSize=\"20px\"

31. android:background=\"#ccc\"

32. android:layout_weight=\"1\"

33. />

34. <TextView

35. android:layout_width=\"fill_parent\"

36. android:layout_height=\"wrap_content\"

37. android:text=\"CMD100是我家\"

38. android:textColor=\"#f33\"

39. android:textSize=\"20px\"

40. android:background=\"#888\"

41. android:layout_weight=\"1\"

42. />

43. <TextView

44. android:layout_width=\"fill_parent\"

45. android:layout_height=\"wrap_content\"

46. android:text=\"学习就上CMD100\"

47. android:textColor=\"#ff3\"

48. android:textSize=\"20px\"

49. android:background=\"#333\"

50. android:layout_weight=\"1\"

51. />

52. </LinearLayout>

3、绝对布局 AbsoluteLayout

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

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

1. <?xml version=\"1.0\"encoding=\"utf-8\"?>

2. <AbsoluteLayoutandroid: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\">

7. <ImageView

8. android:src=\"@drawable/android\"

9. android:layout_y=\"40dip\"

10. android:layout_width=\"wrap_content\"

11. android:layout_x=\"35dip\"

12. android:id=\"@+id/ImageView01\"

13. android:layout_height=\"wrap_content\">

14. </ImageView>

15. <TextView

16. android:layout_height=\"wrap_content\"

17. android:layout_width=\"fill_parent\"

18. android:id=\"@+id/TextView01\"

19. android:text=\"android学习乐园--CMD100\"

20. android:textColor=\"#0f0\"

21. android:textSize=\"28dip\"

22. android:layout_y=\"330dip\"

23. android:layout_x=\"35dip\">

24. </TextView>

25. <TextView

26. android:layout_height=\"wrap_content\"

27. android:layout_width=\"fill_parent\"

28. android:id=\"@+id/TextView02\"

29. android:text=\"中国手机开发者联盟\"

30. android:textColor=\"#333\"

31. android:textSize=\"18dip\"

32. android:layout_y=\"365dip\"

33. android:layout_x=\"35dip\">

34. </TextView>

35. </AbsoluteLayout>

4、相对布局 RelativeLayout

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

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

1. <?xml version=\"1.0\"encoding=\"utf-8\"?>

2. <RelativeLayout android:id=\"@+id/RelativeLayout01\"

3. android:layout_width=\"fill_parent\"

4. android:layout_height=\"fill_parent\"

5. android:background=\"#fff\"

6. xmlns:android=\"http://schemas.android.com/apk/res/android\">

7. <ImageViewandroid:id=\"@+id/ImageView01\"

8. android:src=\"@drawable/android\"

9. android:layout_width=\"fill_parent\"

10. android:layout_height=\"wrap_content\"

11. android:layout_marginTop=\"40dip\"

12. >

13. </ImageView>

14. <TextView

15. android:layout_height=\"wrap_content\"

16. android:layout_width=\"wrap_content\"

17. android:id=\"@+id/TextView01\"

18. android:text=\"android学习乐园--CMD100\"

19. android:textColor=\"#0f0\"

20. android:textSize=\"28dip\"

21. android:layout_below=\"@id/ImageView01\"

22. android:layout_centerHorizontal=\"true\"

23. android:layout_marginTop=\"10dip\">

24. </TextView>

25. <TextView

26. android:layout_height=\"wrap_content\"

27. android:layout_width=\"wrap_content\"

28. android:id=\"@+id/TextView02\"

29. android:text=\"android布局详解\"

30. android:textColor=\"#333\"

31. android:textSize=\"18dip\"

32. android:layout_below=\"@id/TextView01\"

33. android:layout_centerHorizontal=\"true\"

34. android:layout_marginTop=\"5dip\">

35. </TextView>

36. </RelativeLayout>

下面介绍一下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\"?>

2. <RelativeLayoutandroid:id=\"@+id/RelativeLayout01\"

3. android:layout_width=\"fill_parent\"

4. android:layout_height=\"fill_parent\"

5. android:background=\"#cfff\" 色彩的设置是argb,第一个c是透明度

6. xmlns:android=\"http://schemas.android.com/apk/res/android\">

7. <ImageViewandroid:id=\"@+id/ImageView01\"

8. android:src=\"@drawable/android\"

9. android:layout_width=\"wrap_content\"

10. android:layout_height=\"wrap_content\"

11. android:layout_marginTop=\"40dip\"

12. android:layout_centerHorizontal=\"true\">

13. </ImageView>

14. <TextView

15. android:layout_height=\"wrap_content\"

16. android:layout_width=\"wrap_content\"

17. android:id=\"@+id/TextView01\"

18. android:text=\"中国手机开发者联盟\"

19. android:textColor=\"#0f0\"

20. android:textSize=\"28dip\"

21. android:layout_below=\"@id/ImageView01\"

22. android:layout_centerHorizontal=\"true\"

23. android:layout_marginTop=\"10dip\">

24. </TextView>

25. <TextView

26. android:layout_height=\"wrap_content\"

27. android:layout_width=\"wrap_content\"

28. android:id=\"@+id/TextView02\"

29. android:text=\"CMD100\"

30. android:textColor=\"#333\"

31. android:textSize=\"18dip\"

32. android:layout_below=\"@id/TextView01\"

33. android:layout_centerHorizontal=\"true\"

34. android:layout_marginTop=\"5dip\">

35. </TextView>

36. <TextView

37. android:layout_height=\"wrap_content\"

38. android:layout_width=\"wrap_content\"

39. android:id=\"@+id/TextView03\"

40. android:text=\"alignTop\"

41. android:textColor=\"#333\"

42. android:textSize=\"18dip\"

43. android:layout_alignTop=\"@id/ImageView01\"和ImageView01上边缘对齐

44. android:layout_centerHorizontal=\"true\">

45. </TextView>

46. <TextView

47. android:layout_height=\"wrap_content\"

48. android:layout_width=\"wrap_content\"

49. android:id=\"@+id/TextView04\"

50. android:text=\"alignLeft\"

51. android:textColor=\"#333\"

52. android:textSize=\"18dip\"

53. android:layout_alignLeft=\"@id/ImageView01\"

54. android:layout_centerHorizontal=\"true\">

55. </TextView>

56. <TextView

57. android:layout_height=\"wrap_content\"

58. android:layout_width=\"wrap_content\"

59. android:id=\"@+id/TextView05\"

60. android:text=\"alignRight\"

61. android:textColor=\"#333\"

62. android:textSize=\"18dip\"

63. android:layout_alignRight=\"@id/ImageView01\"

64. android:layout_centerHorizontal=\"true\">

65. </TextView>

66. <TextView

67. android:layout_height=\"wrap_content\"

68. android:layout_width=\"wrap_content\"

69. android:id=\"@+id/TextView06\"

70. android:text=\"alignBottom\"

71. android:textColor=\"#333\"

72. android:textSize=\"18dip\"

73. android:layout_alignBottom=\"@id/ImageView01\"

74. android:layout_centerHorizontal=\"true\">

75. </TextView>

76. </RelativeLayout>

经纬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫