Scripts 学盟

标题: Android开发（三--布局文件） [打印本页]
作者: 那个谁    时间: 2011-5-13 09:19:00     标题: Android开发（三--布局文件）

上次创建了项目，了解了项目结构（说的不是很清楚啊）。
这次我们主要学习代码编写。忘了上次的hello代码没上传。
项目创建好后系统会自动生成个res/layout/mian.xml文件。 这个mian.xml就是个页面（布局文件）
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent" android:layout_height="fill_parent"
  4.         android:stretchColumns="1">
  5.         <TextView android:id="@+id/txtViewMessage"
  6.                 android:textColor="@color/loginMessage" android:layout_height="50dp" android:text="@string/hello"
  7.                 android:layout_width="match_parent">
  8.         </TextView>
  9.         <TableRow>
  10.                 <TextView android:text="用户名:" android:textStyle="bold"
  11.                         android:gravity="right" android:padding="3dip" />

  13.                 <EditText android:id="@+id/txtUserName" android:padding="3dip"
  14.                         android:scrollHorizontally="true" />
  15.         </TableRow>

  17.         <TableRow>
  18.                 <TextView android:textStyle="bold" android:gravity="right"
  19.                         android:padding="3dip" android:text="密    码:" />

  21.                 <EditText android:id="@+id/txtPassword" android:password="true"
  22.                         android:padding="3dip" android:scrollHorizontally="true" />
  23.         </TableRow>

  25.         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  26.                 android:layout_width="fill_parent" android:layout_height="wrap_content"
  27.                 android:padding="10dip">


  30.                 <!-- 确定按钮在取消按钮的左侧，并且和取消按钮的高度齐平 -->
  31.                 <Button android:id="@+id/btnOK" android:layout_height="wrap_content"
  32.                         android:text="确  定" android:layout_width="150dp" />
  33.                 <!-- 取消按钮和容器的右边齐平，并且设置左边的边距为10dip -->
  34.                 <Button android:id="@+id/btnCancel" android:layout_height="wrap_content"
  35.                         android:layout_alignParentRight="true" android:layout_marginLeft="10dip"
  36.                         android:text="取  消" android:layout_width="150dp" />

  38.         </RelativeLayout>
  39. </TableLayout>
复制代码
这里和html不同的是他多有值都是从values/下面读取的。就是前面介绍的R.java文件。这里不再详细说明
android 布局有4中，分别是TableLayout、RelativeLayout 、LinearLayout、FrameLayout  一个布局容器可以嵌套多个布局。
  1. LinearLayout - 线形布局。
  2. 　　orientation - 容器内元素的排列方式。vertical: 子元素们垂直排列;horizontal: 子元素们水平排列

  4. 　　gravity - 内容的排列形式。常用的有 top, bottom, left, right, center 等

  6. 　　FrameLayout - 层叠式布局。以左上角为起点，将 FrameLayout 内的元素一层覆盖一层地显示

  8. 　　TableLayout - 表格式布局。

  10. 　　TableRow - 表格内的行，行内每一个元素算作一列

  12. 　　collapseColumns - 设置 TableLayout 内的 TableRow 中需要隐藏的列的列索引，多个用“,”隔开

  14. 　　stretchColumns - 设置 TableLayout 内的 TableRow 中需要拉伸(该列会拉伸到所有可用空间)的列的列索引，多个用“,”隔开

  16. 　　shrinkColumns - 设置 TableLayout 内的 TableRow 中需要收缩(为了使其他列不会被挤到屏幕外，此列会自动收缩)的列的列索引，多个用“,”隔开

  18. 　　RelativeLayout - 相对定位布局。

  20. 　　layout_centerInParent - 将当前元素放置到其容器内的水平方向和垂直方向的中央位置(类似的属性有 ：layout_centerHorizontal, layout_alignParentLeft 等)

  22. 　　layout_marginLeft - 设置当前元素相对于其容器的左侧边缘的距离

  24. 　　layout_below - 放置当前元素到指定的元素的下面

  26. 　　layout_alignRight - 当前元素与指定的元素右对齐

  28. 　　layout_width - 宽。

  30. 　　fill_parent: 宽度跟着父元素走;

  32. 　　wrap_content: 宽度跟着本身的内容走;

  34. 　　直接指定一个 px 值来设置宽

  36. 　　layout_height - 高。

  38. 　　fill_parent: 高度跟着父元素走;

  40. 　　wrap_content: 高度跟着本身的内容走;

  42. 　　直接指定一个 px 值来设置高

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

  46. 　　< !--

  48. 　　layout_width - 宽。fill_parent: 宽度跟着父元素走;wrap_content: 宽度跟着本身的内容走;直接指定一个 px 值来设置宽

  50. 　　layout_height - 高。fill_parent: 高度跟着父元素走;wrap_content: 高度跟着本身的内容走;直接指定一个 px 值来设置高

  52. 　　-->

  54. 　　< !--

  56. 　　LinearLayout - 线形布局。

  58. 　　orientation - 容器内元素的排列方式。vertical: 子元素们垂直排列;horizontal: 子元素们水平排列
  59. gravity - 内容的排列形式。常用的有 top, bottom, left, right, center 等，详见文档
  60. 　　-->

  62. 　　< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  64. 　　android:orientation="vertical" android:gravity="right"

  66. 　　android:layout_width="fill_parent" android:layout_height="fill_parent">

  68. 　　< !--

  70. 　　FrameLayout - 层叠式布局。以左上角为起点，将 FrameLayout 内的元素一层覆盖一层地显示

  72. 　　-->

  74. 　　< FrameLayout android:layout_height="wrap_content"

  76. 　　android:layout_width="fill_parent">

  78. 　　< TextView android:layout_width="wrap_content"

  80. 　　android:layout_height="wrap_content" android:text="FrameLayout">

  82. 　　< /TextView>

  84. 　　< TextView android:layout_width="wrap_content"

  86. 　　android:layout_height="wrap_content" android:text="Frame Layout">

  88. 　　< /TextView>

  90. 　　< /FrameLayout>

  92. 　　< TextView android:layout_width="wrap_content"

  94. 　　android:layout_height="wrap_content" android:text="@string/hello" />

  96. 　　< !--

  98. 　　TableLayout - 表格式布局。

  100. 　　TableRow - 表格内的行，行内每一个元素算作一列

  102. 　　collapseColumns - 设置 TableLayout 内的 TableRow 中需要隐藏的列的列索引，多个用“,”隔开

  104. 　　stretchColumns - 设置 TableLayout 内的 TableRow 中需要拉伸(该列会拉伸到所有可用空间)的列的列索引，多个用“,”隔开

  106. 　　shrinkColumns - 设置 TableLayout 内的 TableRow 中需要收缩(为了使其他列不会被挤到屏幕外，此列会自动收缩)的列的列索引，多个用“,”隔开

  108. 　　-->

  110. 　　< TableLayout android:id="@+id/TableLayout01"

  112. 　　android:layout_width="fill_parent" android:layout_height="wrap_content"

  114. 　　android:collapseColumns="1">

  116. 　　< TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent"

  118. 　　android:layout_height="wrap_content">

  120. 　　< TextView android:layout_width="wrap_content"
  121. android:layout_weight="1" android:layout_height="wrap_content"
  122. 　　android:text="行1列1" />

  124. 　　< TextView android:layout_width="wrap_content"

  126. 　　android:layout_weight="1" android:layout_height="wrap_content"

  128. 　　android:text="行1列2" />

  130. 　　< TextView android:layout_width="wrap_content"

  132. 　　android:layout_weight="1" android:layout_height="wrap_content"

  134. 　　android:text="行1列3" />

  136. 　　< /TableRow>

  138. 　　< TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content"

  140. 　　android:layout_height="wrap_content">

  142. 　　< TextView android:layout_width="wrap_content"

  144. 　　android:layout_height="wrap_content" android:text="行2列1" />

  146. 　　< /TableRow>

  148. 　　< /TableLayout>

  150. 　　< !--

  152. 　　AbsoluteLayout - 绝对定位布局。

  154. 　　layout_x - x 坐标。以左上角为顶点

  156. 　　layout_y - y 坐标。以左上角为顶点

  158. 　　-->

  160. 　　< AbsoluteLayout android:layout_height="wrap_content"

  162. 　　android:layout_width="fill_parent">

  164. 　　< TextView android:layout_width="wrap_content"

  166. 　　android:layout_height="wrap_content" android:text="AbsoluteLayout"

  168. 　　android:layout_x="100px"

  170. 　　android:layout_y="100px" />

  172. 　　< /AbsoluteLayout>

  174. 　　< !--

  176. 　　RelativeLayout - 相对定位布局。

  178. 　　layout_centerInParent - 将当前元素放置到其容器内的水平方向和垂直方向的中央位置(类似的属性有 ：layout_centerHorizontal, layout_alignParentLeft 等)

  180. 　　layout_marginLeft - 设置当前元素相对于其容器的左侧边缘的距离

  182. 　　layout_below - 放置当前元素到指定的元素的下面

  184. 　　layout_alignRight - 当前元素与指定的元素右对齐

  186. 　　-->

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

  190. 　　android:layout_width="fill_parent" android:layout_height="fill_parent">

  192. 　　< TextView android:layout_width="wrap_content" android:id="@+id/abc"
  193. android:layout_height="wrap_content" android:text="centerInParent=true"
  194. 　　android:layout_centerInParent="true" />

  196. 　　< TextView android:layout_width="wrap_content"

  198. 　　android:layout_height="wrap_content" android:text="marginLeft=20px"

  200. 　　android:layout_marginLeft="20px" />

  202. 　　< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="xxx" android:layout_below="@id/abc" android:layout_alignRight="@id/abc" />

  204. 　　< /RelativeLayout>

  206. 　　< /LinearLayout>
复制代码




欢迎光临 Scripts 学盟 (http://www.iscripts.org/) Powered by Discuz! X2