Five big layouts in Android

First, the layout introduction

In Android, there are five ways to layout, namely:

• Framelayout (Frame layout)
• LinearLayout (Linear layout)
• Absolutelayout (Absolute layout)
• Relativelayout (relative layout)
• Tablelayout (Table layout)

1. Framelayout Frame Layout

• Layout features: All the elements placed in it are placed in the leftmost area and cannot be assigned an exact position, and the next child element overlaps the previous child element
• Application scenario: Suitable for viewing a single picture.

2. LinearLayout Linear layout

• Layout features: A model that provides a horizontal or vertical arrangement of controls, with each sub-component
  are arranged linearly in a vertical or horizontal manner. (Default is vertical)
• Application scenario: The most common layout method

  There is an important attribute android:layout_weight= "1" in the LinearLayout, which represents the line spacing when vertical layout, the column width when horizontal, the larger the weight value.

3. Absolutelayout Absolute Positioning layout

• Layout features: Positioning the component in the way of the axis, the upper left corner is (0,0) point, to the right x axis increment, down the y axis increment, the component positioning property is android:layout_x and android:layout_y to determine the coordinates.
• Application scenario: Accurate positioning of spatial locations

  The layout is outdated due to the large differences in screen size and resolution of the Android phone and the inability to use absolutelayout to accommodate the adaptation problem

4. Relativelayout Relative layout

• Layout features: For a component as a reference, to locate the location of the next component layout method.
• Scenario: A corresponding relationship exists between controls (suitable artifact, recommended)

5. tablelayout Table Layout

• Layout features: Like table in HTML. Use TableRow to layout, where TableRow represents a row, and each view component of TableRow represents a cell.
• Scenario: A corresponding relationship exists between controls.

These five layout elements can be nested within each other to make an aesthetically pleasing interface.

Second, Layout property configuration

attribute configuration of XML in Android layout

1. Basic properties of item in five layout:

• Layout_width & Layout_height
• layout_margin+ Azimuth & padding+ Azimuth
• Layout_gravity & Gravity

Android five layouts have several of these basic properties

1. Layout_width & Layout_height

• Function: Sets the width and height of components in layout
• Value:
  A. Fixed pixel values

  Android:layout_width= "66PX"

  B. "Wrap_content"
  The width and height of the corresponding view will be set to the minimum size required to fit the contents of the view

  Android:layout_width= "Wrap_content"

  C. "Match_parent" (called "Fill_parent" before Android API 8)
  The width and height of the view extends to the full parent layout

  Android:layout_width= "Match_parent"

2. layout_margin+ Azimuth/padding+ Azimuth

• Function: Sets the boundary between the view and layout to be placed in layout or the other view can be a distance apart
• Set up:

  Layout_marginleft          //paddingleftlayout_margintop         //paddingtoplayout_marginright      // Paddingrightlayout_marginbottom   //paddingbottomlayout_margin             //padding

• Value: Fixed value

  android:layout_marginleft= "66px"  //android:paddingleft= "66px"

The difference between paddingleft and Android:layout_marginleft:

• Padding and margin are the meanings of margins, but the margins are defined differently:
  Padding is the margin of the control's content relative to the edge of the control;
  Layout_margin is the margin of the control edge relative to the parent control. Specific example:

The difference between the Padding property and the margin property

3. layout_gravity/gravity

• Function: Used to determine where the view is docked in layout

Android Gravity and Layout_gravity differences:

1. Gravity property: Is the setting for the location of the view content.
   For example, a button above the text. You can set the text on the left side of the view, on the right, and so on.
2. Layout_gravity property: Is the position used to set the view relative to the parent view.
   For example, a button in LinearLayout, you can set this property to put the button in the parent layout linearlayout left to right and so on.

2. Unique properties of various layout 2.1 framelayout

As the simplest layout, you only have the underlying properties:

• Layout_width & Layout_height
• layout_margin+ Azimuth & padding+ Azimuth
• Layout_gravity & Gravity

2.2 Absolutelayout

In addition to the underlying properties, Absolutelayout also has:

• Layout_x: Specifies the x-coordinate of the control
• Layout_y: Specifies the x-coordinate of the control

The values of the above properties are fixed values.

2.3 Tablelayout

In addition to the underlying properties, because Tablelayout's row TableRow is a horizontal (horizontal) LinearLayout, it has linearlayout properties

2.4 LinearLayout

In addition to the underlying properties, there are:

• Orientation
  1. Function: Set the arrangement of the control parts of the layout
  2. Value: Vertical (vertical arrangement-default), horizontal (horizontal arrangement)

  android:orientation= "vertical";  android:orientation= "Horizontal";

• Layout_weight
  1. Definition: A unique proportional distribution attribute for linear layout (linelayout)
  2. Role: Use this property to set weights, and then proportionally to the interface to allocate space, the formula is calculated: control width = control setting width + remaining space% wide

  can refer to this article specifically, the explanation is very detailed

2.5 relativelayout

Relativelayout has the most properties, in addition to the basic properties, there are:
A. Relative to the parent space

XML Properties	Description
Layout_alignparentbottom	Aligns the bottom of the current control with the bottom of the parent control
Layout_alignparentleft	Aligns the left of the current control to the left of the parent control
Layout_alignparentright	Aligns the right end of the current control to the right side of the parent control
Layout_alignparenttop	Aligns the upper end of the current control with the top of the parent control
Layout_centerhorizontal	The current control is in the middle of the horizontal center of the parent control (in the middle of the horizontal direction)
Layout_centervertical	The current control is in the vertical middle position of the parent control (right middle of the plane)
Layout_centerinparent	The current control is in the middle of the vertical direction of the parent control (in the middle vertically)

All of the above properties are evaluated as Boolean: true, False.

B. Relative to a given control

XML Properties	Description
Layout_above	Causes the current control to be positioned above the given ID control
Layout_below	Causes the current control to be located below the given ID control
Layout_toleftof	Causes the current control to be positioned to the left of the given ID control
Layout_torightof	Causes the current control to be positioned to the right of the given ID control
Layout_alignbottom	To overlap the current control with the bottom part of the given ID control
Layout_alignleft	Coincident the current control to the left of the given ID control
Layout_alignright	Coincident the current control to the right of the given ID control
Layout_aligntop	To make the current control coincide with the top of the given ID control
Layout_alignbaseline	Overlaps the baseline of the current control with the baseline of the given ID control t

The values for all of the above properties are the ID names of the given control, as in the following example

//Text control @+id/tab_textview below the control @+id/tab_imageview < TextView     Android:id = "@+id/tab_textview"     android:layout_below= "@+id/tab_imageview"    android:layout_width= "Wrap _content "    android:layout_height=" Wrap_content "      />

3. Properties of selector Selector.xml

3.1 Effects
By setting Selector.xml, you can make the control display different styles under different actions (default, click, Focus, and so on)

3.2 Properties

XML Properties	Description
Android:drawable	Put a drawable resource
Android:state_pressed	Press the status, such as a button touch or click.
Android:state_focused	Gets the focus state, such as when a user selects a text box.
Android:state_hovered	Cursor hover state, usually the same as focused, which is a new feature of 4.0
android:state_selected	Checked status
Android:state_enabled	Ability to accept touch or click events
Android:state_checked	Was checked, such as: A RadioButton can be check.
Android:state_enabled	Ability to accept touch or click events

All of the above properties are evaluated as Boolean: true, False.

3.3 Example Description
Add the Selector.xml resource file in drawable.

Button_selector.xml:

<?XML version= "1.0" encoding= "UTF-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android"> < !-- Specify the picture when the button is pressed--> <Itemandroid:state_pressed= "true"android:drawable= "@drawable/start_down" /> < !-- Specifies the picture when the button is released-->  <Itemandroid:state_pressed= "false"android:drawable= "@drawable/start" /></selector>

property settings for controls in layout file Main.xml:

< Button   Android:id = "@+id/startbutton"   android:layout_width= "Wrap_content"  android:layout_height= "Wrap_ Content "  android:background=" @drawable/button_selector "/>

4. Properties of layout shape Shape.xml

<Shapexmlns:android= "Http://schemas.android.com/apk/res/android">//Default color<SolidAndroid:color= "#876543"/>//Which direction has a border line<paddingAndroid:bottom= "0DP"Android:left= "1DP"Android:right= "1DP"Android:top= "1DP" />//Border line color, size<StrokeAndroid:width= "1DP"Android:color= "#000000" />

property settings for controls in layout file Main.xml:

< Button   Android:id = "@+id/startbutton"   android:layout_width= "Wrap_content"  android:layout_height= "Wrap_ Content "  android:background=" @drawable/layout_shape "/>

Five big layouts in Android