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    If 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学得很差，等我研究研究之后再进行分析和比较吧。