Android Development-The five major layout detailed _android

In HTML, we all know what the layout means, in simple terms, the page is divided into modules, such as the HTML Div, table and so on. So is the case with Android. The Android five layout makes the interface more beautiful and more convenient to develop. Of course, the layout is not the same as the application of the same place, of course, some of the layout of the way can be converted and nested use. They all have their own advantages and disadvantages, the specific page layout or to see the development needs, but the most used or relative layout, linear layout and relative layout and linear layout of the nesting use. Of course, I'm talking about Android, and I don't specify an Android phone, like a tablet, a smart home (TV ...). Many of them are Android systems. So here's the five big layouts for Android development, and I'll take a simple dialer for example.

First, Android five layout classification

1. Relative layout

2. Absolute layout

3. Linear layout

4. Table layout

5, Frame layout

Second, the use of specific layout

1. Relative layout (relativelayout)

When we create an Android project, the default activity_main.xml for this file is the Relativelayout relative layout. Then the relative layout is to complete the layout according to the position relationship between the child elements. Position-related properties in child elements in this layout will take effect. It can be understood that the parent element in the Android screen is the entire screen, and the child elements are those buttons, text boxes, and so on.

The relative layout is one of the most common layouts in the Android layout and the most powerful layout:

1 It can set the properties very much

2 can do the most things

3 The resolution of the Android screen is different, so think of the adaptability of the screen, the development of the proposed use of relative layout.

4) Relatively easy to locate relative to elements

A, the following is the relative layout of the XML code

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android: paddingbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: 
      context= "Com.example.fivelayout.MainActivity" > <!--default relativelayout relative layout--> <textview Android:id= "@+id/tv_number" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" an droid:text= "Please enter the phone number:"/> <edittext android:id= @+id/et_number "Android:layout_width=" mat Ch_parent "android:layout_height=" wrap_content "android:hint=" Enter phone number "android:layout_below=" @id/tv_numbe
R "/> <button android:id=" @+id/btn_call "      Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "Call" Andro id:layout_below= "@id/et_number"/> <button android:layout_width= "Wrap_content" an droid:layout_height= "Wrap_content" android:text= "call" android:layout_below= "@id/et_number" Android:layo
 ut_torightof= "@id/btn_call"/> </RelativeLayout>

B, part of the label attribute description

• TextView: The text content displayed
• EditText: Similar input box
• Android:id: Specify a unique ID identifier for the element
• Android:text: The text content displayed
• Android:layout_below: Relative to the top child element below
• Android:layout_torightof: Opposite to the right of the left child element
• Android:layout_width: Horizontal padding for child elements
• Android:layout_width: Portrait padding for child elements

C, Effect

2. Absolute layout

Here is an analogy: our mobile phone to the landlord, three players in the position is fixed in three corners, then the relative layout is not easy to achieve. Then we can use absolute layout (absolutelayout) to make this function easier.

But in the actual development:

1) usually do not use this layout format

2 Its interface code is too rigid

3 There may not be a good fit for a variety of terminals

So the absolute layout approach has been abandoned by Google's Android development team. The android:layout_x and Android:layout_y properties of the child elements in this layout take effect and are used to describe the coordinate position of the child element. The upper left corner of the screen is the coordinate origin (0,0), the first 0 represents the horizontal axis, the right move this value increases, the second 0 represents the ordinate, moves downward, this value increases. Child elements in this layout can overlap each other.

A, the absolute layout of the XML implementation 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 ">
  
  <!-- Absolute layout absolutelayout-->

  <button
    android:id= "@+id/button1" android:layout_width= "Wrap_content"
    android:layout_height= "wrap_content"
    android:layout_x= "22DP"
    android:layout_y= "33DP"
    android:text= "button"/>

  <button
    android:id= "@+id/button2" android:layout_width= "WRAP_"
    Content "
    android:layout_height=" wrap_content "
    android:layout_x=" 141DP "
    android:layout_y=" 103DP "
    android:text= "button"/>
  
</AbsoluteLayout>

B, part of the label attribute description:

• Android:layout_x: The horizontal distance from the corner of the upper left corner of the screen
• Android:layout_y: The vertical distance from the corner of the upper left corner of the screen

C, Effect

3. Linear layout (LinearLayout)

The linear layout is like a string of kebabs, a straight line. It is also divided into horizontal and vertical.

Linear layouts arrange child elements in either vertical or horizontal order, and each child element is positioned after the previous element.

1) Vertical arrangement, then it will be a single n row of the structure, each row will have only one element, regardless of the width of this element is how much;

2) Horizontally, then it will be a single row n-column structure.

3 structure of two rows of two columns, the usual way is to first arrange two elements vertically, each element contains a linearlayout to arrange horizontally

In other words, vertical and horizontal can be nested with each other, oh, you can achieve the effect of table layout.

A, the following is the linear layout of the XML implementation code

<?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 "
  android:o" rientation= "Vertical" >
  
  <!--linear layout linearlayout-->
  
  <textview android:id= 
    "@+id/tv_number"
    android:layout_width= "match_parent"
    android:layout_height= "wrap_content"
    android:layout_ marginleft= "20DP"
    android:layout_margintop= "10DP"
    android:textsize= "18sp"
    android:text= " Please enter the phone number: "    
    />
  
  <edittext 
    android:layout_width=" match_parent "
    android:layout_height=" Wrap_content "
    android:layout_margintop=" 10DP "
    android:hint=" Please enter the phone number
    />
  
  <button 
    android:layout_width= "wrap_content"
    android:layout_height= "wrap_content"
    android:layout_ margintop= "10DP"
    android:text= "dial"
    />

</LinearLayout>

B, part of the label attribute description

• Android:layout_marginleft: Outside of the screen from the left margin of the label
• Android:layout_margintop: Outside of the screen from the top margin of the label
• Android:textsize: Font display size Note: The unit is SP

C, Effect

4. Table layout

Compared to the fact that we have a great understanding of tables, such as the Excel tables we use, and the table tags used in our HTML, the table layouts in Android are similar, so it is recommended that you use a table layout when you want to layout like a table.

Table layouts apply to multiple-row, multiple-column layout formats. A tablelayout consists of many TableRow, and a tablerow represents a row in tablelayout.

1 TableRow is a subclass of LinearLayout, Ablellayout does not need to explicitly declare how many rows and columns are included, but to control the number of rows and columns of the table by TableRow, and other components.

2 TableRow is like TR in table, it is a container, so you can add other components to the TableRow, which is the label attribute we often say, adding one column to each component. If you want to add a component to the Tablelayout, the component is directly occupied by one row.

3 in the table layout, the width of the column is determined by the widest cell in the column, the width of the entire table layout depends on the width of the parent container, which is the default for the parent container itself, where the parent container is equivalent to our entire screen.

A, is the table layout of the XML implementation code

<?xml version= "1.0" encoding= "Utf-8"?> <tablelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" Match_parent > <!--table layout Tablelayout-- > <!--TableRow represents a row, how many label contents in the line represent how many columns--> <tablerow android:layout_width= "Match_parent" android:l ayout_height= "Wrap_content" > <textview android:layout_width= "wrap_content" Android:layout_heigh t= "Wrap_content" android:text= "1 rows 1 Columns" android:textsize= "18sp"/> <textview android:l Ayout_width= "Wrap_content" android:layout_height= "Wrap_content" android:text= "1 rows 2 Columns" android:textsize= "18
      SP "android:layout_marginleft=" 20DP "/> <textview android:layout_width=" Wrap_content " android:layout_height= "Wrap_content" android:text= "1 Rows 3 Columns" android:textsize= "18SP" Android:layout_margi nleft= "20DP"/> &Lt;/tablerow> <tablerow android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:layout_margintop= "10DP" > <textview android:layout_width= "wrap_content" Android:layout_h eight= "Wrap_content" android:text= "2 rows 1 Columns" android:textsize= "18sp"/> <textview Andro Id:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:text= "2 rows 2 Columns" android:textSize = "18sp" android:layout_marginleft= "20DP"/> </TableRow> </TableLayout>

B, part of the label attribute description

TableRow: OK

C, Effect
　

5. Frame layout (frame layout)

Frame layout In some places also called frame layout, is the simplest form of layout, so in the actual development of the use of relatively few. All views added to this layout are displayed in a cascading manner. The first added control is placed at the bottom, and the last view added to the frame layout is displayed at the top level, and the controls on the previous level overwrite the next level of control. This type of display is somewhat similar to the stack.

A, the following is the frame layout XML implementation code

<?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 ">
  
  <!-- Frame layout framelayout-->
  
  <textview 
    android:layout_width= "match_parent"
    match _parent "
    android:text=" frame layout ... "
    />
  
  <button android:layout_width=" 
    wrap_content
    " android:layout_height= "Wrap_content"
    android:layout_gravity= "center"
    android:text= "click"
    />

</FrameLayout>

B, part of the label description

Found here there is no label good description of the ~ ha ha, then I will as if it has been omitted ...

C, Effect

PS: The effect of the above may not be very understanding, so long need everyone to practice it, put those tags one to debug a look ~ finally will find that the original effect of such a big difference, is so big ~ ~ ~

Third, summary

1, in the actual development, each layout is not independent, but can be nested with each other, just like the HTML div nested table, and then the table nested div like

2, the specific use of which layout to see a page to use how the layout is more convenient and efficient implementation, but also more convenient to maintain this aspect to think

3, although the absolute layout was discarded, but in the specific development is still possible to use, we also need to understand the good

4, the layout is not only convenient and quick and easy to maintain, but also can bring better results of the beautiful page

5, part of the layout and layout can be replaced between the use of, such as relative layout and linear layout and table layout of the replacement of the use of each other

6, there are many properties of the layout, so smart everyone may see the law, and we learn the CSS is not very familiar with it, we can go to learn Kazakhstan ...

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.