Chapter 3 UI cornerstone-UI layout (2), ui cornerstone

Chapter 3 UI cornerstone-UI layout (2), ui cornerstone
3.2 Layout 3.2.1a brief introduction to Layout s

Generally, an Android view contains many controls. To make the interface reasonable and beautiful, we need to arrange them on the interface according to our design ideas. Then, we need containers to store these controls and control their location arrangement, like div and table in HTML, Android layout also plays the same role.

There are many Android la S, which have their own characteristics. They are applied in different scenarios and can be nested for use. We need to select a proper layout based on our interface design. Sometimes different la s can achieve the same effect, but the less the "hierarchy", the higher the execution efficiency, we need to select the most appropriate layout to minimize the "hierarchy" of the interface ". Next, let's take a look at these la s one by one.

3.2.2 linear layout (LinearLayout)

LinearLayout, or linear layout, is one of the most common layout s in Android development. It lists all child elements based on the horizontal or vertical attribute values you set for it. Controls contained in LinearLayout are arranged in order into one row or one column. Similar to FlowLayout in Swing and StackPanel in Silverlight, all child elements are stacked behind other elements. Therefore, each row in a vertical list has only one element, no matter how wide they are. A horizontal list only has one row height (the height is the height of the highest child element plus the border height ). LinearLayout maintains the interval and alignment between child elements (right, middle, or left ).

Android: orientation = "vertical" // vertical layout Android: orientation = "horizontal" // horizontal layout

 

If it is vertical, it will be a single column structure of N rows, each row will have only one element, regardless of the element width; if it is horizontal, the structure is a single row with N columns. To construct a structure of two rows and two columns, the two elements are arranged vertically, and each element contains a LinearLayout column for horizontal arrangement.

The following is a simple example.

<? 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"> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "textview1"/> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "textview2"/> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "textview3"/> </LinearLayout>

 

The effect is 3-2.

Figure 3-2 LinearLayout vertical layout

 

Next we will change the android: orientation = "vertical" attribute to "horizontal" to see the effect, as shown in 3-3.

Figure 3-3 horizontal layout of LinearLayout

 

Obviously, after we change the layout mode from vertical layout to horizontal layout, the controls are arranged by row to by column.

In addition, LinearLayout supports specifying weight for individual child elements. The advantage is that it allows sub-elements to fill the remaining space on the screen. This also avoids a large screen where a bunch of small objects are crowded into a heap, but allows them to zoom in and fill the blank. When a child element specifies a weight value, the remaining space is allocated to the child elements according to the weight ratio specified by the child elements. The default weight value is 0. In the above "horizontal layout" example, we add the android: layout_weight = "1" attribute to the first text box, as shown in Figure 3-4.

Figure 3-4 functions of layout_weight in LinearLayout

 

As you can see, textview1 fills in the blank spaces outside the textview2 and textview3 text boxes.

 

Experience Sharing: In the LinearLayout linear layout, we sometimes need to set it to horizontal center/vertical center, but occasionally the correct setting does not work, you need to pay attention to this, whether it is vertical or horizontal linear. The vertical center is valid when the vertical linear layout is used, and the vertical center is valid when the horizontal linear layout is used. If there is no problem, check whether there is a problem with the height or width settings. If the layout is vertical and linear at this time, you want to set it to horizontal center. If the property of android: width is set to fill_parent, there is no effect. If it is set to wrap_content, it is valid. In addition, by setting android: gravity = "center_horizontal" can also achieve this effect, but note that the android: width attribute must be set to fill_parent. Vertical center is also true.

 

3.2.3 relative layout (RelativeLayout)

RelativeLayout is a relatively flexible layout. First, RelativeLayout is a container in which the element positions are calculated based on relative positions. RelativeLayout allows child elements to specify their positions relative to other elements or parent elements (by ID ). Therefore, you can arrange two elements in the form of right alignment, left alignment, up and down, or in the center of the screen. Elements are arranged in order. Therefore, if the first element is in the center of the screen, other elements relative to the element are arranged in the relative position in the center of the screen. This may not be easy to understand. We will also illustrate it with an example.

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout Xmlns: android = "http://schemas.android.com/apk/res/android" Android: orientation = "vertical" Android: layout_width = "match_parent" Android: layout_height = "match_parent"> <TextView Android: id = "@ + id/name_text" Android: layout_centerHorizontal = "true" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "username"/> <EditText Android: id = "@ + id/name_edit" Android: layout_width = "120dp" Android: layout_height = "wrap_content" Android: layout_alignTop = "@ id/name_text" Android: layout_toRightOf = "@ id/name_text"/> <TextView Android: id = "@ + id/pwd_text" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "password" Android: layout_below = "@ id/name_text" Android: layout_alignLeft = "@ id/name_text" Android: layout_marginTop = "50dp"/> <EditText Android: id = "@ + id/pwd_edit" Android: layout_width = "120dp" Android: layout_height = "wrap_content" Android: password = "true" Android: layout_alignTop = "@ id/pwd_text" Android: layout_alignLeft = "@ id/name_edit"/> </RelativeLayout>

In the above layout file, we set the first element name_text to "horizontally Center" relative to the parent element: android: layout_centerHorizontal = "true ";

Then let name_edit be on the Right of name_text: android: layout_toRightOf = "@ id/name_text ";

And align with the top of name_text: android: layout_alignTop = "@ id/name_text ";

Then, make pwd_text below name_text: android: layout_below = "@ id/name_text ";

For better results, let's move it down to 50dp: android: layout_marginTop = "50dp ";

And align it with name_text: android: layout_alignLeft = "@ id/name_text ";

Finally, pwd_edit. Let's align it with the top of pwd_text: android: layout_alignTop = "@ id/pwd_text ";

Align with name_edit: android: layout_alignLeft = "@ id/name_edit ".

Next let's take a look at the details, as shown in 3-5.

Figure 3-5 relative relativelayout Layout

 

Experience Sharing: For performance considerations, the computation of the exact location of the relative layout is only executed once. That is to say, if you use XML to specify this layout, the associated elements must be defined before you define it. In addition, if Element a and element B exist in RelativeLayout, to define Element a to the right of Element B, Element B needs to be defined first.

 

In addition, RelativeLayout has many properties different from other la S. It is precisely because of these attributes that make RelativeLayout flexible and we should master them skillfully.

Table 3-1 describes the attributes of controls relative to a given ID.

Attribute	Description
Android: layout_abve	Place the bottom of the control above the control with the given ID
Android: layout_below	Place the bottom of the control under the control with the given ID
Android: layout_toLeftOf	Align the right edge of the control with the left edge of the control with the given ID
Android: layout_toRightOf	Align the left edge of the control with the right edge of the control with the given ID
Android: layout_alignBaseline	Align the baseline of the control with the baseline of the given ID
Android: layout_alignTop	Align the top edge of the control with the top edge of the given ID
Android: layout_alignBottom	Align the bottom edge of the control with the bottom edge of the given ID
Android: layout_alignLeft	Align the left edge of the control with the left edge of the given ID
Android: layout_alignRight	Align the right edge of the control with the right edge of the given ID

Table 3-1 properties of controls with a given ID

 

Table 3-2 describes the attributes of the parent component.

Attribute	Description
android:layout_alignParentTop	If true, align the top of the control with the top of its parent Control
android:layout_alignParentBottom	If true, align the bottom of the control with the bottom of its parent control.
android:layout_alignParentLeft	If true, align the left of the control with the left of its parent control.
android:layout_alignParentRight	If true, align the right of the control with the right of its parent Control
android:layout_centerHorizontal	If true, place the control horizontally in the center.
android:layout_centerVertical	If true, place the control in vertical center
android:layout_centerInParent	If true, place the control in the center of the parent control.
Android: layout_marginTop	Offset Value on
Android: layout_marginBottom	Lower Offset Value
Android: layout_marginLeft	Value of the left offset
Android: layout_marginRight	Value of the right offset

Attributes of table 3-2 relative to parent component