Table of contents


  • 可以透xml(建議)或程式直接設定layout
  • 太過複雜的Layout會影響操作效能跟操作性,應盡可能保持Layout愈簡單愈好
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
<TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="Enter Text Below"
/>
<EditText
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="Text Goes Here!"
/>
</LinearLayout>

上例中的fill_parent、wrap_content為Layout Parameter,每個Layout適用的Layout Parameter不盡相同,使用時需注意。

Layout Parameters的使用需配合上一層的ViewGroup的layout決定,如上圖中,第一層的Layout是LinearLayout所以,第二層的三個Views(RelativeLayout, View, View)都必需使用LinearLayoutLayoutParamters進行細部設定 ,而第三層的三個View都是RelativeLayout的children,所以,都要用RelativeLayoutLayoutParamters進行細部設定。^1)^

用程式設定Layout Parameters的方式如下:

myView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

Layout Parameter

Layout的設定,主要是透過Layout Parameter,不同的Layouts需套用不同的Layout Parameters. Table Layout有Table Layout專屬的Layout Parameters、Liner Layout有Liner Layout專屬的Layout Parameters

可以透過layoutopt工具來對layout進行最佳化

@ : at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource.

  • : means that this is a new resource name that must be created and added to our resources (in the R.java file)
通用屬性
  1. gravity 決定元件內容靠在什麼地方
  2. layout_gravity 決定元件靠在父元件的什麼地方

以一個TextView元件來說,android:gravity=“center”會讓TextView內容置中,而android:gravity=“right”會讓TextView在父元件中靠右

這邊有gravity跟layout_gravity的說明

Configuration Changes

當瑩幕直立轉換成橫放或橫放轉換成直立時,會引發Configuration Change,如果有特別指定直立或橫放專用的layout時,android會以專用的layout。 直立(portrait)或橫放(landscape)有專用的layout目錄,這三個目錄的檔案名稱可以重覆,它們只會產生一個共用的layout id( R.layout.main_layout)。

\res\layout\main_layout.xml 
\res\layout-port\main_layout.xml 
\res\layout-land\main_layout.xml 

或者更多的變化型式

\res\layout\main_layout.xml 
\res\layout-port\main_layout.xml
\res\layout-en\main_layout.xml 

上面的叫port,en,land叫configuration qualifiers,許多組合可以參閱官方文件

RelativeLayout

RelativeLayout字面上的意思是相對的layout,相關是指某一元件,與父元件或子元件的相對的關係。

與父元件相對關係
與父元件相對關係用boolean(true false)值決定
  1. layout_alignParentTop 子元件的上緣是否對齊容器(父元件)的上緣
  2. layout_alignParentBottom 子元件的下緣是否對齊容器(父元件)的下緣
  3. layout_alignParentLeft 子元件的左邊緣是否對齊容器(父元件)的左邊緣
  4. layout_alignParentRight 子元件的右邊緣是否對齊容器(父元件)的右邊緣
  5. layout_centerHrizontal 子元件是否水平置中於容器(父元件)
  6. layout_centerVertical 子元件是否垂值置中於容器(父元件)
  7. layout_centerInparent 子元件是否完全置中(水平 + 垂值)於容器(父元件)
  8. layout_alignWithParentIfMissing 如果相對的子元件不存在時,以父元件為參考
與容器(Container)內其他子元件相對關係

因為是其它子元件相對應的關係,所以以下的屬性需要指定是要與那一個子元件關聯(父元件只有一個,所以上面的屬性只需要指定true或false)

  1. layout_above 在指定元件的上方
  2. layout_below 在指定元件的下方
  3. layout_toLeftOf 在指定元件的左方
  4. layout_toRightOf 在指定元件的右方
  5. layout_alignTop 元件上緣與指定元件的上緣對齊
  6. layout_alignBottom 元件下緣與指定元件的下緣對齊
  7. layout_alignLeft 元件左邊緣與指定元件的左邊緣對齊
  8. layout_alignRight 元件右邊緣與指定元件的右邊緣對齊

詳請可參閱RelativeLayout.LayoutParams API

用程式設定RelativeLayout的LayoutParams
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,   LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ABOVE, R.id.dictionary);

進階的layout

當layout過於複雜時,可以用以下三種方式解決

  1. <include> tag
  2. <ViewStub> tag
  3. Custom Components

Resources

^1)^ 這個跟java swing一樣,如果有寫過java swing,應該很熟悉這種使用方式