第二課: Android的Layout

Android 的 Layout 大略可以分為四個:

1. LinearLayout: 元件的直線排列(可以設定直排或橫排)
2. RelativeLayout: 元件的相關位置排列
3. FrameLayout: 用來佔據元件的顯示位置 (元件會佔據畫面的顯示位置, 較晚插入的元件會覆蓋較早插入的元件)
4. TableLayout: 像表格化的Layout

LinearLayout 跟 RelativeLayout 是比較常用的兩個.

試問, 如果要產生以下畫面應該要如何做呢?

首先, 在Eclipse 的專案中找到 res/layout/畫面名稱.xml, 然後插入方塊:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   tools:context=".MainActivity"  
   android:orientation="vertical" >  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="LinearLayout" />  
   <LinearLayout  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:orientation="vertical"  
      >  
      <TextView  
     android:layout_width="fill_parent"  
     android:layout_height="100dp"  
     android:text="方塊A"  
     android:background="#2C9DE8"  
      />  
      <TextView  
     android:layout_width="100dp"  
     android:layout_height="70dp"  
     android:text="方塊B"  
     android:background="#2CE8C6"  
      />  
   </LinearLayout>  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="RelativeLayout" />  
   <RelativeLayout  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:orientation="vertical"  
      >  
      <TextView android:id="@+id/rec_c"  
     android:layout_width="100dp"  
     android:layout_height="100dp"  
     android:text="方塊C"  
     android:background="#2C9DE8"  
      />  
      <TextView android:id="@+id/rec_d"  
     android:layout_width="70dp"  
     android:layout_height="70dp"  
     android:text="方塊D"  
     android:background="#2CE8C6"  
     android:layout_toRightOf="@id/rec_c"  
      />  
   </RelativeLayout>  
 </LinearLayout>  

這樣其實就Layout好了,
在LinearLayout的部分它是直線排下來的,
在RelativeLayout的部分我們給元件設了id, 再依id指派 android:layout_toRightOf 這個參數,
Layout只要多接觸就會懂囉!

這邊有影片: