Android tutorial (4)-Layout

Andriod Layout

 

 

1. Linearlayout: The widely-loved "Row layout" can be understood

Write the document, place a full row of controls, and switch to the next row.

2. Tablelayout: "Table layout", which can be understood as a table, defining controls for each column in each row.
3. Absolutelayout: "Absolute layout". interfaces such as Vc and Delphi are absolute layout.
4. Relativelayout: "Relative layout", the relative position of the control relative to the container, such as left and right alignment.
5. Framelayout: The stacked layout starts from the upper left corner and displays the elements in framelayout layer by layer.

 

Framelayout:

 

Framelayout is the simplest layout object. It is customized as a blank standby area on your screen, and then you can fill in a single object-for example, an image you want to publish. All child elements are fixed in the upper left corner of the screen. You cannot specify a position for a child element in framelayout. The next child element directly overwrites the previous child element and blocks them in part or whole (unless the last child element is transparent ).

 

Let's take a look:

 

 

WhereMain. xmlThe Code is as follows:

 

<? XML version = "1.0" encoding = "UTF-8"?>
<Framelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>

 <! -- We have added a button here -->
<Button
Android: text = "button"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>
<Textview
Android: text = "textview"
Android: textcolor = "# 0000ff"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
/>
</Framelayout>

 

Linearlayout:

 

Linearlayout lists all child elements based on the vertical or horizontal attribute values you set for it. All child elements are stacked behind other elements, so each row in a vertical list only has one element, no matter how wide they are, A horizontal list only has one row height (the height is the height of the highest child element plus the border height ). Linearlayout maintains the interval and alignment between child elements (right, middle, or left ).

 

Linearlayout can also be specified for individual child elements.Weight. The advantage is that it allows sub-elements to fill the remaining space on the screen. This also avoids a large screen where a bunch of small objects are crowded into a heap, but allows them to zoom in and fill the blank. Specify a sub-elementWeightValue, and the remaining space is specified according toWeightProportional allocation to these child elements. DefaultWeightThe value is 0. For example, if there are three text boxes, two of them specifyWeight
If the value is 1, the two text boxes are proportionally enlarged and the remaining space is filled. The third text box is not enlarged.

 

Let's take a look:

 

 

WhereMain. XML The Code is as follows:

 

<? XML version = "1.0" encoding = "UTF-8"?>
<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Orientation ="Vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<Linearlayout
Android: Orientation ="Vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: layout_weight = "2">
<Textview
Android: text = "welcome to Mr Wei's blog"
Android: textsize = "15pt"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>
</Linearlayout>
<Linearlayout
Android: Orientation ="Horizontal"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: layout_weight = "1">

<Textview
Android: text = "red"

Android: gravity = "center_horizontal"// The word is horizontally centered here
Android: Background = "# aa0000"
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent"
Android: layout_weight = "1"/>
<Textview
Android: text = "green"
Android: gravity ="Center_horizontal"
Android: Background = "#00aa00"
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent"
Android: layout_weight = "1"/>
</Linearlayout>
</Linearlayout>

 

Absolutelayout:

 

AbsolutelayoutThe sub-element can specify the exact x/y coordinate value and display it on the screen. (0, 0) is the upper left corner. When you move down or to the right, the coordinate value increases.AbsolutelayoutThere is no page border, and elements can overlap with each other (although not recommended ). We generally do not recommendAbsolutelayoutUnless you have a legitimate reason to use it, because it makes the interface code too rigid, so that it can work well on different devices.

 

Let's take a look:

 

 

WhereMain. XML The Code is as follows:

 

<? XML version = "1.0" encoding = "UTF-8"?>
<Absolutelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>
<Edittext
Android: text = "welcome to Mr Wei's blog"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>
<Button
Android: layout_x = "250px"// Set the X coordinate of the button
Android: layout_y = "40px"// Set the Y coordinate of the button
Android: layout_width = "70px"// Set the button width
Android: layout_height = "wrap_content"
Android: text = "button"
/>
</Absolutelayout>

Relativelayout:

 

RelativelayoutAllows child elements to specify their positions relative to other elements or parent elements (throughID). Therefore, you can arrange two elements in the right-aligned, up/down, or in the center of the screen. Elements are arranged in order. Therefore, if the first element is in the center of the screen, other elements relative to the element are arranged in the relative position in the center of the screen. If you useXMLTo specify thisLayoutBefore you define it, the associated elements must be defined.

 

Let's take a look:

 

 

WhereMain. xmlThe Code is as follows:

 

<? 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">
<Textview
Android: Id = "@ + ID/label"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "welcome to Mr Wei's blog:"/>
<Edittext
Android: Id = "@ + ID/entry"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_below = "@ ID/label"/>
<Button
Android: Id = "@ + ID/OK"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_below = "@ ID/entry"
Android: layout_alignparentright = "true"
Android: layout_marginleft = "10dip"
Android: text = "OK"/>
<Button
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_toleftof = "@ ID/OK"
Android: layout_aligntop = "@ ID/OK"
Android: text = "cancel"/>
</Relativelayout>

 

Tablelayout:

 

TablelayoutAssign the positions of child elements to rows or columns. OneTablelayoutBy manyTablerowComposition, eachTablerowDefineRow(In fact, you can define other sub-objects, which will be explained below ).TablelayoutContainer not displayedRow,Cloumns
OrCell. EachRowWith 0 or moreCell; EachCellHaveViewObject. A table consists of columns and rows in multiple cells. The table allows cells to be empty. Cells cannot span columns.Html.

 

Let's take a look:

 

 

WhereMain. xmlThe Code is as follows:

 

<? XML version = "1.0" encoding = "UTF-8"?>
<Tablelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"
Android: stretchcolumns = "1">
<Tablerow>
<Textview Android: layout_column = "1" Android: text = "open..."/>
<Textview Android: text = "Ctrl-o"Android: gravity = "right"
/>
</Tablerow>
<Tablerow>
<Textview Android: layout_column = "1" Android: text = "Save..."/>
<Textview Android: text = "Ctrl-s"Android: gravity = "right"/>
</Tablerow>
<View Android: layout_height = "2dip" Android: Background = "# ff909090"/>// Here is the separator line
<Tablerow>
<Textview Android: text = "X"/>
<Textview Android: text = "Export..."/>
<Textview Android: text = "Ctrl-e"Android: gravity = "Right"/>
</Tablerow>
<View Android: layout_height = "2dip" Android: Background = "# ff909090"/>
<Tablerow>
<Textview Android: layout_column = "1" Android: text = "quit"
Android: padding = "3dip"/>
</Tablerow>
</Tablelayout>

 

Transferred from: android_tutor

References: http://www.androidcn.net/wiki/index.php/Devel/ui/layout