Android cainiao Study Notes 6 ---- android layout (1), cainiao notes

Android cainiao Study Notes 6 ---- android layout (1), cainiao notes

The UI components of Android applications are inherited from the View class, and the View class represents a blank rectangle area. Common components, such as TextView, Button, and EditText, are directly or indirectly inherited from the View.

In addition, a View has an important subclass ViewGroup, which can be used to contain multiple View components. It can also be included as a View component by other viewgroups, you can build a very complex UI.

Common Layout managers such as FrameLayout, LinearLayout, and RelativeLayout are directly inherited from ViewGroup.

In Android applications, an Activity is equivalent to a Form in traditional desktop development. A blank screen is created. to display the UI, you must call setContentView () to display the view instance or layout resources.

For example:

Input a layout Resource:

SetContentView (R. layout. main );

Input a View instance:

TextView myTv = new TextView (this );

SetContentView (myTv );

MyTv. setText ("hello, world ");

Because setContentView () can only accept one View instance, to display a complex UI interface, you need to use ViewGroup to contain multiple View instances, and then pass the ViewGroup instance to setContentView. ViewGroup is an abstract class. Generally, ViewGroup directly uses its subclass and is called the layout manager.

Android has two ways to write the UI, one is to layout the resource file in xml, and the other is to directly write the interface in code, the previous method of passing in a View instance is to write it directly in the code, which is a traditional Form programming method. Now we recommend that you write the UI in the xml layout resource file so that you can separate the application presentation layer from the logic layer and modify the presentation layer without modifying the code.

To compile a complex UI, you must master the layout manager commonly used in android. Mainly include:

AbsoluteLayout: absolute Layout

FrameLayout: frame Layout

LinearLayout: Linear Layout

RelativeLayout: relative Layout

TableLayout: table layout

GridLayou: grid layout (new layout manager added in Android 4.0)

1. LinearLayoutLinear Layout

Linear layout means that the View component in it will be linearly aligned and arranged. You can choose vertical or horizontal arrangement.

To create a layout resource file:

Right-click res/layout, select new from the pop-up menu, and select Android Xml File. To create a new LinearLayout layout File, select LinearLayout as its root node.

The linear_layout.xml code is as follows:

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" 8  9     android:orientation="vertical">10 11     <Button12 13         android:layout_width="match_parent"14 15         android:layout_height="wrap_content"16 17         android:text="aaaaaa"18 19         />20 21     <Button22 23         android:layout_width="match_parent"24 25         android:layout_height="wrap_content"26 27         android:text="bbbbbb"28 29         />30 31     <Button32 33         android:layout_width="match_parent"34 35         android:layout_height="wrap_content"36 37         android:text="cccccc"38 39         />40 41     <Button42 43         android:layout_width="match_parent"44 45         android:layout_height="wrap_content"46 47         android:text="dddddd"48 49         />50 51 </LinearLayout>

 

The code in the activity is as follows:

1 protected void onCreate(Bundle savedInstanceState) {2 3            // TODO Auto-generated method stub4 5            super.onCreate(savedInstanceState);6 7            setContentView(R.layout.linear_layout);8 9 }

 

Display Effect:

 

Common attributes:

1) OrientationAttribute: Sets the arrangement of Components in LinearLayout. Optional values:VerticalOrHorizontalIndicates vertically arranged into a column or horizontally arranged in a row.

In the code above, if orientation is set to horizontal. Displayed:

 

Because only one row is displayed, and the width of the first Button is full of the parent element, only the first Button is displayed.

2) Layout_widthAttribute: Set the width of the component in the parent element. Valid values:Wrap_content,Match_parentOrFill_parent. Wrap_content indicates that the width can wrap the content in the component. fill_parent and match_parent have the same meaning and indicate that the width is full of the parent element. Currently, match_parent is more often used, but fill_parent is rarely used.

As shown in the code above, if the layout_width of all buttons is set to wrap_content, the result is as follows:

 

3) Layout_heightAttribute: Set the width of the component in the parent element. The value is the same as layout_width.

4) GrativityAttribute: Sets the alignment of components in the container.

For example, add the property android: gravity = "center_vertical" to the LinearLayout node"

The result is as follows:

 

The value of this attribute can be: top, bottom, left, right, center, center_vertical, center_horizontal, or the values of these values are equal to or (bitwise OR |)

For example: android: gravity = "bottom | right" Display Effect

 

5) Layout_gravityAttribute: The position of the current control in the parent element.

For example, if you set layout_gravity in the aaaaaa Button to "center", the effect will be superimposed with the effect of the gravity attribute in its container, namely, LinearLayout. The result is shown as follows:

 

Center vertically, horizontally on the left of bbbbbbbb

6) Layout_weightAttribute: In the child control, set the allocation weight of extra space in the parent element.

 

In this case, if you only set the layout_weight attribute in the aaaaaa button, you can set it to any value and the default value is 1. The aaaaaa button will stretch to occupy the remaining space, as shown below:

 

If the layout_weight attribute is set in both aaaaaa and dddddd buttons, and the first is set to 1 and the second to 2, the remaining space is allocated to aaaaaa 1/3, it is allocated to dddddd 2/3, that is, their respective weights/total weights, that is, the proportion of the remaining space allocated to each of them, as shown below:

 

7) WeightSumAttribute: Sets the total weight of the remaining space in the container. This attribute is the attribute in LinearLayout, and layout_weight is the attribute in each sub-control. If this parameter is not set, by default, the sum of layout_weight attribute values of each sub-control is used.

If the value of layout_weight in aaaaaa is 1, the value of layout_weight in dddddd is 2, and the value of weightSum in LinearLayout is set to 6, there will still be half of the remaining space, aaaaaa receives only 1/6 of the original remaining space, and dddddd receives 2/6, as shown below:

 

8) VisibilityAttribute: Determines whether to display the data. The values can be invisible, visible, or gone. Visible indicates that invisible and gone are not displayed. invisible indicates that the control does not exist, but the control still exists and occupies space. While gone indicates that the control does not exist and thus does not occupy space.

For example, when the visibility attribute of cccccc is set to gone, It is shown as follows:

 

If it is changed to invisible:

 

LinearLayout:

 

2. RelativeLayout: Relative Layout

As the name suggests, the layout is based on the relative position of each control. The relative position can be the position of the child control A to the parent control, or the position of the child control A to the Child control B.

Right-click res/layout, select new from the pop-up menu, and select Android Xml File. To create a new RelativeLayout layout File, select RelativeLayout as its root node. The file name is relative_layout.xml.

The Code is as follows:

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" > 8  9     <Button10 11         android:id="@+id/aa"12 13         android:layout_width="wrap_content"14 15         android:layout_height="wrap_content"16 17         android:layout_centerInParent="true"18 19         android:text="aaaaaa"20 21        22 23         />24 25     <Button26 27         android:id="@+id/bb"28 29         android:layout_width="wrap_content"30 31         android:layout_height="wrap_content"32 33         android:layout_toRightOf="@id/aa"34 35         android:layout_alignTop="@id/aa"36 37         android:text="bbbbbb"38 39         />40 41     <Button42 43         android:id="@+id/cc"44 45         android:layout_width="wrap_content"46 47         android:layout_height="wrap_content"48 49         android:layout_toLeftOf="@id/aa"50 51         android:layout_alignBottom="@id/aa"52 53         android:text="cccccc"54 55         />56 57     <Button58 59         android:id="@+id/dd"60 61         android:layout_width="wrap_content"62 63         android:layout_height="wrap_content"64 65         android:layout_above="@id/aa"66 67         android:layout_alignLeft="@id/aa"68 69         android:text="dddddd"70 71         />72 73     <Button74 75         android:id="@+id/ee"76 77         android:layout_width="wrap_content"78 79         android:layout_height="wrap_content"80 81         android:layout_below="@id/aa"82 83         android:layout_alignLeft="@id/aa"84 85         android:text="eeeeee"86 87         />88 89 </RelativeLayout>

 

Modify setContentView (R. layout. relative_layout) in FirstActivity );

Display Effect:

 

Aaaaaa is centered in the parent container

Bbbbbb is displayed on the Right of aaaaaa and aligned with the top of aaaaaa

Ccccccc is displayed on the left of aaaaaa and aligned with the aaaaaa top

Dddddd is displayed on aaaaaa and left aligned with aaaaaa.

The eeeeee is displayed under aaaaaa and left aligned with aaaaaa.

Main attribute: both set the Parent and Child positions, or the relative positions of the Child control and child control.

Android: layout_toRightOf on the right of the specified control

Android: layout_toLeftOf on the left of the specified control

Android: layout_above: above the specified control

Android: layout_below under the specified control

Android: layout_alignBaseline is horizontally aligned with the specified control

Android: layout_alignLeft: Left-aligned with the specified control

Android: layout_alignRight: Right-aligned with the specified control

Android: layout_alignTop: align with the top of the specified control

Android: layout_alignBottom align with the bottom of the specified control

Android: layout_alignParentLeft: whether it is left aligned with the parent Layout

Android: layout_alignParentTop whether it is aligned with the top of the parent Layout

Android: layout_alignParentRight: whether it is right aligned with the parent Layout

Android: layout_alignParentBottom: align with the bottom of the parent Layout

Android: layout_centerVertical vertically centered in the parent Layout

Android: layout_centerHorizontal horizontally centered in the parent Layout

Android: layout_centerInParent center in the parent Layout