Android layout and layout attributes

Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/--> 1. Frame layout FrameLayout:

Is the simplest layout object. All the display objects in the screen will be fixed in the upper left corner of the screen and cannot be specified. However, multiple display objects are allowed, but the last one will directly overwrite the previous one, blocks some or all of the preceding components. In this example, three ImageView components are put in FrameLayout, the first is blue, the second is green, and the third is a tree chart (transparent png format ). ImageView is equivalent to the img tag in Html. Next we will talk about this component.

Here is an example of FrameLayout:

<? Xml version = "1.0" encoding = "UTF-8"?>

<FrameLayout android: id = "@ + id/FrameLayout01"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent"
Xmlns: android = "http://schemas.android.com/apk/res/android">

<ImageView android: id = "@ + id/ImageView01" android: src = "@ drawable/p1"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"> </ImageView>

<ImageView android: id = "@ + id/ImageView02" android: src = "@ drawable/p2"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"> </ImageView>

<ImageView android: id = "@ + id/ImageView03" android: src = "@ drawable/p3"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"> </ImageView>

</FrameLayout>

 

2. Linear layout:

Linear layout is one of the most common classes in all la s and is also the parent class of the RadioGroup, TabWidget, TableLayout, TableRow, and ZoomControls classes. LinearLayout can arrange its child elements in a vertical or horizontal line (if no direction is set, the child elements are arranged in the vertical direction by default ).

Let's take a look at the example of LinearLayout: Don't be intimidated by the length of the example. A closer look is actually a LinearLayout with five TextView labels. TextView is equivalent to the Label in the Html Tag.

<? 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"
Android: gravity = "center_horizontal"
>
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "give the baby a name :"
Android: textSize = "20px"
Android: textColor = "# 0ff"
Android: background = "#333"

/>
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: text = "the boy's nickname is far away"
Android: textSize = "20px"
Android: textColor = "#0f0"
Android: background = "# eee"
Android: layout_weight = "3"
/>
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: text = "Yaoyao is a girl's nickname"
Android: textColor = "# 00f"
Android: textSize = "20px"
Android: background = "# ccc"
Android: layout_weight = "1"
/>

<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "Hai Yin is a boy's name"
Android: textColor = "# f33"
Android: textSize = "20px"
Android: background = "#888"
Android: layout_weight = "1"
/>
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "Hai Yin is a girl's name"
Android: textColor = "# ff3"
Android: textSize = "20px"
Android: background = "#333"
Android: layout_weight = "1"
/>
</LinearLayout>

3. Absolute layout: AbsoluteLayout

Absolute positioning AbsoluteLayout can also be called the coordinate layout, which can directly point to the absolute position of the stator element. This layout is simple and straightforward, but because of the large differences in the cell phone screen size, the adaptability to absolute positioning is poor.

Here is an example: the robot image size in the example is 250X250. We can see that android: layout_x and android: layout_y refer to the vertical and horizontal coordinates of the child element.

<? Xml version = "1.0" encoding = "UTF-8"?>
<AbsoluteLayout android: id = "@ + id/AbsoluteLayout01"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: background = "# fff">

<ImageView
Android: src = "@ drawable/android"
Android: layout_y = "40dip"
Android: layout_width = "wrap_content"
Android: layout_x = "35dip"
Android: id = "@ + id/ImageView01"
Android: layout_height = "wrap_content">
</ImageView>
<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "fill_parent"
Android: id = "@ + id/TextView01"
Android: text = "Android2.2 Learning Guide"
Android: textColor = "#0f0"
Android: textSize = "28dip"
Android: layout_y = "330dip"
Android: layout_x = "35dip">
</TextView>
<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "fill_parent"
Android: id = "@ + id/TextView02"
Android: text = "illustrated with texts, clear theory, strong operability"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_y = "365dip"
Android: layout_x = "35dip">
</TextView>
</AbsoluteLayout>

4. Relative layout: RelativeLayout

RelativeLayout allows child elements to specify their positions relative to their parent or sibling elements, which is one of the most common layout methods in actual layout. It has a lot of flexibility. Of course, there are also many attributes, and the operation is difficult. There is also a high possibility of conflicts between attributes. When using relative layout, more tests are required.

In the following example, we use relative layout to place an image first. The other two texts are located relative to the previous element:

<? Xml version = "1.0" encoding = "UTF-8"?>

<RelativeLayout android: id = "@ + id/RelativeLayout01"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: background = "# fff"
Xmlns: android = "http://schemas.android.com/apk/res/android">

<ImageView android: id = "@ + id/ImageView01"
Android: src = "@ drawable/android"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_marginTop = "40dip"
>
</ImageView>
<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView01"
Android: text = "Android2.2 Learning Guide"
Android: textColor = "#0f0"
Android: textSize = "28dip"
Android: layout_below = "@ id/ImageView01"
Android: layout_centerHorizontal = "true"
Android: layout_marginTop = "10dip">
</TextView>
<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView02"
Android: text = "illustrated with texts, clear theory, strong operability"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_below = "@ id/TextView01"
Android: layout_centerHorizontal = "true"
Android: layout_marginTop = "5dip">
</TextView>
</RelativeLayout>

In this interface, we applied a LinearLayout layout, which is vertically extended down, so the layout XML file created is
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>
Start with a node. A Layout container can contain 0 or more layout containers.
The labels in LinearLayout are described as follows:
(1) android: orientation = "vertical" indicates vertical Alignment
(2) android: orientation = "horizontal" indicates horizontal alignment
(3) android: layout_width = "fill_parent" defines the width that the current view can consume on the screen. fill_parent fills the entire screen.

(4) android: layout_height = "wrap_content": The width or height of the view varies with the text column. It means setting the box degree or height automatically.

The default value of layout_weight is zero, which is used to assign importance values to multiple views in a linear layout. For example, we have a text label and two text editing elements in the horizontal direction. This text label does not specify the layout_weight value, so it occupies the minimum space required; if the layout_weight value of each of the two text editing elements is set to 1, the two are equally divided into the remaining width of the parent view layout (because we declare that the importance of the two is equal ). If the layout_weight value of the first of the two text editing elements is set to 1, and the second is set to 2, 1/3 of the remaining space is allocated to the second, 2/3 to the first (Proportional division ). (Valid only in LinearLayou).

RelativeLayout layout:Allows child elements to specify their positions relative to other elements or parent elements (by ID ).

RelativeLayoutImportant attributes used:

Class 1: the property value is true or false.Valid only in RelativeLayout
Android: layout_centerHrizontal horizontal center
Android: layout_centerVertical vertical center
Android: layout_centerInparent is completely centered over the parent Element
Android: layout_alignParentBottom: attach the lower edge of the parent Element
Android: layout_alignParentLeft: Stick the left edge of the parent Element
Android: layout_alignParentRight: attaches the right edge of the parent element.
Android: layout_alignParentTop: top the parent Element
Android: layout_alignWithParentIfMissing

Class 2: the property value must be the reference name "@ id/id-name" of the id"Valid only in RelativeLayout
Android: layout_below is under an element
Android: layout_abve is above an element.
Android: layout_toLeftOf on the left of an element
Android: layout_toRightOf on the right of an element

Android: layout_alignTop: Align the top edge of an element with the top edge of an element.
Android: layout_alignLeft: Align the left edge of an element with the left edge of an element.
Android: layout_alignBottom: the bottom edge of the current element is aligned with the bottom edge of an element.
Android: layout_alignRight: the right edge of an element is aligned with the right edge of an element.

Category 3: attribute values are specific pixel values, such as 30dip and 40px (effective for any layout)
Android: layout_marginBottom distance from the bottom edge of an element
Android: layout_marginLeft distance from the left edge of an element
Android: layout_marginRight distance from the right edge of an element
Android: layout_marginTop distance from the edge of an element

FrameLayout is the simplest layout object.: It is a frame layout style. You can use the include tag to load another layout file of the definition. All the child elements will be fixed in the upper left corner of the screen; you cannot specify a position for a child element in FrameLayout. The next child element overwrites the previous child element and blocks them in part or whole (unless the last child element is transparent ).

Android: hint of EditText 

Prompt information in the input box when EditText is set to null.

Android: gravity
Android: gravity attribute is a limitation on the view content. for example, text on a button. you can set the text to the left and right of the view. take the button as an example. For android: gravity = "right", the text on the button is right-aligned.

Android: layout_gravity 
Android: layout_gravity is used to set the location of the view relative to the parent view. for example, if a button is in linearlayout, you can set it by placing it on the left or right. take the button as an example. For android: layout_gravity = "right", the button is right-aligned.

Android: layout_alignParentRight 
Align the right end of the current control with the right end of the parent control. The attribute value can only be true or false. The default value is false.

Android: scaleType: 
Android: scaleType controls how images are resized/moved to match the size of ImageView. ImageView. ScaleType/android: the differences between scaleType values:

CENTER/center is centered according to the original size of the image. When the length/width of the image exceeds the length/width of the View, the CENTER part of the captured image is displayed.

CENTER_CROP/centerCrop scales up the image size in the center, so that the image length (width) is equal to or greater than the View length (width)

CENTER_INSIDE/centerInside shows the entire content of the image in the center. The image length/width is equal to or less than the View length/width by proportional reduction or the original size.

FIT_CENTER/fitCenter scales up/down the image proportionally to the width of the View and center the image.

FIT_END/fitEnd: scales up or down an image to the width of the View, which is displayed in the lower part of the View.

FIT_START/fitStart scales up/down an image proportionally to the width of the View.

FIT_XY/fitXY increase or decrease the image size proportionally to the View size.

MATRIX/matrix is drawn using a MATRIX to dynamically zoom in and zoom in images.

** Note that the names of images in the Drawable folder cannot be capitalized.

 

Let's repeat the example above and put some more attributes in it. Let's test it:

<? Xml version = "1.0" encoding = "UTF-8"?>

<RelativeLayout android: id = "@ + id/RelativeLayout01"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: background = "# cfff" the color setting is argb, and the first c is transparency.
Xmlns: android = "http://schemas.android.com/apk/res/android">

<ImageView android: id = "@ + id/ImageView01"
Android: src = "@ drawable/android"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_marginTop = "40dip"
Android: layout_centerHorizontal = "true">
</ImageView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView01"
Android: text = "Android2.2 Learning Guide"
Android: textColor = "#0f0"
Android: textSize = "28dip"
Android: layout_below = "@ id/ImageView01"
Android: layout_centerHorizontal = "true"
Android: layout_marginTop = "10dip">
</TextView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView02"
Android: text = "illustrated with texts, clear theory, strong operability"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_below = "@ id/TextView01"
Android: layout_centerHorizontal = "true"
Android: layout_marginTop = "5dip">
</TextView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView03"
Android: text = "alignTop"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_alignTop = "@ id/ImageView01" and align the upper edge of ImageView01
Android: layout_centerHorizontal = "true">
</TextView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView04"
Android: text = "alignLeft"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_alignLeft = "@ id/ImageView01"
Android: layout_centerHorizontal = "true">
</TextView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView05"
Android: text = "alignRight"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_alignRight = "@ id/ImageView01"
Android: layout_centerHorizontal = "true">
</TextView>

<TextView
Android: layout_height = "wrap_content"
Android: layout_width = "wrap_content"
Android: id = "@ + id/TextView06"
Android: text = "alignBottom"
Android: textColor = "#333"
Android: textSize = "18dip"
Android: layout_alignBottom = "@ id/ImageView01"
Android: layout_centerHorizontal = "true">
</TextView>
</RelativeLayout>