Android system five layout detailed layouts

we know that Android applications are typically composed of multiple activity, and these activity is presented in the form of a view in front of us, A view is composed of one component. Components are our common button, TextEdit, and so on. So how do the beautiful interfaces in the Android phone that we see in the usual way show up? This is going to use the Android layout manager, the online analogy is very good: the layout is like the framework of the building, the components in accordance with the layout of the requirements in order to form a beautiful interface for the see.

Before you analyze the layout, Let's take a look at the controls: any visual controls in Android are inherited from Android.veiw.View, and there are two ways to set up the view: The first is our most common use of XML files to configure the properties of the view, and then when the program starts, the system creates the corresponding V from the configuration file. Iew view. The second is that we use the corresponding class directly in the code to create the view.

How to define a view using an XML file:

Each Android project has a res/layout directory under the source directory, which is used to store layout files. Layout files are typically named after the activity's name, with. xml as the suffix. When creating a component in XML, you need to specify an ID for the component, such as: The android:id= "@+id/name" system automatically creates the corresponding R resource class variable in the Gen directory.

How to use views in your code :

when you create each activity in your code, you typically call Setcontentview () in the OnCreate () method to load the specified XML layout file, and then you can pass the Findviewbyid () To get a control of the corresponding ID created in the layout file, such as button.

Such as:

Private Button btnsndmag;public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.main);//load main.xml layout file Btnsndmag = (Button) This.findviewbyid (R.ID.BTNSNDMAG); Find the button component for by id ....}

Let's describe the five major layouts available to us in Android: LinearLayout (Linear layout), Framelayout (single frame layout), Absolutelayout (absolute layout), tablellayout (table layout), Relativelayout (relative layout). The most commonly used ones are linearlayout, Tablellayout and Relativelayout. These layouts can be used in nested nesting.

(1) linearlayout linear layout

A linear layout is a sequence of child elements (which can be controls or layouts) sequentially, in either a horizontal or vertical order, with each element positioned after the previous element. Linear layouts are divided into two types: horizontal and vertical. Set by property android:orientation= "vertical" and android:orientation= "horizontal" respectively.

Android:layout_weight represents the proportion of space that a child element occupies, and some say that the value is proportional to the amount of space occupied, some say inversely. I set in the actual application and the online data display just the opposite, this problem will be written in a special article to analyze. Now all we have to do is set it in positive proportions.

For example, let's implement a simple calculator interface:

Code:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:orientation=" vertical "android:layout_width=" match_parent "Android:layout_heig ht= "Match_parent" android:background= "#FFFFFF" tools:context= ". Mainactivity ">//Here the first line shows the label as a horizontal layout <linearlayout android:layout_width=" Match_parent "android:layout            _height= "wrap_content" android:orientation= "horizontal" > <edittext android:id= "@+id/msg" Android:inputtype= "number" android:layout_width= "match_parent" android:layout_height= "wrap _content "android:text=" "> </EditText> </LinearLayout>//second act MC m+ m-mr four BU        Tton form a horizontal layout <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:orientation= "Horizontal" > <button android:layout_width= "match_parent"Android:layout_height=" Wrap_content "android:text=" MC "android:layout_weight=" 1 "> </Button> <button android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:t         ext= "m+" android:layout_weight= "1" > </Button> <button android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:text= "M" android:layout_weight= "1" > </Button> & Lt Button android:layout_width= "match_parent" android:layout_height= "wrap_content" android:text= "Mr" android:layout_weight= "1" > </Button></LinearLayout>//IBID. C +/-/* Four buttons form a horizontal layout <linea Rlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:orient ation= "Horizontal" > <button android:layout_width= "match_parent" Android:layout_h eight= "Wrap_content"             android:layout_weight= "1" android:text= "C" > </Button> <button Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layou t_weight= "1" android:text= "+/-" > </Button> <button android:layout              _width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1"              android:text= "/" > </Button> <button android:layout_width= "Match_parent"          android:layout_height= "Wrap_content" android:layout_weight= "1" android:text= "*" >        </Button> </LinearLayout> <linearlayout android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "horizontal" > <button android:layou  T_width= "Match_parent"       android:layout_height= "Wrap_content" android:text= "7" android:layout_weight= "1" > </Button> <button android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:text= "8" android:layout_weight= "1" > </Button> <button android:layout_width= "Match_parent" a ndroid:layout_height= "Wrap_content" android:text= "9" android:layout_weight= "1" > </Button> <but ton android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:text= "-" Android oid:layout_weight= "1" > </Button></LinearLayout> <linearlayout android:layout_width= "Match_            Parent "android:layout_height=" wrap_content "android:orientation=" Horizontal "> <button Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= " 1 "Android:text= "4" > </Button> <button android:layout_width= "Match_parent" Android:lay        out_height= "Wrap_content" android:layout_weight= "1" android:text= "5" > </Button> <button android:layout_width= "match_parent" android:layout_height= "Wrap_content" a ndroid:layout_weight= "1" android:text= "6" > </Button> <button Android:layo Ut_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" an droid:text= "+" > </Button> </LinearLayout>//Outermost layer is a horizontal layout, from the left top row 1 2 33 buttons, 0 of the following line.        Two button and right = form <linearlayout android:orientation= "horizontal" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" >//here 1 2 3 and below 0. Form a vertical layout <linearlayout android:orientation= "Vertical" Android:layout_weight= "3" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" >//here 1 2 3 form a horizontal layout <linearlayout android:orientation= "Horizontal" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" > <button android:layout_width= "wrap_content" android:layout_height= "wrap            _content "android:layout_weight=" 1 "android:text=" 1 "></Button> <button            Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_weight= "1"            android:text= "2" ></Button> <button android:layout_width= "Wrap_content"     android:layout_height= "Wrap_content" android:layout_weight= "1" android:text= "3" ></Button> </linearlayout>//here's 0 and. form a horizontal layout, note here the Android_weight parameter settings <linearlayout android:orientation= "Horizontal" android:layout_width= "Match_parent" android:layout_height= "wrap_content" > <button android:layout_width= "0 PX "android:layout_height=" wrap_content "android:layout_weight=" 2 "android:text=" 0 "&GT;&L            t;/button> <button android:layout_width= "0px" android:layout_height= "wrap_content" android:layout_weight= "1" android:text= "." ></Button> </LinearLayout> </linearlayout>//The vertical layout of a single Button here <linearlayout android:o rientation= "Vertical" android:layout_weight= "1" android:layout_width= "Wrap_content" android:layout_height = "Match_parent" > <button android:layout_width= "match_parent" android:layout_height= "match_parent "Android:text=" = "></Button> </LinearLayout> </LinearLayout> </LinearLayout>

(2) tablelayout table layout

Table layout, suitable for multi-row multi-column layout format, each tablelayout is composed of more than one TableRow, a tablerow represents each row in the Tablelayout, this line can be composed of multiple child elements. In fact, both Tablelayout and TableRow are subclasses of the linelayout linear layout. However, the TableRow parameter Android:orientation property value is fixed to horizontal, and android:layout_width=match_parent,android:layout_height=wrap _content. So TableRow is actually a horizontal linear layout, and so the child elements are the same width and height.

Note: In tablelayout, cells can be empty, but cannot span columns, meaning that only adjacent cells cannot be empty.

In a tablelayout layout, the width of a column is specified by the widest cell in the column, and the width of the table is specified by the parent container. You can set the following properties for each column:

Shrinkable indicates that the width of the column can be shrunk so that the table adapts to the size of the parent container

Stretchable indicates that the width of the column can be stretched so that it fills the free space in the table

Collapsed indicates that the column will be hidden

Unique properties in Tablelayout:

Android:collapsecolumns

Android:shrinkcolumns

Android:stretchcolumns = "0,1,2,3"

Demo: We want to design a table with three rows and three columns as follows, but the second line we just want to show 2 tables:

<?xml version= "1.0" encoding= "Utf-8"? ><tablelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "android:orientation=" vertical "android:shrinkcolumns=" 0,1,2 "//Set three columns can be shrunk android:stretchcolumns=" 0,1 , 2 "//Set three columns can be stretched if you do not set this, the displayed table will not be able to fill the entire screen android:layout_width=" fill_parent "android:layout_height=" Fill_parent "        ; <tablerow android:layout_width= "fill_parent" android:layout_height= "Wrap_content" > <Button android:              gravity= "center" android:padding= "10DP" android:text= "Button1" > </Button> <button android:gravity= "center" android:padding= "10DP" android:text= "Button2" > < /button> <button android:gravity= "center" android:padding= "10DP" android:text= "Button3" > </Button> </TableRow> <tablerow android:layout_width= "Fill_parent" Android:layout_  height= "Wrap_content" >      <button android:gravity= "center" android:padding= "10DP" android:text= "Button4" > & lt;/button> <button android:gravity= "center" android:padding= "10DP" android:text= "Button5" > </Button> </TableRow> <tablerow android:layout_width= "Fill_parent" Androi            d:layout_height= "Wrap_content" > <button android:gravity= "center" android:padding= "10DP" android:text= "Button6" > </Button> <button android:gravity= "center" Android:padd            ing= "10DP" android:text= "Button7" > </Button> <button android:gravity= "center" android:padding= "10DP" android:text= "Button8" > </Button> </tablerow></tablelayo Ut>

(3) relativelayout relative layout

Relativelayout inherits from Android.widget.ViewGroup, which completes the layout according to the position relationship between child elements, as the most flexible and most commonly used layout in the five layouts of the Android system, it is very suitable for some complicated interface design.

Note: Before referencing other child elements, the ID of the reference must already exist, or an exception will occur.

Common location Properties:

  

Android:layout_toleftof the component is located on the  left side of the reference component Android:layout_torightof the component is on the right side of the reference component Android:layout_above The component is located above the reference component Android:layout_below     the component is located below the reference component Android:layout_alignparentleft  the component is aligned to the left side of the parent component of Android: Layout_alignparentright whether the component is aligned to the right end of its parent component Android:layout_alignparenttop   whether the component aligns to the top of the parent component Android:layout_ Alignparentbottom  Whether the component aligns to the bottom of the parent component Android:layout_centerinparent   The component is centered relative to the parent component Android:layout_ Centerhorizontal   Whether the component is centered horizontally android:layout_centervertical   whether the component is vertically centered

Demo: Use the relative layout to design an interface as shown:

Source:

<?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=" fill_parent "> <button android:id=" @+id/ Btn1 "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_centeri Nparent= "true" android:layout_centerhorizontal= "true" android:text= "Button1" ></Button> & Lt        Button android:id= "@+id/btn2" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_toleftof= "@id/btn1" android:layout_above= "@id/btn1" android:text= "Button2" ></ button> <button android:id= "@+id/btn3" android:layout_width= "Wrap_content" android:layout_height= "W Rap_content "android:layout_torightof=" @id/btn1 "android:layout_above=" @id/btn1 "android:text=" button 3 "></Button>   <button android:id= "@+id/btn4" android:layout_width= "wrap_content" android:layout_height= "wrap_content "Android:layout_torightof=" @id/btn2 "android:layout_toleftof=" @id/btn3 "android:layout_above=" @id/BT N2 "android:text=" Button4 "></Button></RelativeLayout>

(4) framelayout frame layout

Put all the child elements in the upper-left corner of the entire interface, the following child elements directly overwrite the previous child elements, so use less.

(5) absolutelayou Absolute layout

The absolute layout of all the child elements by setting the android:layout_x and Android:layout_y properties, the coordinate position of the child element is fixed down, that is, coordinates (android:layout_x, android:layout_y), The layout_x is used to denote the horizontal axis and layout_y to indicate ordinate. the upper left corner of the screen is the coordinate (0,0), the horizontal to the right square, the vertical downward for the square. In practical applications, this layout is relatively small, because the Android terminal is more general models, the respective screen size. resolution, etc. may not be the same, if the absolute layout, may result in some of the terminal display is not congruent.

In addition to the properties of several layouts commonly used above:
(1) layout_margin
Used to set the margin of the control's edge relative to the parent control
Android:layout_marginleft
Android:layout_marginright
Android:layout_margintop
Android:layout_marginbottom

(2) layout_padding
Used to set the padding of the control's contents relative to the edge of the control
Android:layout_paddingleft
Android:layout_paddingright
Android:layout_paddingtop
Android:layout_paddingbottom

(3) Layout_width/height
Used to set the height and width of the control
Wrap_content content wrap that represents the text size padding for this control
Fill_parent Follow parent window
Match_parent

(4) Gravity
Used to set the alignment of content within the view component
Top bottom left right center, etc.

(5) android:layout_gravity
Used to set the alignment of the container component
Android:layout_aligntop aligns the top edge of this element with the top edge of an element
Android:layout_alignleft aligns the left edge of this element with the left edge of an element
Android:layout_alignbottom aligns the bottom edge of this element with the bottom edge of an element
Android:layout_alignright aligns the right edge of this element with the right edge of an element

Android system five layout detailed layouts