Android番外篇——XML layout與CSS

開發過Android應用的同學們都知道，Android工程-res-layout資源檔夾下存放著控制view布局的xml檔案，我們可以同過getViewById(int i)方法，從XML中構造view及其子類，在這個過程當中，XML檔案中的一切layout屬性也將被賦予這個view。當然，我們也能夠通過代碼來為某一個view來設定layout，那是後話。通過對集中layout的分析和比較我發現，Android中AbsoluteLayout與CSS的絕對位置很像，TableLayout與HTML的表格定位很像，而RelativeLayout與CSS的相對定位很像。前兩者都已經是老生常談了，我重點比較一下最後一對，即RelativeLayout與CSS的相對定位（Position:relative）。先看一段XML:<?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">
    <RadioGroup android:id="@+id/radioGroup"
        android:layout_width="fill_parent" android:layout_height="167px"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical">
        <RadioButton android:id="@+id/Queen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/Queen">
        </RadioButton>
        <RadioButton android:id="@+id/Rook"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/Rook">
        </RadioButton>
        <RadioButton android:id="@+id/Knight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/Knight">
        </RadioButton>
        <RadioButton android:id="@+id/Bishop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/Bishop">
        </RadioButton>
    </RadioGroup>
    <Button android:id="@+id/promotion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_below="@id/radioGroup"
        android:text="@string/promote" />
</RelativeLayout>

上面一段XML，這是我為Android國際象棋遊戲中的一個“兵行底線”編寫的Custom Dialog（自訂對話方塊）的XML layout。在這裡簡單定義了幾個控制項（來自於android.wedget包）的一些位置和外觀。可以看到，根節點RelativeLayout告訴我們這是相對定位的布局，然後從上至下由一個RadioGroup（內含四個RadioButton）以及一個Button。通過最下面的android:layout_below屬性，告訴Button要在radioGroup下面呈現。

這是一個非常簡單的屬性，在relativeLayout下，還有很多屬性，見下表

android:layout_above		Positions the bottom edge of this view above the given anchor view ID.
android:layout_alignBaseline		Positions the baseline of this view on the baseline of the given anchor view ID.
android:layout_alignBottom		Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
android:layout_alignLeft		Makes the left edge of this view match the left edge of the given anchor view ID.
android:layout_alignParentBottom		f true, makes the bottom edge of this view match the bottom edge of the parent.
android:layout_alignParentLeft		If true, makes the left edge of this view match the left edge of the parent.
android:layout_alignParentRight		If true, makes the right edge of this view match the right edge of the parent.
android:layout_alignParentTop		If true, makes the top edge of this view match the top edge of the parent.
android:layout_alignRight		Makes the right edge of this view match the right edge of the given anchor view ID.
android:layout_alignTop		Makes the top edge of this view match the top edge of the given anchor view ID.
android:layout_below		Positions the top edge of this view below the given anchor view ID.
android:layout_centerHorizontal		If true, centers this child horizontally within its parent.
android:layout_centerInParent		If true, centers this child horizontally and vertically within its parent.
android:layout_centerVertical		If true, centers this child vertically within its parent.
android:layout_toLeft		Positions the right edge of this view to the left of the given anchor view ID.
android:layout_toRight		Positions the left edge of this view to the right of the given anchor view ID.

我相信大家的英文水平，這段從API上抄下來的東西我就不翻譯了。但是可以看出來，只要設定上面的屬性（不一定要全部），我們可以輕鬆規定一個控制項（View）的在相對定位下的顯示行為。同時RelativeLayout是從layout上繼承下來的，因此layout的很多屬性也可以在這裡使用，包括：android:layout_height, android:layout_width,

android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop。

這不由的讓人聯想到我們對HTML中元素定位的流行做法——div+float。在CSS中，如果我們要控制一個元素（通常是一個div）的顯示，就要用到填充距屬性（Padding-top、Padding-right、Padding-bottom、Padding-left）與邊框屬性（Border-top-width、Border-right-width、Border-bottom-width、Border-left-width、Border-width 、Border-color、Border-style、Border-top、Border-right、Border-bottom、Border-left、Width、Height、Float、Clear）。CSS並沒有像Android的layout一樣定義了很多對齊，但是通過float和clear一樣可以呈現出漂亮的網頁（通過float完全可以實現Android中alignXXX與alignParentXXX的功能）。

同樣的，XML的分層結構也和HTML的嵌套<div></div>極為相似，把layout從代碼裡分離也與CSS外部樣式表的思想相同。據說WPF也是運用了外部XML檔案來控制UI，看來都受到了啟發。

另外，Android的layout與Swing的layout有很好的對應，但是我的J2SE學得很差，等我研究研究之後再進行分析和比較吧。