Android-XML layout and CSS reprinted

Everyone who has developed Android applications knows that the android project-res-layout resource folder stores XML files that control the view layout. We can use the getviewbyid (int I) method, construct the view and its subclass from XML. In this process, all layout attributes in the XML file will also be assigned to this view. Of course, we can also use code to set layout for a view. By analyzing and comparing the centralized layout, I found that the absolute positioning of absolutelayout in Android is similar to that of CSS. tablelayout is similar to that of HTML tables, while relativelayout is similar to CSS. The first two are already commonplace. I will focus on comparing the last pair, that is, the relative position: relative between relativelayout and CSS ). First look at an XML section:

<? 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>

In the preceding XML section, this is the XML layout of custom Dialog (custom dialog box) that I wrote for an "baseline line of soldiers" in the android chess game. Here we briefly define some locations and appearances of several controls (from the Android. wedget package. As you can see, the root node relativelayout tells us that this is a relatively positioned layout, and then a radiogroup (containing four radiobutton) and a button from top to bottom. The following Android: layout_below attribute tells the button to be rendered under the radiogroup.

This is a very simple attribute. There are many attributes in relativelayout, as shown in the table below.

Android: layout_abve positions the bottom edge of this view abve 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.

I believe everyone's English skills. I will not translate what I copied from the API. However, you can see that as long as you set the above attributes (not all of them), we can easily define the display behavior of a control (View) under relative positioning. At the same time, relativelayout is inherited from layout, so many layout attributes can also be used here, including: Android: layout_height, Android: layout_width,

Android: layout_marginbottom, Android: layout_marginleft, Android: layout_marginright, Android: layout_margintop.

This is reminiscent of the popular method of positioning elements in HTML-Div + float. In CSS, if we want to control the display of an element (usually a div, the padding attribute (padding-top, padding-right, padding-bottom, and padding-left) is required) and border attributes (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 does not define many alignxxx and alignparentxxx in Android, but they can display beautiful webpages like float and clear ).

Similarly, the layered structure of XML is similar to the nested <div> </div> of HTML. The separation of layout from code is the same as that of CSS external style sheets. It is said that WPF also uses external XML files to control the UI, which seems to be inspired.

In addition, the layout of Android has a good match with the layout of swing, but my j2se is poor in learning. I will analyze and compare it after I study it.