- Android编程经典200例
- 楚无咎编著
- 1773字
- 2020-08-28 23:38:58
实例3 相对性布局的方法
在本小节中，通过RelativeLayout相对布局的应用，构建了一个为图片添加说明的小程序的界面。本程序可以在图片的上、下、左、右为图片添加说明信息。通过本程序的实现，读者可以了解到RelativeLayout相对布局的具体应用。
【实例描述】
在本小节中实现了对图片不同位置添加说明信息的小程序，通过单击位于主界面上、下、左、右的四个按钮，可以在图片对应的位置添加文本编辑框，进而为图片输入说明信息。本实例的运行效果图如图2-3所示。
图2-3 为图片添加说明小软件截图
提示：本程序的功能是为图片添加图片说明，可以在图片的上侧、下侧、左侧、右侧添加说明信息。如单击“下”按钮，则会在图片下方弹出文本编辑框，用于添加图片说明信息，如图2-3所示。
【实现过程】
该小程序的开发主要运用了RelativeLayout相对布局的相关知识。相对布局的容器中控件会根据所设置的参照控件和参数进行相对布局。参照控件可以是上层容器，也可以是本层的兄弟控件。但要注意的是，被参照的控件必须要在参照其的控件前定义。
进行相对布局时可能用到的属性有很多，但都不复杂，首先看属性值为true或false的属性，如表2.2所列。
表2.2 RelativeLayout相对布局属性表1
提示：使用上述属性时全部都要加上“android：”前缀。
接着再看属性值为其他控件id的属性，如表2.3所列。
表2.3 RelativeLayout相对布局属性表2
提示：使用上述属性时也要全部加上“android：”前缀。
最后看属性值以像素为单位的属性，如表2.4所列。
表2.4 RelativeLayout相对布局属性表3
提示：使用上述属性时也要全部加上“android：”前缀。
【代码解析】
首先为读者介绍本程序主界面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布局，其中排列了四个Button按钮和一个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）{
24 EditText temp=new EditText（Sample2_3_Activity.this）;
//添加新的EditText
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方法
46 EditText temp=new EditText（Sample2_3_Activity.this）;
//添加新的EditText
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）{
57 EditText temp=new EditText（Sample2_3_Activity.this）;
//添加新的EditText
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行，为上、下、左、右四个按钮添加监听器，当单击按钮时，在布局中的相应位置添加新的EditText控件，并设置该控件的属性。