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

---------------------------------------------------------------
缥缈落花街 月圆月缺 望峦山平川 雁返君未还 怆然晚春残 忆天上人间

来自：

http://www.cnblogs.com/wodehuajianrui/archive/2008/07/04/1235623.html