Layout is a container that can be used to place many controls, and it can adjust the position of internal controls according to certain rules. In addition to placing controls, layouts can also be placed inside the layout. Through the nesting of multi-layer layouts, some more complex interface implementations can be completed.
LinearLayout
LinearLayout, also known as linear layout, arranges the controls it contains in a linear direction.
Since it is a linear arrangement, there must be more than one direction. For example, you can set the android:orientation attribute to specify whether the arrangement direction is vertical or horizontal.
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>In the above code, 3 Buttons are added to the LinearLayout. The length and width of each Button are wrap_content, and the arrangement direction is specified as vertical. The program running result is:
The result after modifying the arrangement direction of LinearLayout is:
It should be noted that if the android:orientation attribute is not specified, the default orientation is horizontal. At the same time, if it is arranged horizontally, the width of the internal control cannot be specified as match_parent, otherwise, a single control will occupy the entire horizontal direction, and there will be no space for other controls to be placed. In the same way, if it is arranged vertically, the height of the internal control cannot be specified as match_parent, otherwise, a single control will occupy the entire vertical direction, and there will be no space for other controls to be placed.
The android:layout_gravity attribute can specify the alignment of the control in the layout, and its optional value is similar to the android:gravity attribute. It should be noted that when the LinearLayout is arranged horizontally, only the alignment in the vertical direction will take effect, because the length in the horizontal direction is not fixed at this time, and the length in the horizontal direction will change every time a control is added, so Cannot specify alignment in this direction. In the same way, when the LinearLayout is arranged vertically, only the alignment in the horizontal direction will take effect, because the length in the vertical direction is not fixed at this time. Every time a control is added, the length in the vertical direction will change, so it cannot Specifies the alignment in this direction.
Modify the alignment of the buttons above:
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3" />
</LinearLayout>The result of the operation is:
Because the controls in the layout are arranged horizontally, the overall alignment is top/center/bottom alignment accordingly.
And android:layout_weight allows the size of the control to be specified in proportion, which can play an important role in the adaptability of the mobile phone screen. For example, the message sending interface usually has a text edit box and a send button:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type something"
tools:ignore="Suspicious0dp" />
<Button
android:id="@+id/send"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Send"
tools:ignore="Suspicious0dp" />
</LinearLayout>In the above code, the widths of EditText and Button are both specified as 0dp, and android:layout_weight is used to specify the weight of the width in the horizontal direction.
Here, the width weight distribution method is as follows: the system first adds the weight values specified by all controls under the LinearLayout to obtain a total value, and then the proportion of the size of each control is its own weight value divided by the total value.
The result of running the program is:
In actual development, the edit box in this article is usually longer, and the send button is usually shorter. Generally, the send button can accommodate its own length, so the code may be modified as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type something"
tools:ignore="Suspicious0dp" />
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Send"
tools:ignore="Suspicious0dp" />
</LinearLayout>In the above code, the width of the button remains wrap_content, that is, to accommodate its own size, while the text edit box occupies the remaining controls, so it also monopolizes the weight.
The result of running the program is:
RelativeLayout
RelativeLayout, also known as relative layout, is also a more commonly used layout. The layout can allow controls to appear anywhere in the layout through relative positioning.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button 4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button 5" />
</RelativeLayout>There is nothing difficult to understand in the above code, and 5 buttons are placed in 5 places. The result of running the program is:
Each control in the above example is positioned relative to the parent layout, and of course it can also be positioned relative to the control:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_centerInParent="true"
android:text="Button 3" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 2" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 5" />
</RelativeLayout>The above code is also easy to understand. The result of running the program is:
There is another set of properties in RelativeLayout that are positioned relative to controls:
- android:layout_alignLeft: Indicates that the left edge of a control is aligned with the left edge of another control
- android:layout_alignRight: Indicates that the right edge of a control is aligned with the right edge of another control
- android:layout_alignTop: Indicates that the top edge of a control is aligned with the top edge of another control
- android:layout_alignBottom: Indicates that the bottom edge of a control is aligned with the bottom edge of another control
FrameLayout
FrameLayout is also known as frame layout. This layout does not have rich positioning methods. All controls will be placed in the upper left corner of the layout by default. Relatively speaking, there are few application scenarios.
<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is TextView"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>The result of the operation is:
As can be seen, both the text and the button are in the upper left corner of the layout. And since the button is added after the text, the button covers the text.
In addition to this default effect, you can also use the layout_gravity attribute to specify the alignment of controls in the layout, which is similar to the usage in LinearLayout.
<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="This is TextView"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Button" />
</FrameLayout>The result of running the program is:
Generally speaking, due to the lack of positioning methods, the application scenarios of this layout are relatively few.