Android系統五大佈局詳解Layout

 我們知道Android系統應用程序一般是由多個Activity組成,而這些Activity以視圖的形式展現在我們面前,視圖都是由一個一個的組件構成的。組件就是我們常見的Button、TextEdit等等。那麼我們平時看到的Android手機中那些漂亮的界面是怎麼顯示出來的呢?這就要用到Android的佈局管理器瞭,網上有人比喻的很好:佈局好比是建築裡的框架,組件按照佈局的要求依次排列,就組成瞭用於看見的漂亮界面瞭。

      在分析佈局之前,我們首先看看控件:Android中任何可視化的控件都是從android.veiw.View繼承而來的,系統提供瞭兩種方法來設置視圖:第一種也是我們最常用的的使用XML文件來配置View的相關屬性,然後在程序啟動時系統根據配置文件來創建相應的View視圖。第二種是我們在代碼中直接使用相應的類來創建視圖。

     如何使用XML文件定義視圖:

      每個Android項目的源碼目錄下都有個res/layout目錄,這個目錄就是用來存放佈局文件的。佈局文件一般以對應activity的名字命名,以 .xml 為後綴。在xml中為創建組件時,需要為組件指定id,如:android:id="@+id/名字"系統會自動在gen目錄下創建相應的R資源類變量。

    如何在代碼中使用視圖: 

     在代碼中創建每個Activity時,一般是在onCreate()方法中,調用setContentView()來加載指定的xml佈局文件,然後就可以通過findViewById()來獲得在佈局文件中創建的相應id的控件瞭,如Button等。

 如:

 

private Button btnSndMag; 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main);  // 加載main.xml佈局文件 
    btnSndMag = (Button)this.findViewById(R.id.btnSndMag); // 通過id找到對於的Button組件 
    .... 
} 

private Button btnSndMag;
public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main); // 加載main.xml佈局文件
 btnSndMag = (Button)this.findViewById(R.id.btnSndMag); // 通過id找到對於的Button組件
 ....
}

  

  下面我們來介紹Android系統中為我們提供的五大佈局:LinearLayout(線性佈局)、FrameLayout(單幀佈局)、AbsoluteLayout(絕對佈局)、TablelLayout(表格佈局)、RelativeLayout(相對佈局)。其中最常用的的是LinearLayout、TablelLayout和RelativeLayout。這些佈局都可以嵌套使用。

(1)LinearLayout 線性佈局

  線性佈局是按照水平或垂直的順序將子元素(可以是控件或佈局)依次按照順序排列,每一個元素都位於前面一個元素之後。線性佈局分為兩種:水平方向和垂直方向的佈局。分別通過屬性android:orientation="vertical" 和 android:orientation="horizontal"來設置。

 android:layout_weight 表示子元素占據的空間大小的比例,有人說這個值大小和占據空間成正比,有人說反比。我在實際應用中設置和網上資料顯示的剛好相反,這個問題後面會專門寫一篇文章來分析。現在我們隻需要按照正比例來設置就可以。

例如下面我們實現一個如圖所示的簡易計算器界面:

 
 

代碼:

 

 <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" 
    xmlns:tools="https://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#FFFFFF" 
    tools:context=".MainActivity" > 
 
    // 這裡第一行顯示標簽為一個水平佈局 
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <EditText 
            android:id="@+id/msg" 
            android:inputType="number" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text=""> 
        </EditText>     
    </LinearLayout> 
     
    // 第二行為 mc m+ m- mr 四個Button構成一個水平佈局 
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="mc" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="m+" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="m-" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="mr" android:layout_weight="1"> 
        </Button> 
    </LinearLayout> 
     
    // 同上 C +/-  / * 四個Button構成一個水平佈局 
      <LinearLayout 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:orientation="horizontal" > 
          <Button 
              android:layout_width="match_parent" 
              android:layout_height="wrap_content" 
              android:layout_weight="1" 
              android:text="C" > 
          </Button> 
          <Button 
              android:layout_width="match_parent" 
              android:layout_height="wrap_content" 
              android:layout_weight="1" 
              android:text="+/-" > 
          </Button> 
          <Button 
              android:layout_width="match_parent" 
              android:layout_height="wrap_content" 
              android:layout_weight="1" 
              android:text="/" > 
          </Button> 
          <Button 
              android:layout_width="match_parent" 
              android:layout_height="wrap_content" 
              android:layout_weight="1" 
              android:text="*" > 
          </Button> 
      </LinearLayout> 
     
      <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="7" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="8" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="9" android:layout_weight="1"> 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="-" android:layout_weight="1"> 
        </Button> 
    </LinearLayout> 
     
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="4" > 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="5" > 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="6" > 
        </Button> 
        <Button 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="+" > 
        </Button> 
    </LinearLayout> 
     
    // 最外層是一個水平佈局,由左邊上面一行1 2 3三個Button,下面一行的0 . 兩個Button 和 右邊的=構成 
     <LinearLayout android:orientation="horizontal" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 
        // 這裡 1 2 3 和 下面的 0 . 構成一個垂直佈局 
        <LinearLayout android:orientation="vertical" 
            android:layout_weight="3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"> 
            // 這裡的 1 2 3 構成一個水平佈局 
            <LinearLayout android:orientation="horizontal" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content"> 
                <Button 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="1" 
                    android:text="1"></Button> 
                <Button 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="1" 
                    android:text="2"></Button> 
                <Button 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="1" 
                    android:text="3"></Button> 
            </LinearLayout> 
            // 這裡的 0 和 . 構成一個水平佈局,註意這裡的android_weight參數設置 
            <LinearLayout android:orientation="horizontal" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content"> 
                <Button 
                    android:layout_width="0px" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="2" 
                    android:text="0"></Button> 
                <Button 
                    android:layout_width="0px" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="1" 
                    android:text="."></Button> 
            </LinearLayout>    
        </LinearLayout> 
        // 這裡一個單獨Button構成的垂直佈局 
        <LinearLayout android:orientation="vertical" 
            android:layout_weight="1" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent"> 
            <Button 
                android:layout_width="match_parent" 
                android:layout_height="match_parent" 
                android:text="="></Button> 
        </LinearLayout> 
     </LinearLayout>    
 
</LinearLayout> 

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context=".MainActivity" >

 // 這裡第一行顯示標簽為一個水平佈局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <EditText
            android:id="@+id/msg"
            android:inputType="number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="">
        </EditText>   
    </LinearLayout>
   
 // 第二行為 mc m+ m- mr 四個Button構成一個水平佈局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="mc" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="m+" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="m-" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="mr" android:layout_weight="1">
      </Button>
 </LinearLayout>
   
 // 同上 C +/-  / * 四個Button構成一個水平佈局
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal" >
          <Button
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="C" >
          </Button>
          <Button
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="+/-" >
          </Button>
          <Button
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="/" >
          </Button>
          <Button
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="*" >
          </Button>
      </LinearLayout>
   
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="7" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="8" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="9" android:layout_weight="1">
      </Button>
      <Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="-" android:layout_weight="1">
      </Button>
 </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4" >
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="5" >
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="6" >
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="+" >
        </Button>
    </LinearLayout>
   
 // 最外層是一個水平佈局,由左邊上面一行1 2 3三個Button,下面一行的0 . 兩個Button 和 右邊的=構成
     <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  // 這裡 1 2 3 和 下面的 0 . 構成一個垂直佈局
        <LinearLayout android:orientation="vertical"
         android:layout_weight="3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
   // 這裡的 1 2 3 構成一個水平佈局
       <LinearLayout android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="1"></Button>
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="2"></Button>
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="3"></Button>
       </LinearLayout>
   // 這裡的 0 和 . 構成一個水平佈局,註意這裡的android_weight參數設置
       <LinearLayout android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
          <Button
              android:layout_width="0px"
              android:layout_height="wrap_content"
              android:layout_weight="2"
              android:text="0"></Button>
          <Button
              android:layout_width="0px"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:text="."></Button>
         </LinearLayout> 
      </LinearLayout>
  // 這裡一個單獨Button構成的垂直佈局
  <LinearLayout android:orientation="vertical"
      android:layout_weight="1"
         android:layout_width="wrap_content"
         android:layout_height="match_parent">
       <Button
           android:layout_width="match_parent"
           android:layout_height="match_parent"
    android:text="="></Button>
     </LinearLayout>
     </LinearLayout>  

</LinearLayout>

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *