`
baobaoupup
  • 浏览: 471115 次
文章分类
社区版块
存档分类
最新评论

Android软件开发之盘点界面五大布局

 
阅读更多
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://xys289187120.blog.51cto.com/3361352/656986

1.线性布局(LinearLayout)
线性布局的形式可以分为两种,第一种横向线性布局 第二种纵向线性布局,总而言之都是以线性的形式 一个个排列出来的,纯线性布局的缺点是很不方便修改控件的显示位置,所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。

如图所示 使用了线性布局的水平方向与垂直方向,从图中可以清晰的看出来所有控件都是按照线性的排列方式显示出来的,这就是线性布局的特点。
设置线性布局为水平方向
android:orientation="horizontal"
设置线性布局为垂直方向
android:orientation="vertical"
设置正比例分配控件范围

android:layout_weight="1"
设置控件显示位置,这里为水平居中
android:gravity="center_horizontal"

在xml中我使用了LinearLayout 嵌套的方式 配置了2个线性布局 一个水平显示 一个垂直显示。

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. >
  7. <LinearLayout
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"
  10. android:orientation="horizontal"
  11. android:gravity="center_horizontal"
  12. android:layout_weight="2"
  13. >
  14. <ImageView
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:src="@drawable/jay"
  18. />
  19. <TextView
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:text="雨松MOMO"
  23. android:background="#FF0000"
  24. android:textColor="#000000"
  25. android:textSize="18dip"
  26. />
  27. <EditText
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:text="水平方向"
  31. />
  32. </LinearLayout>
  33. <LinearLayout
  34. android:layout_width="fill_parent"
  35. android:layout_height="fill_parent"
  36. android:orientation="vertical"
  37. android:layout_weight="1"
  38. >
  39. <TextView
  40. android:layout_width="wrap_content"
  41. android:layout_height="wrap_content"
  42. android:text="雨松MOMO"
  43. android:background="#FF0000"
  44. android:textColor="#000000"
  45. android:textSize="18dip"
  46. />
  47. <EditText
  48. android:layout_width="wrap_content"
  49. android:layout_height="wrap_content"
  50. android:text="垂直方向"
  51. />
  52. <Button
  53. android:layout_width="wrap_content"
  54. android:layout_height="wrap_content"
  55. android:text="雨松MOMO"
  56. />
  57. <ImageView
  58. android:layout_width="wrap_content"
  59. android:layout_height="wrap_content"
  60. android:src="@drawable/image"
  61. />
  62. </LinearLayout>
  63. </LinearLayout>

2.相对布局(RelativeLayout)
相对布局是android布局中最为强大的,首先它可以设置的属性是最多了,其次它可以做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局 它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。

设置距父元素右对齐
android:layout_alignParentRight="true"
设置该控件在id为re_edit_0控件的下方
android:layout_below="@id/re_edit_0"
设置该控件在id为re_image_0控件的左边
android:layout_toLeftOf="@id/re_iamge_0"
设置当前控件与id为name控件的上方对齐
android:layout_alignTop="@id/name"
设置偏移的像素值
android:layout_marginRight="30dip"

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. >
  6. <EditText
  7. android:id="@+id/re_edit_0"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="雨松MOMO"
  11. android:layout_alignParentRight="true"
  12. />
  13. <ImageView
  14. android:id="@+id/re_iamge_0"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:src="@drawable/jay"
  18. android:layout_below="@id/re_edit_0"
  19. android:layout_alignParentRight="true"
  20. />
  21. <TextView
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:background="#FF0000"
  25. android:text="努力学习"
  26. android:textColor="#000000"
  27. android:textSize="18dip"
  28. android:layout_toLeftOf="@id/re_iamge_0"
  29. />
  30. <EditText
  31. android:id="@+id/re_edit_1"
  32. android:layout_width="wrap_content"
  33. android:layout_height="wrap_content"
  34. android:text="雨松MOMO"
  35. android:layout_alignParentBottom="true"
  36. />
  37. <ImageView
  38. android:id="@+id/re_iamge_1"
  39. android:layout_width="wrap_content"
  40. android:layout_height="wrap_content"
  41. android:src="@drawable/image"
  42. android:layout_above="@id/re_edit_1"
  43. />
  44. <TextView
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:background="#FF0000"
  48. android:text="努力工作"
  49. android:textColor="#000000"
  50. android:textSize="18dip"
  51. android:layout_toRightOf="@id/re_iamge_1"
  52. android:layout_above="@id/re_edit_1"
  53. />
  54. </RelativeLayout>

3.帧布局(FrameLayout)
原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖,最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <FrameLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  6. <ImageView
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:src="@drawable/g"
  10. />
  11. <TextView
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:text="雨松MOMO"
  15. android:background="#FF0000"
  16. android:textColor="#000000"
  17. android:textSize="18dip"
  18. />
  19. <ImageView
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:src="@drawable/image"
  23. android:layout_gravity="bottom"
  24. />
  25. <EditText
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:text="快乐生活每一天喔"
  29. android:layout_gravity="bottom"
  30. />
  31. </FrameLayout>

4.绝对布局(AbsoluteLayout)

使用绝对布局可以设置任意控件的 在屏幕中 X Y 坐标点,和帧布局一样后绘制的控件会覆盖住之前绘制的控件,笔者不建议大家使用绝对布局还是那句话因为android的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。


设置控件的显示坐标点
  1. android:layout_x="50dip"
  2. android:layout_y="30dip"
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent">
  5. <ImageView
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:src="@drawable/f"
  9. android:layout_x="100dip"
  10. android:layout_y="50dip"
  11. />
  12. <TextView
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:text="当前坐标点x=100dipy=50dip"
  16. android:background="#FFFFFF"
  17. android:textColor="#FF0000"
  18. android:textSize="18dip"
  19. android:layout_x="50dip"
  20. android:layout_y="30dip"
  21. />
  22. <ImageView
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:src="@drawable/h"
  26. android:layout_x="50dip"
  27. android:layout_y="300dip"
  28. />
  29. <TextView
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:text="当前坐标点x=50dipy=300dip"
  33. android:background="#FFFFFF"
  34. android:textColor="#FF0000"
  35. android:textSize="18dip"
  36. android:layout_x="30dip"
  37. android:layout_y="280dip"
  38. />
  39. </AbsoluteLayout>

5.表格布局(TableLayout)
在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置 ,可以设置显示的缩进,对齐的方式。

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. >
  6. <ImageView
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:src="@drawable/g"
  10. android:layout_gravity="center"
  11. />
  12. <TableRow
  13. android:layout_width="wrap_content"
  14. android:layout_height="fill_parent"
  15. android:padding="10dip">
  16. <TextView
  17. android:text="姓名"
  18. android:gravity="left"
  19. />
  20. <TextView
  21. android:text="电话"
  22. android:gravity="right"/>
  23. </TableRow>
  24. <View
  25. android:layout_height="2dip"
  26. android:background="#FFFFFF"/>
  27. <TableRow
  28. android:layout_width="wrap_content"
  29. android:layout_height="fill_parent"
  30. android:padding="10dip">
  31. <TextView
  32. android:text="雨松"
  33. android:gravity="left"
  34. />
  35. <TextView
  36. android:text="15810463139"
  37. android:gravity="right"/>
  38. </TableRow>
  39. <TableRow
  40. android:layout_width="wrap_content"
  41. android:layout_height="fill_parent"
  42. android:padding="10dip">
  43. <TextView
  44. android:text="小可爱"
  45. android:gravity="left"
  46. />
  47. <TextView
  48. android:text="15810463139"
  49. android:gravity="right"/>
  50. </TableRow>
  51. <TableRow
  52. android:layout_width="wrap_content"
  53. android:layout_height="fill_parent"
  54. android:padding="10dip">
  55. <TextView
  56. android:text="好伙伴"
  57. android:gravity="left"
  58. />
  59. <TextView
  60. android:text="15810463139"
  61. android:gravity="right"/>
  62. </TableRow>
  63. <TableRow
  64. android:layout_width="wrap_content"
  65. android:layout_height="fill_parent"
  66. android:padding="10dip"
  67. >
  68. <TextView
  69. android:text="姓名"
  70. android:gravity="left"
  71. />
  72. <TextView
  73. android:text="性别"
  74. android:gravity="right"/>
  75. </TableRow>
  76. <View
  77. android:layout_height="2dip"
  78. android:background="#FFFFFF"/>
  79. <TableRow
  80. android:layout_width="wrap_content"
  81. android:layout_height="fill_parent"
  82. android:padding="10dip"
  83. >
  84. <TextView
  85. android:text="雨松MOMO"
  86. android:gravity="left"
  87. />
  88. <TextView
  89. android:text="男"
  90. android:gravity="right"/>
  91. </TableRow>
  92. <TableRow
  93. android:layout_width="wrap_content"
  94. android:layout_height="fill_parent"
  95. android:padding="10dip">
  96. <TextView
  97. android:text="小可爱"
  98. android:gravity="left"
  99. />
  100. <TextView
  101. android:text="女"
  102. android:gravity="right"/>
  103. </TableRow>
  104. <TableRow
  105. android:layout_width="wrap_content"
  106. android:layout_height="fill_parent"
  107. android:padding="10dip">
  108. <TextView
  109. android:text="好伙伴"
  110. android:gravity="left"
  111. />
  112. <TextView
  113. android:text="男"
  114. android:gravity="right"/>
  115. </TableRow>
  116. </TableLayout>
Android五大布局的基本使用方法已经介绍完,最后笔者在这里强调一下在开发与学习中建议大家使用相对布局,首先它的方法属性是最强大的其次它基本可以实现其它4大布局的效果,当然这里说的不是全部 有时候还是须要使用其他布局, 所以笔者建议大家开发中以实际情况定夺,以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局。

最后如果你还是觉得我写的不够详细 看的不够爽 不要紧我把源代码的下载地址贴出来 欢迎大家一起讨论学习雨松MOMO希望可以和大家一起进步。


下载地址:http://download.csdn.net/source/3490180

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics