實例3 相對性布局的方法

在本小節(jié)中，通過RelativeLayout相對布局的應(yīng)用，構(gòu)建了一個為圖片添加說明的小程序的界面。本程序可以在圖片的上、下、左、右為圖片添加說明信息。通過本程序的實現(xiàn)，讀者可以了解到RelativeLayout相對布局的具體應(yīng)用。

【實例描述】

在本小節(jié)中實現(xiàn)了對圖片不同位置添加說明信息的小程序，通過單擊位于主界面上、下、左、右的四個按鈕，可以在圖片對應(yīng)的位置添加文本編輯框，進而為圖片輸入說明信息。本實例的運行效果圖如圖2-3所示。

【實現(xiàn)過程】

該小程序的開發(fā)主要運用了RelativeLayout相對布局的相關(guān)知識。相對布局的容器中控件會根據(jù)所設(shè)置的參照控件和參數(shù)進行相對布局。參照控件可以是上層容器，也可以是本層的兄弟控件。但要注意的是，被參照的控件必須要在參照其的控件前定義。

進行相對布局時可能用到的屬性有很多，但都不復(fù)雜，首先看屬性值為true或false的屬性，如表2.2所列。

接著再看屬性值為其他控件id的屬性，如表2.3所列。

最后看屬性值以像素為單位的屬性，如表2.4所列。

【代碼解析】

首先為讀者介紹本程序主界面main.xml的開發(fā)，代碼如下。

代碼位置：見隨書光盤中源代碼/第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＞

上面已經(jīng)介紹了本程序主界面main.xml的開發(fā)，接下來為讀者介紹本程序具體功能的實現(xiàn)，代碼如下。

代碼位置：見隨書光盤中源代碼/第2章/Sample2_3/src/com/bn/ex2c目錄下的Sample2_3_Activity.class。

    1   package com.bn. ex2c;                               //包名
    2   import android.app.Activity;                        //導(dǎo)入相關(guān)類
    3   public class Sample2_3_Activity extends Activity {
    4        RelativeLayout rl;                              //相對布局對象
    5        Button shang;                                   //上面的按鈕
    6        Button xia;                                     //下面的按鈕
    7        Button zuo;                                     //左側(cè)按鈕
    8        Button you;                                     //右側(cè)按鈕
    9        ImageView currButton;                           //記錄當(dāng)前ImageView
    10       ImageView start;                                //ImageView開啟
    11     public void onCreate（Bundle savedInstanceState）{
    12         super.onCreate（savedInstanceState）;           //調(diào)用父類
    13         setContentView（R.layout.main）;                //界面跳轉(zhuǎn)到主界面
    14         rl=（RelativeLayout）this.findViewById（R.id.rl）;//獲取布局對象
    15         shang=（Button）this.findViewById（R.id.Shang）;  //獲取當(dāng)前控件
    16         xia=（Button）this.findViewById（R.id.Xia）;      //下面的按鈕
    17         zuo=（Button）this.findViewById（R.id.Zuo）;      //左側(cè)的按鈕
    18         you=（Button）this.findViewById（R.id.You）;      //右側(cè)的按鈕
    19         start=（ImageView）this.findViewById（R.id.Start）;   //中間的圖片
    20         currButton=start;                             //規(guī)定當(dāng)前ImageView
    21         shang.setOnClickListener（                    //監(jiān)聽
    22           new OnClickListener（）{
    23                    public void onClick（View v）{
    24                    EditText temp=new EditText（Sample2_3_Activity.this）;
                                                            //添加新的EditText
    25                    temp.setText（"圖片說明"）;           //設(shè)置信息
    26                    RelativeLayout.LayoutParams lp1 =  //設(shè)置控件位置
    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（                      //設(shè)置監(jiān)聽
    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 =      //設(shè)置控件位置
    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（                      //設(shè)置監(jiān)聽
    44           new OnClickListener（）{
    45                    public void onClick（View v）{      //重寫onClick方法
    46                        EditText  temp=new  EditText（Sample2_3_Activity.this）;
    //添加新的EditText
    47                        temp.setText（"圖片說明"）;       //設(shè)置為本框的文字
    48                        RelativeLayout.LayoutParams lp1 =  //設(shè)置控件位置
    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 =  //設(shè)置控件位置
    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行，為上、下、左、右四個按鈕添加監(jiān)聽器，當(dāng)單擊按鈕時，在布局中的相應(yīng)位置添加新的EditText控件，并設(shè)置該控件的屬性。