Step-by-step _android Development Course [layout of 14]_ user interface]

Focus on technology, enjoy life! --qq:804212028
Browse Links: http://blog.csdn.net/y18334702058/article/details/44624305

• Topic: Layout of the user interface
  -In the Android development we have the legendary 5 large layout, they combine use, draw the app interface of the frame.

5 major layouts commonly used in Android:
Linear layout (LinearLayout): Components that are laid out in a vertical or horizontal direction.
Frame layout (framelayout): Components from the top left of the screen layout component.
Table layout (tablelayout): Layout components by row and column.
Relative layout (relativelayout): How to lay out relative to other components.
Absolute Layout (absolutelayout): The component is laid out in absolute coordinates.

Diagrams between the various layouts:

1. Linear layout (LinearLayout):

Linear layout is the most common form of layout in Android development, which is laid out in a vertical or horizontal direction, with the "Android:orientation" property set to the direction of the linear layout. There are two types of property values: Vertical (vertical) and horizontal (horizontal).

Main.xml Source code:

<?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" >                <linearlayoutandroid:orientation="Horizontal"android:layout_ Width="Fill_parent"android:layout_height="Wrap_content" >                                    <textview  android:layou T_height  = "wrap_content"  android:layout_widt H  = "fill_parent"  android:background  =< Span class= "Hljs-value" > "#005588"  android:layout_weight  = "1" />         <textview  android:layou T_height  = "wrap_content"  android:layout_widt H  = "fill_parent"  android:background  =< Span class= "Hljs-value" > "#337799"  android:layout_weight  = "1" />           <textview  android:layou T_height  = "wrap_content"  android:layout_widt H  = "fill_parent"  android:background  =< Span class= "Hljs-value" > "#227508"  android:layout_weight  = "1" />         <TextViewandroid:layout_height="Wrap_content"android:layout_width= "Fill_parent" android:background="#545729"android:layout_weight="1" />                                                       </linearlayout>    <linearlayoutandroid:orientation="vertical"android:layout_width= "Fill_parent" android:layout_height="Wrap_content" >                                 <TextViewandroid:layout_height="Wrap_content"android:layout_width ="Fill_parent"android:background="#234235" />                                             <TextViewandroid:layout_height="Wrap_content"android:layout_width= "Fill_parent" android:background="#865321" />                                           </linearlayout></linearlayout>

Operation Result:

2. Frame layout (framelayout):

The frame layout starts from the upper left corner (0,0) coordinates of the screen, multiple components are stacked, the first added component is placed at the bottom, and the last view added to the frame is displayed at the top. The previous layer overrides the next layer of control.

Mian.xml Source code:

<?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" >               <TextViewandroid:layout_width="300DP"android:layout_height= "300DP" android:background="#114488" />                                       <TextViewandroid:layout_width= "250dp"android:layout_height=" 250DP "android:background=" #225599 " />                                       <TextViewandroid:layout_width="200DP"android:layout_height= "200DP" android:background="#337700" />                                   </framelayout> 

Operation Result:

3. Table layout (tablelayout):

A table layout is a viewgroup that displays its child view (view) elements in a table, where rows and columns identify a view.
The common properties of table layouts are as follows:
Android:collapsecolumns: Hides the specified column
Android:shrinkcolumns: Shrinks the specified column to fit the screen and does not extrude the screen
Android:stretchcolumns: Try to fill the specified column with blank parts
Android:layout_column: The control is placed in the specified column
Android:layout_span: The number of columns that the control spans

Mian.xml Source code:

<?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:shrinkcolumns="0,1,2" >                    <TableRow>         <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Button1"android:layout_column="0" />                                                           <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Button2"android:layout_column="1" />                                                       </TableRow>     <TableRow>        <button  android:layout_ Width  = "wrap_content"  android:layout_height< /span>= "wrap_content"  android:text  = "Button3"  android:layout_column  =" 1 "/>         <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Button4"android:layout_column="2" />                                                       </TableRow> </tablelayout> 

Operation Result:

4. Relative layout (relativelayout):

Relative layouts are laid out according to the relative positions of the components, such as top, bottom, left, right, or relative to the parent layout, on top, bottom, left, and right, relative to a component.

Mian.xml Source code:

<?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="Wrap_content"  android:padding="10px" >                    <textview  android:id= "@+id/tev1"  android:layout_width  = "wrap_content"  android:layout_height  =" wrap_content " android:layout_marginbottom  =" 30DP " android:text  =" Doodle ran where: "
       />      <edittext  android:id
      = "@+id/tx1"  android:layout_width  = "match_parent"  android:layout_height  =" wrap_content " android:layout_below  =" @id/tev1 "/>      <button  android:id  = "@+id/btn1"  android:layout_height  =< Span class= "Hljs-value" > "wrap_content"  android:layout_width  = "wrap_content"  android:layout_below  =" @id/tx1 " android:layout_alignparentright  =" true " android:text  = OK  />      <buttonandroid:id="@+id/btn2"android:layout_height="Wrap_ Content "android:layout_width=" Wrap_content "android:layout_below=" @id/tx1 "  android:layout_toleftof= "@id/btn1"android:layout_marginright="30DP"  Android:text="Cancel" />                                                                </relativelayout> 

Operation Result:

Absolute Layout (absolutelayout):

Absolute layout can not meet the adaptation of a variety of different sizes of models, gradually eliminated, has no one to use Yo! You don't have to learn yo, good happy ^_^!

Focus on technology, enjoy life! --qq:804212028
Browse Links: http://blog.csdn.net/y18334702058/article/details/44624305

Step-by-step _android Development Course [layout of 14]_ user interface]