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