Android基礎：相對布局管理器RelativeLayout

相對布局管理器是基於一個參考點而言的布局管理器。就像Web開發中的相對路徑的概念，是基於一定的參考點而建立的。在Android中的相對布局管理器就是在一個參考點的四周上，下，左，右）布局的管理器。

下面來看一下RelativeLayout的文檔：

它的繼承結構為：

 

  
java.lang.Object 
  
   ↳ android.view.View 
  
   ↳ android.view.ViewGroup 
  
   ↳ android.widget.RelativeLayout 
 

下面在Eclipse中建立一個項目來看一下相對布局管理器RelativeLayout的使用：

 

  
<?xml version="1.0" encoding="utf-8"?> 
  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  
    android:layout_width="fill_parent" 
  
    android:layout_height="fill_parent" 
  
    android:orientation="vertical" > 
  
    <ImageView 
  
        android:id="@+id/img1" 
  
        android:layout_width="wrap_content" 
  
        android:layout_height="wrap_content" 
  
        android:src="@drawable/ic_launcher" /> 
  
    <ImageView 
  
        android:id="@+id/img2" 
  
        android:layout_width="wrap_content" 
  
        android:layout_height="wrap_content" 
  
        android:src="@drawable/google_plus" 
  
        android:layout_toRightOf="@+id/img1" /> 
  
</RelativeLayout> 
 

我們在main.xml中將布局管理器聲明為RelativeLayout，之後建立了兩個ImageView組件用來顯示兩幅圖片，其中在第二個 ImageView組件上設定了layout_toRightOf屬性，也就是設定相對於某組件的右側，這裡填入的是組件ID的值，那麼這裡也就是說我們 的img2相對於img1的位置是右側。下面運行程式，我們看到如下效果：

很明顯，第二幅圖片放置在了第一副圖片的右側，下面往代碼中再加入一個TextView組件：

 

  
<TextView android:id="@+id/txt" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:text="這裡是一些顯示文字" 
  
    android:layout_below="@+id/img2"/> 
 

這個組件也很簡單，我們設定了layout_below屬性，說明要放置在第二幅圖片的下面，那麼運行程式，我們得到如下的顯示效果：

沒有問題，文字確實在第二幅片的下面了，但是卻頂頭顯示了，如果第一副圖片小於第二幅圖片，是會產生覆蓋效果的，我們調整位置來看一下，調整代碼為：

 

  
<ImageView 
  
    android:id="@+id/img1" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:src="@drawable/ic_launcher" 
  
    android:layout_toRightOf="@+id/img2" /> 
  
<ImageView 
  
    android:id="@+id/img2" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:src="@drawable/google_plus" /> 
  
<TextView android:id="@+id/txt" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:text="這裡是一些顯示文字" 
  
    android:layout_below="@+id/img1"/> 
 

這裡不再解釋代碼的含義，直接運行，我們看到：

文字覆蓋第一副圖片顯示了，那麼需要繼續對它進行設定：

 

  
<TextView android:id="@+id/txt" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:text="這裡是一些顯示文字" 
  
    android:layout_below="@+id/img1" 
  
    android:layout_toRightOf="@+id/img2"/> 
 

再次運行程式，我們可以看到如下效果：

文字就在img1的下面並且在img2的右側了。此時文字的下側和img2的右側還有一定空間，我們再放置一個Button組件：

 

  
<Button  
  
    android:id="@+id/btn" 
  
    android:layout_width="wrap_content" 
  
    android:layout_height="wrap_content" 
  
    android:text="按鈕" 
  
    android:layout_below="@+id/txt" 
  
    android:layout_toRightOf="@+id/img2"/> 
 

再次運行程式，我們就得到了如下效果：

和其它布局管理器一樣，我們可以通過Java代碼來實現對相對布局管理器的控制，下面首先來看一下RelativeLayout.LayoutParams的文檔：

其繼承結構為：

 

  
java.lang.Object 
  
   ↳ android.view.ViewGroup.LayoutParams 
  
   ↳ android.view.ViewGroup.MarginLayoutParams 
  
   ↳ android.widget.RelativeLayout.LayoutParams  
 

只是在代碼中控制相對布局管理器時需要設定一些規則，也就是我們上面看到的layout_toRightOf和layout_below等，下面來看一下代碼：

 

  
package org.ourpioneer; 
  
import android.app.Activity; 
  
import android.os.Bundle; 
  
import android.view.ViewGroup; 
  
import android.widget.EditText; 
  
import android.widget.RelativeLayout; 
  
public class RelativeLayoutDemoActivity extends Activity { 
  
    @Override 
  
    public void onCreate(Bundle savedInstanceState) { 
  
        super.onCreate(savedInstanceState); 
  
        super.setContentView(R.layout.main);// 讀取已有的布局管理器 
  
        RelativeLayout relativeLayout = (RelativeLayout) super 
  
                .findViewById(R.id.rLayout);// 擷取相對布局管理器rLayout 
  
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( 
  
                ViewGroup.LayoutParams.FILL_PARENT, 
  
                ViewGroup.LayoutParams.FILL_PARENT);// 設定布局管理器參數 
  
        params.addRule(RelativeLayout.BELOW, R.id.btn);// 設定放置規則 
  
        EditText edit = new EditText(this);// 建立EditText組件 
  
        relativeLayout.addView(edit,params); 
  
    } 
  
} 
 

編寫代碼之前，我們需要在main.xml中為我們的布局管理器添加ID屬性，也就是rLayout，之後我們可以在代碼中對它進行控制，這裡我們在已有 的布局管理器之中繼續添加組件，也就是要往按鈕下放置一個編輯框，那麼我們設定布局管理器參數都為FILL_PARENT，就是要填充整個螢幕，然後規則 定位在btn的下側，之後往布局管理器中添加組件，運行程式，我們就可以看到：