Android Learning VI (four basic layouts in Android)

Before learning the use of the basic components in Android, this article, I will summarize the use of the layout in Android, see below in detail.

1.LinearLayout

Linearlayoutyot, also known as linear layout, is a common layout that can be arranged horizontally and vertically. The previous blog post basically uses the vertical layout in the linear layout, the way of this vertical layout is the property android:orientation= "vertical" control. If the value is specified as horizontal, the control is arranged horizontally. Let me do the actual operation.

Create a new Android project with the project name Uilayout, and the other basic in the default way.

Modify the following layout file with the following code:

<linearlayout 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:orientation= "vertical"    >    <button         android:id= "@+id/button1"        android:layout_ Width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "button 1"        />        < Button         android:id= "@+id/button1"        android:layout_width= "wrap_content"        android:layout_height= " Wrap_content "        android:text=" button 2 "        />        <button         android:id=" @+id/button1        " Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "button 3"        />    </LinearLayout>

Run the program with the following results:

Visible three buttons are self-adapting in size and are arranged vertically.

Now we are modifying the property values under the linear layout, and the modified code is as follows:

<linearlayout 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 "    <span style= "color: #ff0000;" >android:orientation= "Horizontal" </span>    >    <button         android:id= "@+id/button1"        Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "button 1"        / >        <button         android:id= "@+id/button1"        android:layout_width= "Wrap_content"        android: layout_height= "Wrap_content"        android:text= "button 2"        />        <button         android:id= "@+id/ Button1 "        android:layout_width=" wrap_content "        android:layout_height=" wrap_content "        android:text= "Button 3"        />    </LinearLayout>

Running results such as:

If you do not specify a property value for Android:orientation, the default is horizontal, horizontal.

Note: If the linearlayout arrangement is horizontal, the inner control must not specify the width as match_parent, because the individual control will fill the horizontal direction completely, and the other controls will not be able to place the position. Similarly, if the linearlayout arrangement is vertical, the internal control cannot specify the height as match_parent.

The following touches the properties of several commonly used controls and layouts

Android:layout_gravity: Used to specify how the control is aligned in the layout

Android:gravity: is used to specify how the text is aligned in the control

Android:layout_gravity and android:gravity have the same selectable values, but be aware that theLinearLayout is arranged in a horizontal direction, Only vertical alignment takes effect because the length in the horizontal direction is not fixed at this point, and each time you add a control, the horizontal length changes, so you cannot specify the alignment for that direction. Similarly, when theLinearLayout is in the vervitcal direction, only the horizontal alignment will take effect.

Modify the layout file and the following code:

<linearlayout 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:orien        tation= "Horizontal" > <button android:id= "@+id/button1" android:layout_width= "Wrap_content"        android:layout_height= "wrap_content" android:text= "button 1" android:layout_gravity= "Top"/> <button android:id= "@+id/button1" android:layout_width= "Wrap_content" android:layout_height = "Wrap_content" android:text= "button 2" android:layout_gravity= "Center_horizontal"/> <b Utton android:id= "@+id/button1" android:layout_width= "wrap_content" android:layout_height= "Wrap_cont ENT "android:text=" button 3 "android:layout_gravity=" Bottom "/> </LinearLayout>

Run the program with the results such as:

Android:layout_weight: This property allows us to specify the size of the control in a proportional way, which can play a very important role in the adaptation of the phone screen.

Modify the layout file as follows:

<linearlayout 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:orientation= "Horizontal"    >    <edittext         android:id= "@+id/input_message"        Android:layout_width= "0DP"        android:layout_height= "wrap_content"        android:layout_weight= "1"        Android : hint= "type something"        />        <button         android:id= "@+id/send"        android:layout_width= "0DP"        android:layout_height= "wrap_content"        android:layout_weight= "1"        android:text= "Send"        />    </LinearLayout>

The running program appears as follows:

Looking at the code above, the width of the EditText and button is specified as 0, where the Android:layout_weight property is used, and the width of the control should not be determined by the andorid:layout_width. Specifying 0 Here is a form of comparison specification. We then set the value of the EditText and button property android:layout_weight to 1, which means that edittext and button will split the width horizontally.

Why does the Android:layout_weight attribute have a value of 1 that will split the screen width? The system adds the Layout_weight values specified by all controls under LinearLayout to get a total value, and then each control occupies a percentage of the control's layout_weight values divided by the calculated total.

Below in the modified layout of the file, the code is as follows:

<linearlayout 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:orientation= "Horizontal"    >    <edittext         android:id= "@+id/input_message"        Android:layout_width= "0DP"        android:layout_height= "wrap_content"        android:layout_weight= "1"        Android : hint= "type something"        />        <button         android:id= "@+id/send" android:layout_width= "Wrap_        Content "        android:layout_height=" wrap_content "        android:text=" Send "        />    </linearlayout >

Here we specify the android:layout_weight= "1" property of EditText and change the width of the button back to wrap_content. This means that the width of the button still followswrap_content to calculate, while EditText fills all the remaining space on the screen.

The results of the operation are as follows:

2.RelativeLayout Relative layout

Modify the layout file with the following 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 "> <B Utton android:id= "@+id/button1" android:layout_width= "wrap_content" android:layout_height= "Wrap_cont ENT "android:text=" button 1 "android:layout_alignparentleft=" true "android:layout_alignparenttop=" Tru        E "/> <button android:id=" @+id/button2 "android:layout_width=" Wrap_content " android:layout_height= "wrap_content" android:text= "button 2" android:layout_alignparentright= "true" a Ndroid:layout_alignparenttop= "true"/> <button android:id= "@+id/button3" Android:la Yout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "button 3" android:layout          _centerinparent= "true"/>  <button android:id= "@+id/button4" android:layout_width= "wrap_content" android:layout_height= "WR Ap_content "android:text=" button 4 "android:layout_alignparentleft=" true "Android:layout_alignparentb        Ottom= "true"/> <button android:id= "@+id/button5" android:layout_width= "Wrap_content"        android:layout_height= "wrap_content" android:text= "button 5" android:layout_alignparentright= "true" Android:layout_alignparentbottom= "true"/> </RelativeLayout>

The results of the operation are as follows:

The relative layout above is laid out relative to the parent container, which is known as the name.

The following changes the layout file so that the control is laid out relative to the control:

<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 "> <button android:id= "@+id/button3" android:layout_width= "wrap_content" android:layout_height= "wrap         _content "android:text=" button 3 "android:layout_centerinparent=" true "/> <button        Android:id= "@+id/button1" android:layout_width= "wrap_content" android:layout_height= "Wrap_content"        android:text= "button 1" android:layout_above= "@id/button3" android:layout_toleftof= "@id/button3" /> <button android:id= "@+id/button2" android:layout_width= "Wrap_content" Android:la yout_height= "wrap_content" android:text= "button 2" android:layout_above= "@id/button3" Android:layout_         torightof= "@id/button3"/>              <button android:id= "@+id/button4" android:layout_width= "Wrap_content" android:layou t_height= "wrap_content" android:text= "button 4" android:layout_below= "@id/button3" Android:layout_tol eftof= "@id/button3"/> <button android:id= "@+id/button5" android:layout_width= "Wrap_con         Tent "android:layout_height=" wrap_content "android:text=" button 5 "android:layout_below=" @id/button3 " android:layout_torightof= "@id/button3"/> </RelativeLayout>

The results of the operation are as follows:

Note: When a control references the ID of another control, the control must be defined behind the reference control, or the ID cannot be found.

3.FrameLayout

Framelayout does not have any positioning methods, all controls are placed in the upper left corner of the layout.

Modify the code for the layout file as follows:

<framelayout 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 "    >        <button         android:id= "@+id/button1"        android:layout_width= "Wrap_content"        android: layout_height= "Wrap_content"        android:text= "button 1"        />       <imageview         android:id= "@+id/ Image_view "        android:layout_width=" wrap_content "        android:layout_height=" Wrap_content "        android: src= "@drawable/note1"        />        </FrameLayout>

The results of the operation are as follows:

4.TableLayout

Tablelayout allows us to arrange controls in a tabular manner, which is not very commonly used.

Modify the layout file code as follows:

<tablelayout 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 "> & Lt            TableRow > <textview android:layout_height= "wrap_content" android:text= "account:"            /> <edittext android:id= "@+id/account" android:layout_height= "Wrap_content" Android:hint= "Input your account"/> </TableRow> <tablerow > <textvi EW android:layout_height= "wrap_content" android:text= "Password:"/> <editte XT android:id= "@+id/password" android:layout_height= "wrap_content" android:inputtype= "Te Xtpassword "/> </TableRow> <tablerow > <button android:id=" @+id/ Login "android:layout_height=" wrap_content "android:layout_span=" 2 "android:text=" Login "/> </TableRow> < /tablelayout>

Each addition to a tablerow in the tablelayout means that a column is added to the table, and then each time a control is added to the TableRow, a column is added to the row, and thecontrol in the TableRow cannot specify a width.
Android:inputtype= the "Textpassword" property to change the input box to the password input box

The android:layout_span= "2" property indicates that the control occupies two columns.

The operation results are as follows

See the results of the operation can be found on the right there are a lot of white space, the interface is not beautiful, we can stretch the second column to fill the blank space on the right, so add android:stretchcolumns= "1" property to Tablelayout, the value of 1 means to extrude the second column, A value of 0 means that the 1th column is stretched.

After running the program as follows, the results are as follows:

This is explained by the use of the basic layout in 4, which explains the custom controls below.

Reprint Please specify: http://blog.csdn.net/j903829182/article/details/40663303

Android Learning VI (four basic layouts in Android)