2.3 RelativeLayout——相对布局的应用
本节通过RelativeLayout相对布局的应用，构建了一个为图片添加说明的小程序的界面，本程序可以在图片的上、下、左、右为图片添加说明信息。通过本程序的实现，读者可以了解到RelativeLayout相对布局的具体应用。
1. 实例概述
本节实现了对图片不同位置添加说明信息的小程序，通过单击位于主界面上、下、左、右的4个按钮，可以在图片对应的位置添加文本编辑框，进而为图片输入说明信息。
2. 运行效果
本案例的运行效果图如图2-3所示。
图2-3 为图片添加说明小软件截图
提示：本程序的功能是为图片添加图片说明，可以在图片的上、下、左、右添加说明信息。如单击“下”按钮，则会在图片下方弹出文本编辑框，用于添加图片说明信息，如图2-3所示。
3. 技术概要
该小程序的开发主要运用了RelativeLayout相对布局的相关知识。相对布局容器中的控件会根据所设置的参照控件和参数进行相对布局。参照控件可以是上层容器，也可以是本层的兄弟控件。但要注意的是，被参照的控件必须要在参照其的控件前定义。
进行相对布局时可能用到的属性有很多，但都不复杂，首先看属性值为true或false的属性，如表2.2所示。
表2.2 RelativeLayout属性值为true或false的属性
提示：上述属性使用时全部需要加上“android：”前缀。
然后，再看属性值为其他控件id的属性，如表2.3所示。
表2.3 RelativeLayout属性值为其他控件id的属性
提示：上述属性使用时也需要全部加上“android：”前缀。
最后看属性值以像素为单位的属性，如表2.4所示。
表2.4 RelativeLayout属性值以像素为单位的属性
提示：上述属性使用时也需要全部加上“android：”前缀。
4. 核心代码
首先介绍的是本程序的主界面main.xml的开发，代码如下。
代码位置：见随书光盘中源代码/第2章/Sample2_3/res/layout目录下的main.xml。
1 <?xml version="1.0" encoding="utf-8"?> <!--版本号和编码方式-->
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:id="@+id/rl"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent"
6 android:background="#edab4a"
7 >
<!--RelativeLayout布局-->
8 <Button
9 android:text="上"
10 android:id="@+id/Shang"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:layout_alignParentTop="true"
14 android:layout_centerHorizontal="true"
15 > <!--Button控件-->
16 </Button>
17 <Button
18 android:text="下"
19 android:id="@+id/Xia"
20 android:layout_width="wrap_content"
21 android:layout_height="wrap_content"
22 android:layout_alignParentBottom="true"
23 android:layout_centerHorizontal="true"
24 > <!--Button控件-->
25 </Button>
26 <Button
27 android:text="左"
28 android:id="@+id/Zuo"
29 android:layout_width="wrap_content"
30 android:layout_height="wrap_content"
31 android:layout_alignParentLeft="true"
32 android:layout_centerVertical="true"
33 >
34 </Button> <!--Button控件-->
35 <Button
36 android:text="右"
37 android:id="@+id/You"
38 android:layout_width="wrap_content"
39 android:layout_height="wrap_content"
40 android:layout_alignParentRight="true"
41 android:layout_centerVertical="true"
42 >
43 </Button> <!--Button控件-->
44 <ImageView
45 android:src="@drawable/fengjing"
46 android:id="@+id/Start"
47 android:layout_width="60dip"
48 android:layout_height="100dip"
49 android:layout_centerInParent="true"
50 >
51 </ImageView>
<!--ImageView-->
52 </RelativeLayout>
提示：在该XML文件中实现了程序的布局。总的布局为RelativeLayout布局，其中排列了4个Button按钮和1个ImageView。通过对各个控件的属性设置，实现了本计算器软件的界面效果。
上面已经介绍了本程序主界面main.xml的开发，接下来介绍的是本程序的具体功能的实现，代码如下。
代码位置：见随书光盘中源代码/第2章/Sample2_3/src/com/bn/ex2c目录下的Sample2_3_Activity.class。
1 package com.bn. ex2c; //包名
2 import android.app.Activity; //导入相关类
3 public class Sample2_3_Activity extends Activity {
4 RelativeLayout rl; //相对布局对象
5 Button shang; //上侧按钮
6 Button xia; //下侧按钮
7 Button zuo; //左侧按钮
8 Button you; //右侧按钮
9 ImageView currButton; //记录当前ImageView
10 ImageView start; //ImageView对象
11 public void onCreate(Bundle savedInstanceState) {
12 super.onCreate(savedInstanceState); //调用父类
13 setContentView(R.layout.main); //界面跳转到主界面
14 rl=(RelativeLayout)this.findViewById(R.id.rl);//获取布局对象
15 shang=(Button)this.findViewById(R.id.Shang);//获取当前控件
16 xia=(Button)this.findViewById(R.id.Xia); //下面的按钮
17 zuo=(Button)this.findViewById(R.id.Zuo); //左侧的按钮
18 you=(Button)this.findViewById(R.id.You); //右侧的按钮
19 start=(ImageView)this.findViewById(R.id.Start);//中间的图片
20 currButton=start; //规定当前ImageView
21 shang.setOnClickListener( //监听
22 new OnClickListener(){
23 public void onClick(View v) {
//添加新的EditText
24 EditText temp=new EditText(Sample2_3_Activity.this);25
temp.setText("图片说明"); //设置信息
26 RelativeLayout.LayoutParams lp1 = //设置控件位置
27 new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
95);
28 lp1.addRule(RelativeLayout.ABOVE,currButton.getId());
29 lp1.addRule(RelativeLayout.CENTER_HORIZONTAL,
currButton.getId());
30 rl.addView(temp, lp1); //将控件添加到布局中
31 }});
32 xia.setOnClickListener( //设置监听
33 new OnClickListener(){
34 public void onClick(View v) { //重写onClick方法
35 EditText temp=new EditText(Sample2_3_Activity.this);
//添加新的EditText
36 temp.setText("图片说明");
37 RelativeLayout.LayoutParams lp1 = //设置控件位置
38 new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,95);
39 lp1.addRule(RelativeLayout.BELOW,currButton.getId());
40 lp1.addRule(RelativeLayout.CENTER_HORIZONTAL,
currButton.getId());
41 rl.addView(temp, lp1); //将控件添加到布局中
42 }});
43 zuo.setOnClickListener( //设置监听
44 new OnClickListener(){
45 public void onClick(View v) { //重写onClick方法
//添加新的EditText
46 EditText temp=new EditText(Sample2_3_Activity.this);
47 temp.setText("图片说明"); //设置文本框的文字
48 RelativeLayout.LayoutParams lp1 = //设置控件位置
49 new RelativeLayout.LayoutParams(95,ViewGroup.LayoutParams.WRAP_CONTENT);
50 lp1.addRule(RelativeLayout.LEFT_OF,currButton.getId());
51 lp1.addRule(RelativeLayout.CENTER_VERTICAL,
currButton.getId());
52 rl.addView(temp, lp1); //将控件添加到布局中
53 }});
54 you.setOnClickListener( //单击“右”-键时，在currButton下方添加新控件
55 new OnClickListener(){
56 public void onClick(View v) {
//添加新的EditText
57 EditText temp=new EditText(Sample2_3_Activity.this);
58 temp.setText("图片说明");
59 RelativeLayout.LayoutParams lp1 = //设置控件位置
60 new
RelativeLayout.LayoutParams(95,ViewGroup.LayoutParams.WRAP_CONTENT);
61 lp1.addRule(RelativeLayout.RIGHT_OF,currButton.getId());
62 lp1.addRule(RelativeLayout.CENTER_VERTICAL,
currButton.getId());
63 rl.addView(temp, lp1); //将控件添加到布局中
64 }});
65 }}
● 第4~10行为声明该类的成员变量，包括界面的控件对象和布局对象。
● 第14~20行为获取界面控件和布局资源。
● 第21~65行为上、下、左、右4个按钮添加监听器，当单击按钮时，在布局中的相应位置添加新的EditText控件，并设置该控件的属性。