Android getting started tutorial (7) Five layout objects-framelayout, linearlayout, absolutelayout, relativelayout, tablelayout)

Source: Internet
Author: User
Hello everyone, let's talk about the five layout objects used by Android in this section. They are respectively framelayout (Framework layout: I don't know if they are translated in this way), linearlayout (linear layout ), absolutelayout (absolute layout), relativelayout (relative layout), tablelayout (table layout ).

 

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. xml CodeAs 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 specifyWeightIf 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,CloumnsOrCell. 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>

 

The above are the five layout objects of Android. This project is so huge that it took me more than an hour to help you ~ Leave more messages!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.