Android five layout and practical application detailed _android

Android has five broad layouts:

• Linear layout (liearlayout): screen vertical or horizontal layout.
• Frame layout (framelayout): Controls start the layout from the upper-left corner of the screen.
• Relative layout (relativelayout): With other controls as the reference layout.
• Absolute Layout (absolutelayout): Layout in screen coordinates.
• Table layout (tablelayout): Layout by row and column.

First, LinearLayout

Linear layouts are used most in development, with vertical and horizontal layout, by setting the property "Android:orientation" to control the direction, the property values are vertical (vertical) and horizontal (horizontal), and the default horizontal direction.

When using orientation, you need to pay attention to a problem, if we use the default layout direction, that is, horizontal direction, if there are more than one control in the LinearLayout and not set a specific width, that is, such layout code:

<linearlayout
  android:layout_width= "match_parent"
  android:layout_height= "match_parent" >
  < TextView
    android:layout_width= "match_parent"
    android:layout_height= "wrap_content"/>
  < TextView
    android:layout_width= "match_parent"
    android:layout_height= "wrap_content"/>
</ Linearlayout>

The following error occurs:

This error tells us that when you have more than one child control, you need to set the layout direction or at least set the size of a child control in that layout direction, we can display the layout orientation or set the width of a child control.

In addition to orientation, there are the following common properties:

android:gravity: Internal control alignment, common property values are center, center_vertical, Center_horizontal, top, bottom, left, right, and so on. This property is also used in Layout components relativelayout, Tablelayout, Framelayout, and Absolutelayout.

Center: Centered, this is not meant to appear in the center of the LinearLayout, when the linearlayout linear direction is vertical, center is centered, but not vertically, equal to the role of Center_horizontal Also, when the linear direction is horizontal, center is centered vertically, equivalent to center_vertical.

Top, bottom, left, right, as the name implies that the internal control roof, low, left-to-right layout.

This is to be separated from the android:layout_gravity area, layout_gravity is used to set itself relative to the parent element's layout.

android:layout_weight: The weight used to allocate the size of the current control in the remaining space. Under normal circumstances, the greater the value occupies the height or the greater the width. In exceptional cases, it is necessary to use this property in the Lineaylayout layout when you want to note that when the horizontal orientation layout and the child control width is fill_parent or match_parent, the smaller the value occupies the larger the width, and the vertical direction is the same. To analyze this situation, code like this:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:orientation=" Horizontal "android:layout_width=" match_parent "
  android:layout_height" = "Match_parent" >

  <textview
    android:layout_width= "match_parent"
    android:layout_height= "40DP"
    android:background= "#666666"
    android:text= "first child control"
    android:gravity= "center"
    Android:layout_ weight= "1"/>
  <textview
    android:layout_width= "match_parent"
    android:layout_height= "40DP"
    android:background= "#EE4000"
    android:text= "second child control"
    android:gravity= "center"
    android: layout_weight= "2"/>

</LinearLayout>

Display effect:

This occurs mainly because of match_parent or fill_parent, the system assigns the first child control Parent_width (the remaining space), and then assigns the second Parent_width, which allocates two parent_width , now the remaining is parent_width-2parent_width=-parent_width, here is the main problem here, the remaining control is actually a negative number. Next, the first control takes up width: parent_width (current width) + weight 1/3* (-parent_width) =2/3parent_width; the second control occupies width: parent_width+ weight 2/3* (-parent_ width) =1/3parent_width, so when widths are match_parent, the remaining space is negative, whose weight is greater who will subtract more.

In the normal development we will often use this attribute, by setting layout_weight can solve a lot of incredible layout problems.

Second, framelayout

Frame layout or layer layout, arranged hierarchically in the upper-left corner of the screen, followed by a control that overrides the previous control. This layout is often used in development, because it is layered layout, we need to implement the level of display style can be used in this layout, such as we want to achieve a similar layout of the Baidu map:

Through this diagram we can see the map and Operation buttons are layered display, using framelayout we can also simply implement such a style, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" Match_parent "> < Com.baidu.mapapi.map.MapView android:id= "@+id/mapshowview" android:layout_width= "Fill_parent" Android:layout_h eight= "Fill_parent" android:clickable= "true"/> <edittext android:layout_width= "Match_parent" Android: layout_height= "40SP" android:background= "@drawable/edit_selector" android:layout_marginleft= "20SP" Android:lay
    out_marginright= "20SP" android:layout_margintop= "30DP" android:paddingleft= "10sp" android:textsize= "14SP" android:hint= "Search the location, check the bus, find the route" android:textcolorhint= "#aaaaaa" android:gravity= "left|center_vertical"/> Arlayout android:layout_width= "wrap_content" android:layout_height= wrap_content "android:orientation=" Vertica L "android:layout_gravity=" right "android:layout_margintop= "80DP" android:layout_marginright= "20DP" > <button android:id= "@+id/traffic" Android:lay Out_width= "45SP" android:layout_height= "45SP" android:text= "road Conditions" android:textcolor= "#ffffff" Androi D:textsize= "14SP" android:background= "@drawable/corner_black_bgborder"/> <button android:id= "@+id/p Anorama "android:layout_width=" 45sp "android:layout_height=" 45SP "android:text=" Panorama "Android:textco Lor= "#ffffff" android:textsize= "14sp" android:layout_margintop= "10DP" android:background= "@drawable/corn Er_black_bgborder "/> <button android:id=" @+id/company "android:layout_width=" 45SP "Android:la yout_height= "45SP" android:text= "peer" android:textcolor= "#ffffff" android:textsize= "14SP" android:l ayout_margintop= "10DP" android:background= "@drawable/corner_black_bgborder"/> </LinearLayout> <but Ton android:id= "@+id/location "android:layout_width=" 45sp "android:layout_height=" 45sp "android:layout_gravity=" Bottom "androi d:text= "positioning" android:textcolor= "#ffffff" android:textsize= "14sp" android:layout_marginleft= "20DP" android:l

 Ayout_marginbottom= "120DP" android:background= "@drawable/corner_black_bgborder"/> </FrameLayout>

Display effect:

The first child control in the Framelayout is the Baidu map, followed by the input box, the right action button and the lower left positioning button. We can see that many of the child controls here use a property, Layout_gravity, as mentioned earlier in the Gravity property, Layout_gravity is used to set itself relative to the parent element's layout. This property is used frequently in framelayout layouts to control the placement of controls in the layout, layout_gravity commonly used property values include top, bottom, left, right, center, Center_horizontal, Center_vertical, the center here allows the control to reside in the central layout of the Framelayout, property values can be combined to use, such as we both live at the bottom of the layout and vertical center can be set this way: "android:layout_gravity= Bottom|center_vertical ".

The operation controls in the code are divided into three layout positions, the top search box, the right action button, and the lower left position button. The following is a brief explanation of these three sections:

1, search the input box, according to the definition of framelayout, the child controls from the top left corner of the layout, the layout of the hierarchy, where the input box, we need to display the top of the screen, so only need to set its top, left and right direction of the margin can meet our design. Here let the input box horizontally center display by setting the width to match_parent and then setting the same direction of the same margin can be horizontally centered, of course, you can set a certain width and then set the Layout_gravity property value Center_ Horizontal.
2, right Operation button Bar, three buttons for linearlayout layout, vertical linear layout, linearlayout we set "android:layout_gravity=right" to achieve the right layout, Second, set margin to let the control display in a reasonable layout.
3, Positioning button, this button is displayed in the lower left of the screen, we only need to set "Android:layout_gravity=bottom", and then set the direction of the margin to let the button display in a reasonable position.
Third, Relativelayout

Relative layouts allow child controls to be laid out relative to sibling or parent controls, and you can set child controls to align up and down relative to sibling controls or parent controls. Relativelayout can replace some nested views, and when we use LinearLayout to implement a simple layout but use too much nesting, we can consider using relativelayout to rearrange the layout.

Common properties for Relativelayout neutron controls:

1, relative to the parent control , for example: Android:layout_alignparenttop= "true"

The top of the Android:layout_alignparenttop control is aligned with the top of the parent control;

The bottom of the Android:layout_alignparentbottom control is aligned with the bottom of the parent control;

The left part of the Android:layout_alignparentleft control is aligned with the left part of the parent control;

The right part of the Android:layout_alignparentright control is aligned with the right part of the parent control;

2, relative to the given ID control , for example: android:layout_above= "@id/**"

The bottom of the Android:layout_above control is placed above the control with the given ID;

The bottom of the Android:layout_below control is placed under the control of the given ID;

The right edge of the Android:layout_toleftof control is aligned with the left edge of the control with the given ID;

The left edge of the Android:layout_torightof control is aligned with the right edge of the control with the given ID;

The baseline of the Android:layout_alignbaseline control is aligned with the baseline of the given ID;

The top edge of the Android:layout_aligntop control is aligned with the top edge of the given ID;

The bottom edge of the Android:layout_alignbottom control is aligned with the bottom edge of the given ID;

The left edge of the Android:layout_alignleft control is aligned with the left edge of the given ID;

The right edge of the Android:layout_alignright control is aligned with the right edge of the given ID;

3, center , for example: Android:layout_centerinparent= "true"

Android:layout_centerhorizontal Horizontal Center;

android:layout_centervertical Vertical Center;

Android:layout_centerinparent the center of the parent control;

application Example:

 <?xml version= "1.0" encoding= "Utf-8"?> "<linearlayout xmlns:android=" http:// Schemas.android.com/apk/res/android "android:layout_width=" match_parent "android:layout_height=" Match_parent " > <relativelayout android:layout_width= "match_parent" android:layout_height= "50DP" Android:background = "@drawable/topbar_bg_border" > <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true" android:text= "title" Android:textsize= "19SP" Andr
      Oid:textstyle= "Bold" android:textcolor= "#4e6288"/> <textview android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centervertical= "true" android:layout_alignparentright= "True" android:layout_marginright= "15DP" android:text= "Cancel" android:textsize= "18sp"/> </relative Layout> </LinearLayout> 

Show Results:

This is a top layout style, and in many apps we will consider using styles that are basically the same as the top layout to unify the style. This is just a simple layout that contains a title as well as a cancellation button (a textview instead), and relativelayout is simpler and more reasonable to use here compared to several other layout controls. First set the height of the relativelayout, and then set the title of Android:layout_centerinparent= "true" displayed in the center, the last set the Cancel button two properties vertically centered Android:layout_ Centervertical= ' true ' and right-align android:layout_alignparentright= ' true '.

Four, Absolutelayout

Absolute layout is also called coordinate layout, specify the absolute position of the control, simple direct, intuitive strong, but the mobile phone screen size differences, adaptability is poor, Android 1.5 has been discarded, can be replaced with relativelayout.

Absolutelayout Implement layout code:

<?xml version= "1.0" encoding= "Utf-8"?> <absolutelayout xmlns:android=
"http://schemas.android.com/apk" /res/android "
  android:layout_width=" match_parent "android:layout_height=" match_parent ">

  < ImageView
    android:layout_width= "100dip"
    android:layout_height= "120dip"
    android:layout_x= "150dip"
    android:layout_y= "40dip"
    android:src= "@drawable/android_logo"/>

  <button
    android:layout _width= "Wrap_content"
    android:layout_height= "wrap_content"
    android:layout_x= "100dip"
    android: Layout_y= "150dip"
    android:text= "previous"/>

  <button android:layout_width= "
    wrap_content
    " android:layout_height= "Wrap_content"
    android:layout_x= "200dip"
    android:layout_y= "150dip"
    android:text= "Next"/>

  </AbsoluteLayout>

Display effect:

Here in order to design a picture browsing effect, the control of the layout_x and layout_y set up in turn, but the current screen size can be normal display, the other screen will need to redesign the layout. In fact, with relativelayout easy to achieve this effect, do not have to consider screen compatibility. So, Absolutelayout has become the history of Android layout.

Five, Tablelayout

The table layout inherits from LinearLayout, the rows are set by TableRow, and the number of columns is determined by the child controls in TableRow, and adding child controls directly to Tablelayout occupies the entire row.

Tablelayout Common Properties:

Android:shrinkcolumns: Set a column that can be shrunk, with too much content to shrink to the second row

Android:stretchcolumns: Set up a scalable column to fill the entire column with blank areas

Android:collapsecolumns: Set the columns to hide

The index of the column starts at 0, and Shrinkcolumns and Stretchcolumns can be set at the same time.

Child control Common Properties:

Android:layout_column: First few columns

Android:layout_span: Number of columns occupied

Tablelayout Instance Code:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:orientation=" vertical "android:layout_width=" match_parent "android:layout_height=" Match_parent " > <linearlayout android:layout_width= "match_parent" android:layout_height= "50DP" android:gravity= "CEN" ter "> <textview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Andro" id:text= "Home"/> </LinearLayout> <linearlayout android:layout_width= "Match_parent" Android:layout_h eight= "Match_parent" android:layout_weight= "1" android:gravity= "center" > <tablelayout android:lay Out_width= "Match_parent" android:layout_height= "match_parent" android:stretchcolumns= "0,1,2" Android:gra vity= "center" > <TableRow> <textview android:layout_width= "100DP" Android:la yout_height= "100DP" android:lAyout_margin= "5DP" android:background= "#e2a617" android:text= "File Management" android:gravity= "center" /> <textview android:layout_width= "100DP" android:layout_height= "100DP" Andro Id:layout_margin= "5DP" android:background= "#0d637f" android:text= "App Store" android:gravity= "cen ter "/> <textview android:layout_width=" 100DP "android:layout_height=" 100DP "a Ndroid:layout_margin= "5DP" android:background= "#aa2266" android:text= "File Management" android:gravity=
          "Center"/> </TableRow> <TableRow> <textview android:layout_width= "100DP"
          android:layout_height= "100DP" android:layout_margin= "5DP" android:background= "#45e15f" android:text= "Application Management" android:gravity= "center"/> <textview android:layout_width= "200d P "Android:layout_height= "100DP" android:layout_margin= "5DP" android:background= "#3924a4" android:text= "Application Centre "android:gravity=" center "android:layout_span=" 2 "/> </TableRow> </tablelayou 
    t> </LinearLayout> <tablelayout android:layout_width= "match_parent" android:layout_height= "55DP" Android:background= "#f5f5f5" android:stretchcolumns= "0,1,2,3" android:gravity= "center_vertical" > <
        tablerow> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:gravity= "center" android:text= "Home"/> <textview android:layout_width= "Wrap_cont Ent "android:layout_height=" wrap_content "android:gravity=" center "android:text=" message "/> & Lt TextView android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:gravity= "Center" Android:text= "found"/> <textview android:layout_width= wrap_content "android:layout_height=" Wrap_con Tent "android:gravity=" center "android:text=" I "/> </TableRow> </TableLayout> </

 Linearlayout>

Display effect:

The screen Center is a similar material layout, and the bottom is a navigation bar with a page switch. Bottom layout by setting android:stretchcolumns= "0,1,2,3″ to allow four buttons to display and fill the width of the same size, the central area of the main use of android:stretchcolumns=" 0,1,2″ The fill display and android:layout_span= "2″ control large content across columns.

Layout in the Android interface equivalent to the framework of the building, in the development we need to use a variety of layouts to achieve interface display requirements, only to understand the different layout of the display style and the gap between them, we can be very comfortable, reasonable layout interface.