. Net Code agricultural Android-5 minutes to understand the Layout

In android, the application interface is organized in xml, which is similar to that in WPF. By configuring xml files, we can flexibly build the interface you want.

In all xml interface files, the root node must be a layout, that is, there must be a layout first, and then controls or nested layout are organized in the layout. There are five la s in android, familiarity with the use of various la s will be of great benefit to a better organizational interface in future development. The following is a brief introduction.

• TableLayout

Table layout is similar to the layout of controls in tables on the webpage. Controls are arranged in the form of N rows and N columns.

1 <TableLayout 2 android: layout_width = "wrap_content" 3 android: layout_height = "wrap_content" 4 android: layout_alignLeft = "@ + id/textView1" 5 android: layout_centerHorizontal = "true" 6 android: layout_centerVertical = "true"> 7 8 <TableRow 9 android: id = "@ + id/tableRow1" 10 android: layout_width = "wrap_content" 11 android: layout_height = "wrap_content"> 12 13 <Button14 android: layout_width = "wrap_content" 15 android: layout_height = "wrap_content" 16 android: text = "1 row, 1 column"/> 17 18 <Button19 android: layout_width = "wrap_content" 20 android: layout_height = "wrap_content" 21 android: text = "1 row, 2 columns"/> 22 </TableRow> 23 24 <TableRow25 android: id = "@ + id/tableRow2" 26 android: layout_width = "wrap_content" 27 android: layout_height = "wrap_content"> 28 29 <Button30 android: layout_width = "wrap_content" 31 android: layout_height = "wrap_content" 32 android: text = "2 rows and 1 column"/> 33 34 <Button35 android: layout_width = "wrap_content" 36 android: layout_height = "wrap_content" 37 android: text = "2 rows and 2 columns"/> 38 </TableRow> 39 40 <TableRow41 android: id = "@ + id/tableRow3" 42 android: layout_width = "wrap_content" 43 android: layout_height = "wrap_content"> 44 45 <Button46 android: layout_width = "wrap_content" 47 android: layout_height = "wrap_content" 48 android: text = "3 rows and 1 column"/> 49 50 <Button51 android: layout_width = "wrap_content" 52 android: layout_height = "wrap_content" 53 android: text = "3 rows and 2 columns"/> 54 </TableRow> 55 </TableLayout>

• LineLayout

Linear layout, relatively simple, is to place controls in a horizontal or vertical manner in the form of one row or one column.

1 <LinearLayout 2 android: layout_width = "fill_parent" 3 android: layout_height = "fill_parent" 4 android: orientation = "vertical"> // horizontal or vertical 5 6 <Button 7 android: layout_width = "fill_parent" 8 android: layout_height = "wrap_content" 9 android: text = "1 line"/> 10 11 <Button12 android: layout_width = "fill_parent" 13 android: layout_height = "wrap_content" 14 android: text = "2 rows"/> 15 16 <Button17 android: layout_width = "fill_parent" 18 android: layout_height = "wrap_content" 19 android: text = "3 rows"/> 20 </LinearLayout>

• RelativeLayout

Relative layout, the most flexible score layout is used to organize some complex interfaces. The location-related attributes in the child element in this layout will take effect. For example, android: layout_below, android: layout_abve, and android: layout_centerVertical. Note: When specifying the location relationship, the referenced ID must be defined before the reference; otherwise, an exception occurs.

1 <RelativeLayout 2 android: layout_width = "fill_parent" 3 android: layout_height = "fill_parent" 4 android: orientation = "vertical"> 5 6 <Button 7 android: id = "@ + id/text_01" 8 android: layout_width = "50dp" 9 android: layout_height = "50dp" 10 android: layout_alignParentBottom = "true" 11 android: gravity = "center" 12 android: text = "1"/> 13 14 <Button15 android: id = "@ + id/text_02" 16 android: layout_width = "50dp" 17 android: layout_height = "50dp" 18 android: layout_above = "@ id/text_01" // special attribute in the relative layout, 19 android: layout_centerHorizontal = "true" 20 android: gravity = "center" 21 android: text = "2"/> 22 23 <Button24 android: id = "@ + id/text_03" 25 android: layout_width = "50dp" 26 android: layout_height = "50dp" 27 android: layout_above = "@ id/text_01" 28 android: layout_toLeftOf = "@ id/text_02" // special attribute in the relative layout, on the left side of xx, 29 android: gravity = "center" 30 android: text = "3"/> 31 </RelativeLayout>

• AbsoluteLayout

Absolute layout: the android: layout_x and android: layout_y attributes of the child element in this layout will take effect, which is used to describe the Coordinate Position of the child element. Once set, the position cannot be changed, applicable to infrequently changed controls or interfaces.

 1 <AbsoluteLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" > 5  6         <Button 7             android:layout_width="50dp" 8             android:layout_height="50dp" 9             android:layout_x="50dp"10             android:layout_y="50dp"11             android:background="#999999"12             android:gravity="center"13             android:text="1" />14 15         <Button16             android:layout_width="50dp"17             android:layout_height="50dp"18             android:layout_x="90dp"19             android:layout_y="90dp"20             android:background="#ff654321"21             android:gravity="center"22             android:text="2" />23 24         <Button25             android:layout_width="50dp"26             android:layout_height="50dp"27             android:layout_x="125dp"28             android:layout_y="125dp"29             android:background="#fffedcba"30             android:gravity="center"31             android:text="3" />32     </AbsoluteLayout>

• FrameLayout

The frame layout is somewhat awkward on the Internet. I understand it myself, just like the z-index in css, which can implement the mask, that is, the layer effect. Note: by default, all frames are drawn from the upper left corner of the screen, and then stacked in sequence according to the declared order of the control, and the level gradually increases.

 1 <FrameLayout 2         android:layout_width="fill_parent" 3         android:layout_height="fill_parent" 4         android:orientation="vertical" > 5  6         <TextView 7             android:layout_width="fill_parent" 8             android:layout_height="fill_parent" 9             android:background="#999999"10             android:gravity="center"11             android:text="1" />12 13         <TextView14             android:layout_width="200dp"15             android:layout_height="100dp"16             android:background="#ff654321"17             android:gravity="center"18             android:text="2" />19 20         <TextView21             android:layout_width="50dp"22             android:layout_height="50dp"23             android:background="#fffedcba"24             android:gravity="center"25             android:text="3" />26     </FrameLayout>

The five la S have been introduced, which is a little simple (because I think there is nothing to say about this layout, I think it is very easy to explain the problem with the help of the layout ). Before writing this series, I also said, "I don't want to do repetitive work." similar to this basic thing, many people on the internet write more details than I do, I just want to write some experience and skills I think it is necessary to share with you during my learning process, so you can see that I didn't write anything like HelloWorld, because it is better to spend more time on the content that has been flooded, or to contribute something unique or ignored by everyone.

It takes a lot of time to write a technical blog. You have to straighten out your ideas, organize your language, write a Demo, and typeset. Sometimes you envy those who can write an article on a Monday or even a few days. I recently learned a lot of content and points. Looking at the messy notes, I didn't know where to write them at the same time. I updated it slowly, but I still insisted on it, come on!