经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
一起学Android之Layout
来源：cnblogs　　作者：Alan.hsiang　　时间：2018/12/17 9:38:46　　对本文有异议

本文简述在Android开发中布局的简单应用，属于基础知识，仅供学习分享使用。

概述

在Android UI开发中，布局类型主要有两种：LinearLayout(线性布局)和RelativeLayout(相对布局)，两种布局类型各有各的优势与使用场景。

LinearLayout（线性布局）

线性布局允许所有的子元素，以单独的方向进行排列（水平或垂直），所有的元素像栈一样一个接一个的插入，所以如果是垂直(vertical)方向，则每一行只有一个元素。如果是水平( horizontal)方向，则只有一行。（如下图1所示）

线性布局重要属性

android:orientation 设置排列的方向。主要有两个值：horizontal(水平)，vertical(垂直)。

android:layout_weight 权重，按比例分配剩余空间。

 

　　　　　　　　（图1）                                                       （图2）

RelativeLayout(相对布局)

相对布局是指所有子元素以相对的位置进行定位。一个元素可以通过相对于指定的同级元素（如，左边，右边，上边，下边）进行定位，也可以通过父元素进行定位（如，布局控件的顶端，左端，右端，底部等）（如上图2 所示）。如果发现页面中有多个线性布局进行嵌套，那么你就应该用一个相对布局来替换它。

相对布局重要属性

  • android:layout_alignParentTop 是否位于父控件的顶部（true 或 false）
  • android:layout_alignParentBottom 是否位于父控件的底部（true 或 false）
  • android:layout_alignParentLeft 是否位于父控件的左边（true 或 false）
  • android:layout_alignParentRight 是否位于父控件的右边（true 或 false）
  • android:layout_centerInParent 是否位于父控件的中心（true 或 false）
  • android:layout_toLeftOf 位于指定控件的左边（值为控件的ID）
  • android:layout_toRightOf 位于指定控件的右边（值为控件的ID）
  • android:layout_above 位于指定控件的上边（值为控件的ID）
  • android:layout_below 位于指定控件的下边（值为控件的ID）

实例截图

如下图1所示为线性布局（相对简单），如下图2所示，为相对布局（相对复杂）

 

                     图3                                                                         图4

布局源程序

线性布局

  1.   1 <?xml version="1.0" encoding="utf-8"?>
  2.   2 <LinearLayout
  3.   3     xmlns:android="http://schemas.android.com/apk/res/android"
  4.   4     xmlns:tools="http://schemas.android.com/tools"
  5.   5     android:layout_width="match_parent"
  6.   6     android:layout_height="match_parent"
  7.   7     android:paddingBottom="@dimen/activity_vertical_margin"
  8.   8     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.   9     android:paddingRight="@dimen/activity_horizontal_margin"
  10.  10     android:paddingTop="@dimen/activity_vertical_margin"
  11.  11     android:orientation="vertical"
  12.  12     tools:context="com.hex.demolayout.LinearActivity">
  13.  13     <TextView
  14.  14         android:id="@+id/tv_text"
  15.  15         android:text="@string/tv_name"
  16.  16         android:textSize="20dp"
  17.  17         android:layout_marginTop="5dp"
  18.  18         android:textColor="@color/colorBlue"
  19.  19         android:layout_width="match_parent"
  20.  20         android:layout_height="wrap_content"/>
  21.  21     <EditText
  22.  22         android:id="@+id/txt_name"
  23.  23         android:hint="@string/hint_name"
  24.  24         android:layout_width="match_parent"
  25.  25         android:layout_height="wrap_content"/>
  26.  26     <TextView
  27.  27         android:id="@+id/tv_age"
  28.  28         android:text="@string/tv_age"
  29.  29         android:textSize="20dp"
  30.  30         android:layout_marginTop="5dp"
  31.  31         android:textColor="@color/colorBlue"
  32.  32         android:layout_width="match_parent"
  33.  33         android:layout_height="wrap_content"/>
  34.  34     <EditText
  35.  35         android:id="@+id/txt_age"
  36.  36         android:hint="@string/hint_name"
  37.  37         android:layout_width="match_parent"
  38.  38         android:layout_height="wrap_content"/>
  39.  39     <TextView
  40.  40         android:id="@+id/tv_sex"
  41.  41         android:text="@string/tv_sex"
  42.  42         android:textSize="20dp"
  43.  43         android:layout_marginTop="5dp"
  44.  44         android:textColor="@color/colorBlue"
  45.  45         android:layout_width="match_parent"
  46.  46         android:layout_height="wrap_content"/>
  47.  47     <RadioGroup
  48.  48         android:id="@+id/rg_sex"
  49.  49         android:layout_marginTop="5dp"
  50.  50         android:orientation="horizontal"
  51.  51         android:layout_width="match_parent"
  52.  52         android:layout_height="wrap_content">
  53.  53         <RadioButton
  54.  54             android:id="@+id/rb_male"
  55.  55             android:text="@string/male"
  56.  56             android:textSize="20sp"
  57.  57             android:checked="true"
  58.  58             android:layout_width="wrap_content"
  59.  59             android:layout_height="wrap_content"/>
  60.  60         <RadioButton
  61.  61             android:id="@+id/rb_female"
  62.  62             android:textSize="20sp"
  63.  63             android:text="@string/female"
  64.  64             android:layout_marginLeft="30dp"
  65.  65             android:layout_width="wrap_content"
  66.  66             android:layout_height="wrap_content"/>
  67.  67     </RadioGroup>
  68.  68     <TextView
  69.  69         android:id="@+id/tv_love"
  70.  70         android:text="@string/love"
  71.  71         android:textSize="20dp"
  72.  72         android:layout_marginTop="5dp"
  73.  73         android:textColor="@color/colorBlue"
  74.  74         android:layout_width="match_parent"
  75.  75         android:layout_height="wrap_content"/>
  76.  76     <LinearLayout
  77.  77         android:layout_width="match_parent"
  78.  78         android:layout_height="wrap_content"
  79.  79         android:layout_marginTop="10dp"
  80.  80         android:orientation="horizontal">
  81.  81         <CheckBox
  82.  82             android:id="@+id/ck_basketball"
  83.  83             android:text="@string/basketball"
  84.  84             android:textSize="20dp"
  85.  85             android:layout_width="wrap_content"
  86.  86             android:layout_height="wrap_content"/>
  87.  87         <CheckBox
  88.  88             android:id="@+id/ck_football"
  89.  89             android:text="@string/football"
  90.  90             android:textSize="20dp"
  91.  91             android:layout_marginLeft="30dp"
  92.  92             android:layout_width="wrap_content"
  93.  93             android:layout_height="wrap_content"/>
  94.  94         <CheckBox
  95.  95             android:id="@+id/ck_game"
  96.  96             android:text="@string/game"
  97.  97             android:textSize="20dp"
  98.  98             android:layout_marginLeft="30dp"
  99.  99             android:layout_width="wrap_content"
  100. 100             android:layout_height="wrap_content"/>
  101. 101     </LinearLayout>
  102. 102     <TextView
  103. 103         android:id="@+id/tv_school"
  104. 104         android:text="@string/school"
  105. 105         android:textSize="20dp"
  106. 106         android:layout_marginTop="5dp"
  107. 107         android:textColor="@color/colorBlue"
  108. 108         android:layout_width="match_parent"
  109. 109         android:layout_height="wrap_content"/>
  110. 110     <EditText
  111. 111         android:id="@+id/txt_school"
  112. 112         android:hint="@string/hint_school"
  113. 113         android:layout_width="match_parent"
  114. 114         android:layout_height="wrap_content"/>
  115. 115     <TextView
  116. 116         android:id="@+id/tv_addr"
  117. 117         android:text="@string/addr"
  118. 118         android:textSize="20dp"
  119. 119         android:layout_marginTop="5dp"
  120. 120         android:textColor="@color/colorBlue"
  121. 121         android:layout_width="match_parent"
  122. 122         android:layout_height="wrap_content"/>
  123. 123     <EditText
  124. 124         android:id="@+id/txt_addr"
  125. 125         android:hint="@string/hint_addr"
  126. 126         android:layout_width="match_parent"
  127. 127         android:layout_height="wrap_content"/>
  128. 128     <Button
  129. 129         android:id="@+id/bn_submit"
  130. 130         android:text="@string/bn_submit"
  131. 131         android:textColor="@color/colorBlue"
  132. 132         android:layout_width="match_parent"
  133. 133         android:layout_height="wrap_content"/>
  134. 134 </LinearLayout>
View Code

相对布局

  1.   1 <?xml version="1.0" encoding="utf-8"?>
  2.   2 <RelativeLayout
  3.   3     xmlns:android="http://schemas.android.com/apk/res/android"
  4.   4     xmlns:tools="http://schemas.android.com/tools"
  5.   5     android:layout_width="match_parent"
  6.   6     android:layout_height="match_parent"
  7.   7     android:paddingBottom="@dimen/activity_vertical_margin"
  8.   8     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.   9     android:paddingRight="@dimen/activity_horizontal_margin"
  10.  10     android:paddingTop="@dimen/activity_vertical_margin"
  11.  11     tools:context="com.hex.demolayout.MainActivity">
  12.  12 
  13.  13     <TextView
  14.  14         android:id="@+id/tv_title"
  15.  15         android:layout_centerHorizontal="true"
  16.  16         android:layout_alignParentTop="true"
  17.  17         android:layout_width="wrap_content"
  18.  18         android:layout_height="wrap_content"
  19.  19         android:textSize="30dp"
  20.  20         android:textColor="@color/colorBlue"
  21.  21         android:layout_margin="3dp"
  22.  22         android:text="@string/nine_tip"/>
  23.  23     <TextView
  24.  24         android:id="@+id/tv_center"
  25.  25         android:text="@string/center"
  26.  26         android:textSize="30dp"
  27.  27         android:layout_margin="3dp"
  28.  28         android:onClick="open"
  29.  29         android:textColor="@color/colorRed"
  30.  30         android:layout_centerInParent="true"
  31.  31         android:layout_width="wrap_content"
  32.  32         android:layout_height="wrap_content"/>
  33.  33     <TextView
  34.  34         android:id="@+id/tv_east"
  35.  35         android:text="@string/east"
  36.  36         android:textSize="30dp"
  37.  37         android:layout_margin="3dp"
  38.  38         android:textColor="@color/colorRed"
  39.  39         android:layout_alignParentLeft="true"
  40.  40         android:layout_centerVertical="true"
  41.  41         android:layout_width="wrap_content"
  42.  42         android:layout_height="wrap_content"/>
  43.  43     <TextView
  44.  44         android:id="@+id/tv_west"
  45.  45         android:text="@string/west"
  46.  46         android:textSize="30dp"
  47.  47         android:layout_margin="3dp"
  48.  48         android:textColor="@color/colorRed"
  49.  49         android:layout_alignParentRight="true"
  50.  50         android:layout_centerVertical="true"
  51.  51         android:layout_width="wrap_content"
  52.  52         android:layout_height="wrap_content"/>
  53.  53     <TextView
  54.  54         android:id="@+id/tv_north"
  55.  55         android:text="@string/north"
  56.  56         android:textSize="30dp"
  57.  57         android:layout_margin="3dp"
  58.  58         android:textColor="@color/colorRed"
  59.  59         android:layout_alignParentBottom="true"
  60.  60         android:layout_centerHorizontal="true"
  61.  61         android:layout_width="wrap_content"
  62.  62         android:layout_height="wrap_content"/>
  63.  63     <TextView
  64.  64         android:id="@+id/tv_south"
  65.  65         android:text="@string/south"
  66.  66         android:textSize="30dp"
  67.  67         android:layout_margin="3dp"
  68.  68         android:textColor="@color/colorRed"
  69.  69         android:layout_below="@id/tv_title"
  70.  70         android:layout_centerHorizontal="true"
  71.  71         android:layout_width="wrap_content"
  72.  72         android:layout_height="wrap_content"/>
  73.  73     <TextView
  74.  74         android:id="@+id/tv_east_south"
  75.  75         android:text="@string/east_south"
  76.  76         android:textSize="30dp"
  77.  77         android:layout_margin="3dp"
  78.  78         android:textColor="@color/colorRed"
  79.  79         android:layout_below="@id/tv_title"
  80.  80         android:layout_alignParentLeft="true"
  81.  81         android:layout_width="wrap_content"
  82.  82         android:layout_height="wrap_content"/>
  83.  83     <TextView
  84.  84         android:id="@+id/tv_west_south"
  85.  85         android:text="@string/west_south"
  86.  86         android:textSize="30dp"
  87.  87         android:layout_margin="3dp"
  88.  88         android:textColor="@color/colorRed"
  89.  89         android:layout_below="@id/tv_title"
  90.  90         android:layout_alignParentRight="true"
  91.  91         android:layout_width="wrap_content"
  92.  92         android:layout_height="wrap_content"/>
  93.  93     <TextView
  94.  94         android:id="@+id/tv_east_north"
  95.  95         android:text="@string/east_north"
  96.  96         android:textSize="30dp"
  97.  97         android:layout_margin="3dp"
  98.  98         android:textColor="@color/colorRed"
  99.  99         android:layout_alignParentBottom="true"
  100. 100         android:layout_width="wrap_content"
  101. 101         android:layout_height="wrap_content"/>
  102. 102     <TextView
  103. 103         android:id="@+id/tv_west_north"
  104. 104         android:text="@string/west_north"
  105. 105         android:textSize="30dp"
  106. 106         android:layout_margin="3dp"
  107. 107         android:textColor="@color/colorRed"
  108. 108         android:layout_alignParentBottom="true"
  109. 109         android:layout_alignParentRight="true"
  110. 110         android:layout_width="wrap_content"
  111. 111         android:layout_height="wrap_content"/>
  112. 112     <TextView
  113. 113         android:id="@+id/tv_xun"
  114. 114         android:text="@string/xun"
  115. 115         android:textSize="30dp"
  116. 116         android:layout_margin="3dp"
  117. 117         android:textColor="@color/colorGreen"
  118. 118         android:layout_below="@id/tv_east_south"
  119. 119         android:layout_width="wrap_content"
  120. 120         android:layout_height="wrap_content"/>
  121. 121     <TextView
  122. 122         android:id="@+id/tv_li"
  123. 123         android:text="@string/li"
  124. 124         android:textSize="30dp"
  125. 125         android:layout_margin="3dp"
  126. 126         android:textColor="@color/colorGreen"
  127. 127         android:layout_below="@id/tv_south"
  128. 128         android:layout_centerHorizontal="true"
  129. 129         android:layout_width="wrap_content"
  130. 130         android:layout_height="wrap_content"/>
  131. 131     <TextView
  132. 132         android:id="@+id/tv_kun"
  133. 133         android:text="@string/kun"
  134. 134         android:textSize="30dp"
  135. 135         android:layout_margin="3dp"
  136. 136         android:textColor="@color/colorGreen"
  137. 137         android:layout_below="@id/tv_west_south"
  138. 138         android:layout_alignParentRight="true"
  139. 139         android:layout_width="wrap_content"
  140. 140         android:layout_height="wrap_content"/>
  141. 141     <TextView
  142. 142         android:id="@+id/tv_zen"
  143. 143         android:text="@string/zen"
  144. 144         android:textSize="30dp"
  145. 145         android:layout_margin="3dp"
  146. 146         android:textColor="@color/colorGreen"
  147. 147         android:layout_toRightOf="@id/tv_east"
  148. 148         android:layout_centerVertical="true"
  149. 149         android:layout_width="wrap_content"
  150. 150         android:layout_height="wrap_content"/>
  151. 151     <TextView
  152. 152         android:id="@+id/tv_dui"
  153. 153         android:text="@string/dui"
  154. 154         android:textSize="30dp"
  155. 155         android:layout_margin="3dp"
  156. 156         android:textColor="@color/colorGreen"
  157. 157         android:layout_toLeftOf="@id/tv_west"
  158. 158         android:layout_centerVertical="true"
  159. 159         android:layout_width="wrap_content"
  160. 160         android:layout_height="wrap_content"/>
  161. 161     <TextView
  162. 162         android:id="@+id/tv_gen"
  163. 163         android:text="@string/gen"
  164. 164         android:textSize="30dp"
  165. 165         android:layout_margin="3dp"
  166. 166         android:textColor="@color/colorGreen"
  167. 167         android:layout_above="@id/tv_east_north"
  168. 168         android:layout_width="wrap_content"
  169. 169         android:layout_height="wrap_content"/>
  170. 170     <TextView
  171. 171         android:id="@+id/tv_kan"
  172. 172         android:text="@string/kan"
  173. 173         android:textSize="30dp"
  174. 174         android:layout_margin="3dp"
  175. 175         android:layout_above="@id/tv_north"
  176. 176         android:textColor="@color/colorGreen"
  177. 177         android:layout_centerHorizontal="true"
  178. 178         android:layout_width="wrap_content"
  179. 179         android:layout_height="wrap_content"/>
  180. 180     <TextView
  181. 181         android:id="@+id/tv_qan"
  182. 182         android:text="@string/qan"
  183. 183         android:textSize="30dp"
  184. 184         android:layout_margin="3dp"
  185. 185         android:textColor="@color/colorGreen"
  186. 186         android:layout_above="@id/tv_west_north"
  187. 187         android:layout_alignRight="@id/tv_west_north"
  188. 188         android:layout_width="wrap_content"
  189. 189         android:layout_height="wrap_content"/>
  190. 190     <TextView
  191. 191         android:id="@+id/tv_mu"
  192. 192         android:text="@string/mu"
  193. 193         android:textSize="30dp"
  194. 194         android:layout_margin="3dp"
  195. 195         android:textColor="@color/colorBlue"
  196. 196         android:layout_below="@id/tv_xun"
  197. 197         android:layout_width="wrap_content"
  198. 198         android:layout_height="wrap_content"/>
  199. 199     <TextView
  200. 200         android:id="@+id/tv_huo"
  201. 201         android:text="@string/huo"
  202. 202         android:textSize="30dp"
  203. 203         android:layout_margin="3dp"
  204. 204         android:textColor="@color/colorBlue"
  205. 205         android:layout_below="@id/tv_li"
  206. 206         android:layout_centerHorizontal="true"
  207. 207         android:layout_width="wrap_content"
  208. 208         android:layout_height="wrap_content"/>
  209. 209     <TextView
  210. 210         android:id="@+id/tv_tu"
  211. 211         android:text="@string/tu"
  212. 212         android:textSize="30dp"
  213. 213         android:layout_margin="3dp"
  214. 214         android:textColor="@color/colorBlue"
  215. 215         android:layout_below="@id/tv_kun"
  216. 216         android:layout_alignParentRight="true"
  217. 217         android:layout_width="wrap_content"
  218. 218         android:layout_height="wrap_content"/>
  219. 219     <TextView
  220. 220         android:id="@+id/tv_mu2"
  221. 221         android:text="@string/mu"
  222. 222         android:textSize="30dp"
  223. 223         android:layout_margin="3dp"
  224. 224         android:textColor="@color/colorBlue"
  225. 225         android:layout_below="@id/tv_zen"
  226. 226         android:layout_alignLeft="@id/tv_zen"
  227. 227         android:layout_width="wrap_content"
  228. 228         android:layout_height="wrap_content"/>
  229. 229     <TextView
  230. 230         android:id="@+id/tv_tu2"
  231. 231         android:text="@string/tu"
  232. 232         android:textSize="30dp"
  233. 233         android:layout_margin="3dp"
  234. 234         android:textColor="@color/colorBlue"
  235. 235         android:layout_below="@id/tv_center"
  236. 236         android:layout_alignLeft="@id/tv_center"
  237. 237         android:layout_width="wrap_content"
  238. 238         android:layout_height="wrap_content"/>
  239. 239     <TextView
  240. 240         android:id="@+id/tv_jin"
  241. 241         android:text="@string/jin"
  242. 242         android:textSize="30dp"
  243. 243         android:textColor="@color/colorBlue"
  244. 244         android:layout_margin="3dp"
  245. 245         android:layout_below="@id/tv_dui"
  246. 246         android:layout_alignLeft="@id/tv_dui"
  247. 247         android:layout_width="wrap_content"
  248. 248         android:layout_height="wrap_content"/>
  249. 249     <TextView
  250. 250         android:id="@+id/tv_tu3"
  251. 251         android:text="@string/tu"
  252. 252         android:textSize="30dp"
  253. 253         android:layout_margin="3dp"
  254. 254         android:textColor="@color/colorBlue"
  255. 255         android:layout_above="@id/tv_gen"
  256. 256         android:layout_width="wrap_content"
  257. 257         android:layout_height="wrap_content"/>
  258. 258     <TextView
  259. 259         android:id="@+id/tv_shui"
  260. 260         android:text="@string/shui"
  261. 261         android:textSize="30dp"
  262. 262         android:layout_margin="3dp"
  263. 263         android:layout_above="@id/tv_kan"
  264. 264         android:textColor="@color/colorBlue"
  265. 265         android:layout_centerHorizontal="true"
  266. 266         android:layout_width="wrap_content"
  267. 267         android:layout_height="wrap_content"/>
  268. 268     <TextView
  269. 269         android:id="@+id/tv_jin2"
  270. 270         android:text="@string/jin"
  271. 271         android:textSize="30dp"
  272. 272         android:layout_margin="3dp"
  273. 273         android:layout_above="@id/tv_qan"
  274. 274         android:textColor="@color/colorBlue"
  275. 275         android:layout_alignLeft="@id/tv_qan"
  276. 276         android:layout_width="wrap_content"
  277. 277         android:layout_height="wrap_content"/>
  278. 278 </RelativeLayout>
View Code

 

备注

基础知识学习，从零开始。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号