Android界面布局
2010-07-24 06:23 $等待$ 阅读(2413) 评论(1) 编辑 收藏 举报对于很多刚刚接触Android的人来说,界面布局应该是件比较头痛的事吧,xml下进行的布局确实有那么点繁琐,适应花了一段时间,最近写了个View的Layout,500多行,真是吐血,不过写完之后对Android界面布局有了蛮深刻的认识~~~
我用到的主要有三种布局方式:
1.Linearlayout:这个很常见,线性布局.大多数情况下将它的空间宽度或高度设置成fill_parent和wrap_content比较合适.最简单的情况,两个TextView,前面一个宽度未知,系统将根据前面TextView的实际宽度在其之后添加另一个TextView.
还有一点,这种布局下两个控件中间要想间隔一定距离的话,中间可以加上一个没有内容,只有宽度的TextView.
2.AbsoluteLayout:前一种情况下,两个控件之间需要一个TextView间隔,很多情况下不太方便,可能需要大量的TextView,就可以考虑使用AbsoluteLayout取而代之了,这种布局需要你给出确定的x,y,都是相对于parent的左上顶点坐标的,一般来说,用这种布局最好给出控件的确定宽度和高度.
3.FrameLayout:这个用的不是那么多,需要知道的就是这种布局下只能显示一个View控件,Layout好像是可以重叠显示的,并且总是在parent的左上角添加.
这三种布局最为常见,其余的看到的不多,RelativeLayout没有用过,也就不好多说,发下图吧,还有代码,不过代码确实比较复杂:
代码
1 <?xml version="1.0" encoding="utf-8"?>
2
3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
4 android:layout_width="fill_parent" android:layout_height="fill_parent"
5 android:background="@drawable/shop_back">
6
7 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
8 android:layout_width="fill_parent" android:layout_height="260px"
9 android:orientation="horizontal">
10
11 <FrameLayout
12 android:layout_width="400px" android:layout_height="fill_parent"
13 android:background="@drawable/frame_border">
14
15 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
16 android:id="@+id/layout1"
17 android:layout_width="fill_parent" android:layout_height="fill_parent"
18 android:orientation="vertical"
19 android:background="@drawable/shopinfo_back">
20
21 <TextView
22 android:layout_width="fill_parent" android:layout_height="20px">
23 </TextView>
24
25 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
26 android:layout_width="fill_parent" android:layout_height="fill_parent">
27
28 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
29 android:layout_width="fill_parent" android:layout_height="fill_parent"
30 android:layout_x="125px" android:layout_y="10px"
31 android:orientation="horizontal">
32
33 <TextView
34 android:layout_width="wrap_content" android:layout_height="wrap_content"
35 android:textSize="20sp"
36 android:text="欢迎光临: ">
37 </TextView>
38
39 <TextView
40 android:id="@+id/shopinfo_shopname"
41 android:layout_width="wrap_content" android:layout_height="wrap_content"
42 android:textSize="20sp">
43 </TextView>
44
45 </LinearLayout>
46
47 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
48 android:layout_width="fill_parent" android:layout_height="fill_parent"
49 android:layout_x="125px" android:layout_y="40px"
50 android:orientation="horizontal">
51
52 <TextView
53 android:layout_width="250px" android:layout_height="wrap_content"
54 android:textSize="14sp"
55 android:text="本店公告: 全场一律七折，机不可失，失不再来">
56 </TextView>
57
58 </LinearLayout>
59
60 <ScrollView
61 android:layout_width="332px" android:layout_height="90px"
62 android:layout_x="25px" android:layout_y="125px"
63 android:scrollbars="vertical"
64 android:fadingEdge="vertical">
65
66 <TextView
67 android:id="@+id/shopinfo_content"
68 android:layout_width="fill_parent" android:layout_height="fill_parent"
69 android:textSize="12sp">
70 </TextView>
71 </ScrollView>
72
73 </AbsoluteLayout>
74
75 </LinearLayout>
76
77
78
79
80 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
81 android:id="@+id/layout2"
82 android:layout_width="fill_parent" android:layout_height="fill_parent"
83 android:orientation="horizontal">
84
85 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
86 android:id="@+id/listview_layout"
87 android:layout_width="160px" android:layout_height="250px"
88 android:orientation="vertical">
89
90 <TextView
91 android:layout_width="fill_parent" android:layout_height="20px">
92 </TextView>
93
94 <ImageView
95 android:id="@+id/list_title_image"
96 android:layout_width="fill_parent" android:layout_height="40px"
97 android:background="@drawable/list_title">
98 </ImageView>
99
100 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
101 android:id="@+id/name_price_title"
102 android:layout_width="fill_parent" android:layout_height="210px">
103
104 <TextView
105 android:layout_width="wrap_content" android:layout_height="30px"
106 android:layout_x="20px" android:layout_y="0px"
107 android:textSize="14sp"
108 android:text="商品名称">
109 </TextView>
110
111 <TextView
112 android:layout_width="wrap_content" android:layout_height="30px"
113 android:layout_x="110px" android:layout_y="0px"
114 android:textSize="14sp"
115 android:text="价格">
116 </TextView>
117
118 <ListView
119 android:id="@+id/product_list"
120 android:layout_width="140px" android:layout_height="150px"
121 android:layout_x="10px" android:layout_y="30px">
122 </ListView>
123
124 </AbsoluteLayout>
125
126 </LinearLayout>
127
128 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
129 android:id="@+id/product_layout"
130 android:layout_width="240px" android:layout_height="250px"
131 android:orientation="vertical">
132
133 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
134 android:id="@+id/brief_layout"
135 android:layout_width="fill_parent" android:layout_height="110px">
136
137 <Button
138 android:id="@+id/page_later"
139 android:layout_width="20px" android:layout_height="100px"
140 android:layout_x="0px" android:layout_y="10px"
141 android:background="@drawable/later_image">
142 </Button>
143
144 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
145 android:layout_width="100px" android:layout_height="76px"
146 android:layout_x="20px" android:layout_y="22px"
147 android:background="@drawable/image_border">
148
149 <ImageView
150 android:id="@+id/image"
151 android:layout_width="96px" android:layout_height="72px"
152 android:layout_x="2px" android:layout_y="2px">
153 </ImageView>
154
155 </AbsoluteLayout>
156
157 <Button
158 android:id="@+id/page_next"
159 android:layout_width="20px" android:layout_height="100px"
160 android:layout_x="120px" android:layout_y="10px"
161 android:background="@drawable/next_image">
162 </Button>
163
164 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
165 android:id="@+id/title_layout"
166 android:layout_width="95px" android:layout_height="100px"
167 android:layout_x="140px" android:layout_y="10px"
168 android:orientation="vertical">
169
170 <TextView
171 android:layout_width="fill_parent" android:layout_height="10px"
172 android:textSize="12sp">
173 </TextView>
174
175 <TextView
176 android:id="@+id/product_name_info"
177 android:layout_width="fill_parent" android:layout_height="30px"
178 android:textSize="12sp">
179 </TextView>
180
181 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
182 android:layout_width="wrap_content" android:layout_height="wrap_content"
183 android:orientation="horizontal">
184
185 <TextView
186 android:layout_width="wrap_content" android:layout_height="wrap_content"
187 android:textSize="10sp"
188 android:text="价格:">
189 </TextView>
190
191 <TextView
192 android:id="@+id/product_price_info"
193 android:layout_width="wrap_content" android:layout_height="wrap_content"
194 android:textSize="10sp">
195 </TextView>
196
197 </LinearLayout>
198
199 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
200 android:layout_width="wrap_content" android:layout_height="wrap_content"
201 android:orientation="horizontal">
202
203 <TextView
204 android:layout_width="wrap_content" android:layout_height="wrap_content"
205 android:textSize="10sp"
206 android:text="类型：">
207 </TextView>
208
209 <TextView
210 android:id="@+id/product_type_info"
211 android:layout_width="wrap_content" android:layout_height="wrap_content"
212 android:textSize="10sp">
213 </TextView>
214
215 </LinearLayout>
216
217 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
218 android:layout_width="wrap_content" android:layout_height="wrap_content"
219 android:orientation="horizontal">
220
221 <TextView
222 android:layout_width="wrap_content" android:layout_height="wrap_content"
223 android:textSize="10sp"
224 android:text="特点:">
225 </TextView>
226
227 <TextView
228 android:id="@+id/product_feature_info"
229 android:layout_width="wrap_content" android:layout_height="wrap_content"
230 android:textSize="10sp"
231 android:text="时尚简约,功能齐全">
232 </TextView>
233
234 </LinearLayout>
235
236 </LinearLayout>
237
238 </AbsoluteLayout>
239
240 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
241 android:id="@+id/button_layout"
242 android:layout_width="fill_parent" android:layout_height="140px">
243
244 <TextView
245 android:layout_width="fill_parent" android:layout_height="20px"
246 android:layout_x="20px" android:layout_y="0px"
247 android:textSize="12sp"
248 android:text="详细信息:">
249 </TextView>
250
251 <ScrollView
252 android:layout_width="200px" android:layout_height="80px"
253 android:layout_x="20px" android:layout_y="20px"
254 android:scrollbars="vertical"
255 android:fadingEdge="vertical">
256
257 <TextView
258 android:id="@+id/productContent"
259 android:layout_width="fill_parent" android:layout_height="fill_parent"
260 android:textSize="12sp">
261 </TextView>
262 </ScrollView>
263
264 <LinearLayout
265 android:layout_width="90px" android:layout_height="30px"
266 android:layout_x="20px" android:layout_y="110px"
267 android:orientation="horizontal">
268
269 <TextView
270 android:layout_width="wrap_content" android:layout_height="wrap_content"
271 android:textSize="13sp"
272 android:text="我要买: ">
273 </TextView>
274
275 <EditText
276 android:id="@+id/buy_number"
277 android:layout_width="30px" android:layout_height="30px"
278 android:textSize="9sp"
279 android:text="1">
280 </EditText>
281
282 <TextView
283 android:layout_width="wrap_content" android:layout_height="wrap_content"
284 android:textSize="13sp"
285 android:text="件">
286 </TextView>
287
288 </LinearLayout>
289
290 <Button
291 android:id="@+id/button_addshoppingcart"
292 android:layout_width="80px" android:layout_height="20px"
293 android:layout_x="130px" android:layout_y="112px"
294 android:background="@drawable/button_addshoppingcart">
295 </Button>
296
297 </AbsoluteLayout>
298
299 </LinearLayout>
300
301 </LinearLayout>
302
303
304
305
306 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
307 android:id="@+id/layout3"
308 android:layout_width="fill_parent" android:layout_height="fill_parent"
309 android:orientation="horizontal">
310
311 <TextView
312 android:layout_width="30px" android:layout_height="fill_parent">
313 </TextView>
314
315 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
316 android:layout_width="fill_parent" android:layout_height="fill_parent"
317 android:orientation="vertical">
318
319 <TextView
320 android:layout_width="fill_parent" android:layout_height="30px">
321 </TextView>
322
323 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
324 android:layout_width="fill_parent" android:layout_height="30px"
325 android:orientation="horizontal">
326
327 <TextView
328 android:layout_height="wrap_content" android:layout_width="5px" >
329 </TextView>
330
331 <TextView
332 android:layout_height="wrap_content" android:layout_width="95px"
333 android:textSize="16sp"
334 android:text="商品名称">
335 </TextView>
336
337 <TextView
338 android:layout_height="wrap_content" android:layout_width="60px"
339 android:textSize="16sp"
340 android:text="单价">
341 </TextView>
342
343 <TextView
344 android:layout_height="wrap_content" android:layout_width="60px"
345 android:textSize="16sp"
346 android:text="数量">
347 </TextView>
348
349 <TextView
350 android:layout_height="wrap_content" android:layout_width="60px"
351 android:textSize="16sp"
352 android:text="合计">
353 </TextView>
354
355 </LinearLayout>
356
357 <ListView
358 android:id="@+id/shoppingcart_list"
359 android:layout_width="340px" android:layout_height="150px">
360 </ListView>
361
362 <TextView
363 android:layout_height="10px" android:layout_width="fill_parent">
364 </TextView>
365
366 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
367 android:layout_width="fill_parent" android:layout_height="fill_parent"
368 android:orientation="horizontal">
369
370 <TextView
371 android:layout_width="140px" android:layout_height="fill_parent">
372 </TextView>
373
374 <Button
375 android:id="@+id/button_buy"
376 android:layout_width="wrap_content" android:layout_height="wrap_content"
377 android:background="@drawable/button_buyproduct">
378 </Button>
379
380 </LinearLayout>
381
382 </LinearLayout>
383
384 </LinearLayout>
385
386
387
388 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
389 android:id="@+id/layout4"
390 android:layout_width="fill_parent" android:layout_height="fill_parent"
391 android:orientation="horizontal">
392
393 <TextView
394 android:layout_width="30px" android:layout_height="fill_parent">
395 </TextView>
396
397 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
398 android:layout_width="fill_parent" android:layout_height="fill_parent"
399 android:orientation="vertical">
400
401 <TextView
402 android:layout_width="fill_parent" android:layout_height="30px">
403 </TextView>
404
405 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
406 android:layout_width="fill_parent" android:layout_height="50px"
407 android:orientation="horizontal">
408
409 <TextView
410 android:layout_width="wrap_content" android:layout_height="fill_parent"
411 android:textSize="16sp"
412 android:text="此次交易总额:">
413 </TextView>
414
415 <TextView
416 android:id="@+id/totalpay"
417 android:layout_width="wrap_content" android:layout_height="fill_parent"
418 android:textSize="16sp">
419 </TextView>
420
421 <TextView
422 android:layout_width="wrap_content" android:layout_height="fill_parent"
423 android:textSize="16sp"
424 android:text=" ,请填写您的订单.">
425 </TextView>
426
427 </LinearLayout>
428
429 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
430 android:layout_width="fill_parent" android:layout_height="40px"
431 android:orientation="horizontal">
432
433 <TextView
434 android:layout_width="100px" android:layout_height="fill_parent"
435 android:textSize="16sp"
436 android:text="详细地址:">
437 </TextView>
438
439 <EditText
440 android:id="@+id/user_address"
441 android:layout_width="220px" android:layout_height="32px"
442 android:textSize="10sp">
443 </EditText>
444
445 </LinearLayout>
446
447 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
448 android:layout_width="fill_parent" android:layout_height="40px"
449 android:orientation="horizontal">
450
451 <TextView
452 android:layout_width="100px" android:layout_height="fill_parent"
453 android:textSize="16sp"
454 android:text="邮政编码:">
455 </TextView>
456
457 <EditText
458 android:id="@+id/user_zipcode"
459 android:layout_width="220px" android:layout_height="32px"
460 android:textSize="10sp">
461 </EditText>
462
463 </LinearLayout>
464
465 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
466 android:layout_width="fill_parent" android:layout_height="40px"
467 android:orientation="horizontal">
468
469 <TextView
470 android:layout_width="100px" android:layout_height="fill_parent"
471 android:textSize="16sp"
472 android:text="联系号码:">
473 </TextView>
474
475 <EditText
476 android:id="@+id/user_phone"
477 android:layout_width="220px" android:layout_height="32px"
478 android:textSize="10sp">
479 </EditText>
480
481 </LinearLayout>
482
483 <AbsoluteLayout
484 android:layout_width="fill_parent" android:layout_height="50px">
485
486 <Button
487 android:id="@+id/button_pay"
488 android:layout_width="wrap_content" android:layout_height="wrap_content"
489 android:layout_x="60px" android:layout_y="10px"
490 android:background="@drawable/button_pay">
491 </Button>
492
493 <Button
494 android:id="@+id/button_cancelbuy"
495 android:layout_width="wrap_content" android:layout_height="wrap_content"
496 android:layout_x="210px" android:layout_y="10px"
497 android:background="@drawable/button_cancelbuy">
498 </Button>
499
500 </AbsoluteLayout>
501
502 </LinearLayout>
503
504 </LinearLayout>
505
506
507
508 </FrameLayout>
509
510 <AbsoluteLayout
511 android:layout_width="wrap_content" android:layout_height="fill_parent">
512
513 <Button
514 android:id="@+id/button_shopinfo"
515 android:layout_width="wrap_content" android:layout_height="wrap_content"
516 android:layout_x="0px" android:layout_y="30px"
517 android:background="@drawable/button_shopinfo">
518 </Button>
519
520 <Button
521 android:id="@+id/button_productlist"
522 android:layout_width="wrap_content" android:layout_height="wrap_content"
523 android:layout_x="0px" android:layout_y="80px"
524 android:background="@drawable/button_productlist">
525 </Button>
526
527 <Button
528 android:id="@+id/button_shoppingcart"
529 android:layout_width="wrap_content" android:layout_height="wrap_content"
530 android:layout_x="0px" android:layout_y="130px"
531 android:background="@drawable/button_shoppingcart">
532 </Button>
533
534 </AbsoluteLayout>
535
536 </LinearLayout></LinearLayout>
