Android开发：界面布局的基本使用

问题提出

在android开发中，一个好的程序，除了强大的功能以外，还要有一个能吸引别人眼球的界面。纵观当下流行的诸多Android软件，那些绚丽多彩，美轮美奂的程序界面与手触屏完美结合，给我们带来了不一般的用户体验，也把我们带进了梦幻般的Android世界。那么，如何开发出这些界面，让我们的Android软件在众多同类软件中脱颖而出呢？

问题分析

在android开发中，用于界面布局的控件主要在Layouts分类中，常用的有线性布局控件LinearLayout、相对布局控件RelativeLayout、框架布局控件FrameLayout、表格布局控件TableLayout等。本文将简要介绍下这几个布局控件，并通过一个实例演示这些控件的使用。

问题解决

     在Eclipse中，界面布局有两种方式，我们可以在Graphical Layout中直接将控件拖入可视化界面，并在Property中对各种属性进行设置。也可以直接编辑我们的xml文件，用代码进行布局。如图：



     简单地说，界面布局主要就是做两件事情，一个是安排控件顺序，另一个就是设置控件属性。控件的属性有很多，且不同控件的属性既有共性也有个性，当然常用的并不多。

1. 三个基本属性

这三个基本属性分别是id、layout_width、layout_height

id不多说，就是控件的编号，最好是一个控件一个编号以免引用时出现二义性；layout_ width: 控件的宽度；layout_ height: 控件的高度。

layout_width和layout_height，都有三个既定值，即”fill_parent”、”match_parent”、” wrap_content”。前两者含义相同，只是说法不同，如果你的程序需要兼容低版本（2.1以下）Android系统，那就使用”fill_parent”，其含义就是与装载自己的容器相同，即容器有多大空间，控件就占据多大的空间，最大的parent就是手机屏幕。而最后一个” wrap_content”，就是控件内容有多大，控件就有多大。

除了这三个既定值外，我们还可以用数值任意指定控件大小，但必须有单位。

单位符号	单位名称	备注
mm	毫米	与日常生活中我们说的毫米一样，物理意义
in	英寸	与日常生活中我们说的英寸一样，物理意义
pt	点	1pt=1/72英寸，物理意义
px	像素	即屏幕的实际像素
dp	设备独立像素	使显示的大小与屏幕密度无关，推荐使用
sp	放大像素	与dp类似，主要用于文字的显示

以一个Button的layout_ width属性为例，xml代码如下：

 

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06 <Button
07 android:id="@+id/button1"
08 android:layout_width="wrap_content"
09 android:layout_height="wrap_content"
10 android:text="宽度：wrap_content" />
11 <Button
12 android:id="@+id/button3"
13 android:layout_width="200dp"
14 android:layout_height="wrap_content"
15 android:text="宽度：200dp" />
16 <Button
17 android:id="@+id/button2"
18 android:layout_width="match_parent"
19 android:layout_height="wrap_content"
20 android:text="宽度：match_parent" />
21 </LinearLayout>

 

效果如图：

 

2.线性布局控件LinearLayout

2.1 属性orientation 

LinearLayout是布局中最基本的控件，也是最常用的布局控件。它有两种，一种是水平布置（horizontal）；另一种是垂直布置（vertical）,通过属性orientation来设置，水平布局时只有一行可以有若干列；垂直布局时只有一列，可以有若干行。

2.2属性gravity

android:gravity属性用来控制放置在本LinearLayout内的控件的对齐方式

android:layout_gravity属性是本LinearLayout控件相对于父容器的对齐方式

1.3 属性layout_weight

android:layout_weight是一个重要的属性，也是一个麻烦的属性，用的好可以让布局更加合理、紧凑。用的不好会使布局显得十分别扭。这个属性的字面意思是“权重”，就是一个比例系数，即表示控件在父容器中所占的空间比例。系数越大，占的比例越大，默认值为0；如果父容器中的各个子控件的android:layout_weight值相等，那么他们将均分父容器空间。

LinearLayout可以嵌套，也可以放置其他布局控件。下面我们在一个垂直的LinearLayout嵌套入两个水平的LinearLayout、若干Button和TextView。

Xml代码如下：

 

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06 <TextView
07     android:id="@+id/textView1"
08     android:layout_width="wrap_content"
09     android:layout_height="wrap_content"
10     android:text="水平布置-layout_weight不相等"
11     android:textAppearance="?android:attr/textAppearanceLarge" />
12     <LinearLayout
13         android:id="@+id/linearLayout1"
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16         android:orientation="horizontal">
17 <Button
18         android:id="@+id/button1"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:text="btn1"
22         android:layout_weight="1" />
23         <Button
24         android:id="@+id/button2"
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content"
27         android:text="btn2"
28         android:layout_weight="4" />
29         <Button
30         android:id="@+id/button3"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:text=" btn3"
34         android:layout_weight="15"/>
35    </LinearLayout>
36
37     <TextView
38     android:id="@+id/textView2"
39     android:layout_width="wrap_content"
40     android:layout_height="wrap_content"
41     android:text="水平布置-gravity居中"
42     android:layout_gravity="center"
43     android:textAppearance="?android:attr/textAppearanceLarge" />
44
45    <LinearLayout
46         android:id="@+id/linearLayout1"
47         android:layout_width="match_parent"
48         android:layout_height="wrap_content"
49         android:orientation="horizontal"
50         android:gravity="center"
51         >
52         <Button
53         android:id="@+id/button1"
54         android:layout_width="wrap_content"
55         android:layout_height="wrap_content"
56         android:text="btn1" />
57         <Button
58         android:id="@+id/button2"
59         android:layout_width="wrap_content"
60         android:layout_height="wrap_content"
61         android:text=" btn2"  />
62         <Button
63         android:id="@+id/button3"
64         android:layout_width="wrap_content"
65         android:layout_height="wrap_content"
66         android:text="btn3" />
67    </LinearLayout>
68    <Button
69         android:id="@+id/button4"
70         android:layout_width="match_parent"
71         android:layout_height="wrap_content"
72         android:text="垂直布置 btn4" />
73    <Button
74         android:id="@+id/button5"
75         android:layout_width="match_parent"
76         android:layout_height="wrap_content"
77         android:text="垂直布置 btn5" />
78    <TextView
79     android:id="@+id/textView1"
80     android:layout_width="wrap_content"
81     android:layout_height="wrap_content"
82     android:text="以上均为垂直布置"
83     android:textAppearance="?android:attr/textAppearanceLarge" />
84 </LinearLayout>

 

效果如图：

 

3.相对布局控件RelativeLayout

布置在RelativeLayout中的控件会多出几个属性，主要用于处理控件的相对位置——相对于父容器、相对于一个控件元素。常用的属性如下：

属性名称	值	备注
相对于父窗口
layout_alignParentBottom	布尔值	值为true则表示与父窗口底部对齐
layout_alignParentTop	布尔值	值为true则表示与父窗口顶部对齐
layout_alignParentRight	布尔值	值为true则表示与父窗口右侧对齐
layout_alignParentLeft	布尔值	值为true则表示与父窗口左侧对齐
layout_centerInParent	布尔值	值为true则表示在父窗口中居中
layout_centerHorizontal	布尔值	值为true则表示与父窗口中水平居中
layout_centerVertical	布尔值	值为true则表示与父窗口中垂直居中
相对于控件元素
layout_above	参照控件id	该控件的底部对齐参照控件的上方
layout_below	参照控件id	该控件的顶部对齐参照控件的底部
layout_toLeftOf	参照控件id	该控件的右侧对齐参照控件的左侧
layout_toRightOf	参照控件id	该控件的左侧对齐参照控件的右侧

效果如图：

 

4.框架布局控件FrameLayout

这是一个简单的布局，放入里面的控件依次层叠，后方的控件就会盖住先放的控件。

 

5.表格控件TableLayout

一个TableLayout里面有表格行控件TableRow，每个TableRow里布置各自的控件，好比是一个大架子里面放了很多个抽屉，各个抽屉里放着各自的东西，类型可以不同，大小可以不同。如图：

问题总结

         Android开发中页面布局的重要性是不言而喻的。在Android软件开发中常用到的整体布局控件有：线性布局控件LinearLayout、相对布局控件RelativeLayout、框架布局控件FrameLayout、表格布局控件TableLayout等。他们各有各的适用情况。而且这些控件的属性含义是互通的。只要你有创意、一定的美工基础和耐心，你就能开发出美观的界面来。谢谢支持www.androidwhy.com的发展！本文代码在下方附件位置提供下载，有需要请直接下载。

推荐阅读：

Android开发：EditText,TextView以及Button的使用

Android开发：为什么学习Android开发？如何学好Android开发？