Android: four basic layouts

A rich interface is always made up of a number of controls, so how do we get the controls to be methodically placed on the interface instead of being cluttered? This needs to be achieved with the help of layouts. A layout is a container that can be used to place many controls, and it can adjust the position of the internal controls according to certain rules, thus writing a beautiful interface. Of course, the interior of the layout, in addition to placing controls, can also be placed in the layout, through the nesting of multiple layers of layout, we can complete some of the more complex interface implementation, 3.15 very good to show the relationship between them.

Figure 3.15

Let's take a detailed tour of the four most basic layouts in Android. Prepare for a new

Uilayouttest project and let ADT automatically help us create a good activity, with the activity name and layout names using default values.

3.3.1 LinearLayout

LinearLayout, also known as linear layout, is a very common layout. As its name describes, this layout arranges the controls it contains in a linear direction. I believe you have noticed earlier that when we learned about control usage in the previous section, all the controls were placed in the LinearLayout layout, so the controls in the previous section were actually linearly aligned in the vertical direction.

Since it's a linear arrangement, it's definitely not just one direction, so why are the controls in the previous section arranged vertically? This is because we specify by the Android:orientation property that the arrangement direction is vertical, and if horizontal is specified, the control is arranged horizontally. Let's take a look at the actual combat and modify the code in Activity_main.xml as follows:

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent " android:orientation= "vertical" >

<buttonandroid:id= "@+id/button1" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Button1"/>

<buttonandroid:id= "@+id/button2" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Button2"/>

<buttonandroid:id= "@+id/button3" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Button3"/>

</LinearLayout>

We added three buttons to the LinearLayout, each button has a length and width of wrap_content, and it specifies that the arrangement direction is vertical. Now run the program, as shown in effect 3.16.

Figure 3.16

Then we change the direction of the LinearLayout, as follows:

<linearlayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent "

android:orientation= "Horizontal" >

......

</LinearLayout>

Change the value of the Android:orientation property to horizontal, which means that the controls in the linearlayout are arranged horizontally, of course, if you do not specify a value for the Android:orientation property, The default arrangement direction is horizontal. Run the program again, as shown in effect 3.17.

Figure 3.17

It is important to note that if the linearlayout is arranged in a horizontal direction, 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 have no position to place. Similarly, if the linearlayout is arranged in a vertical direction, the internal control cannot specify the height as match_parent.

Knowing the arrangement of the LinearLayout, let's learn some of its key properties in use. Let's start with the Android:layout_gravity property, which looks a bit like the android:gravity attribute we learned in the last section, what's the difference between these two properties? In fact, from the name can be seen, android:gravity is used

To specify how the text is aligned in the control, and android:layout_gravity is used to specify how the control is aligned in the layout. The optional value of android:layout_gravity is similar to android:gravity, but it is important to note that only vertical alignment will take effect when the LinearLayout is aligned in horizontal direction. , because the length in the horizontal direction is not fixed at this point, and each time a control is added, the length in the horizontal direction changes, so the alignment in that direction cannot be specified. In the same way, when the linearlayout is vertical, only the horizontal alignment will take effect. Modify the code in the Activity_main.xml as follows:

<linearlayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent "

android:orientation= "Horizontal" >

<buttonandroid:id= "@+id/button1" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_gravity= "Top" android:text= "button 1"/>

<buttonandroid:id= "@+id/button2" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_gravity= "center_vertical" android:text= "Button2"/>

<buttonandroid:id= "@+id/button3" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_gravity= "Bottom" android:text= "button 3"/>

</LinearLayout>

Since the current arrangement of linearlayout is horizontal, we can only specify the orientation in the vertical direction, specify the alignment of the first button as top, the alignment of the second button is specified as Center_vertical, and a third The alignment of the Button is specified as bottom. Rerun the program, as shown in effect 3.18.

Figure 3.18

Next we learn about another important attribute in LinearLayout, 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. For example, we are writing a message sending interface that requires a text edit box and a Send button to modify the code in the Activity_main.xml as follows:

<linearlayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent "

android:orientation= "Horizontal" >

<edittextandroid:id= "@+id/input_message" android:layout_width= "0DP" android:layout_height= "Wrap_content" android:layout_weight= "1" android:hint= "Type something"/>

<buttonandroid:id= "@+id/send" android:layout_width= "0DP" android:layout_height= "Wrap_content " android:layout_weight= "1" android:text= "Send" />

</LinearLayout>

You will find that the width of the EditText and button is specified as 0 so that the text edit box and button can be displayed? Don't worry, since we used the Android:layout_weight property, the width of the control should not be determined by the Android:layout_width, where the designation of 0 is a comparison specification.

Then we specify the value of the Android:layout_weight property as 1 in both the EditText and the button, which means that EditText and the button will split the width horizontally and run the next program again, and you'll see the effect shown in 3.19.

Figure 3.19

Why would you split the screen width by specifying the value of the Android:layout_weight property at the same time as 1? In fact, the principle is also very simple, the system will be linearlayout under all the controls specified by the Layout_weight value added, to get a total, and then the proportion of each control is the size of the control by dividing the value of the layout_weight values just calculated. So if you want the EditText to occupy the screen width of the 3/5, Button occupies 2/5 of the screen width, only need to change the layout_weight of EditText to 3,button change to 2.

We can also achieve better results by specifying the Layout_weight value of some controls. Modify

The code in Activity_main.xml is as follows:

<linearlayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "Horizontal" >

<edittextandroid:id= "@+id/input_message" android:layout_width= "0DP" android:layout_height= "Wrap_content" android:layout_weight= "1" android:hint= "Type something"/>

<buttonandroid:id= "@+id/send" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Send"/>

</LinearLayout>

Here we specify only the Android:layout_weight property of the EditText and change the width of the Button back to Wrap_content. This means that the width of the Button is still calculated according to Wrap_content, while EditText fills all the remaining space on the screen. The interface written in this way will be very good not only in terms of the adaptation of the various screens, but also look more comfortable, rerun the program as shown in effect 3.20.

Figure 3.20

3.3.2 Relativelayout

Relativelayout, also known as relative layout, is a very common layout. Unlike LinearLayout's arrangement rules, Relativelayout appears more casual, allowing controls to appear anywhere in the layout in a relatively positioned way. Because of this, there are many attributes in the Relativelayout, but these properties are regularly followed and are not difficult to understand and memorize. Let's take a look at practice and modify the code in Activity_main.xml as follows:

<relativelayout xmlns:android= " HT tp://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"/>

<buttonandroid:id= "@+id/button2" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentright= "true" android:layout_alignparenttop= "true" android:text= "Button2"/>

<buttonandroid:id= "@+id/button3" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_centerinparent= "true" android:text= "Button3"/>

<buttonandroid: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"/>

<buttonandroid:id= "@+id/button5" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentbottom= "true" android:layout_alignparentright= "true" android:text= "Button5"/>

</RelativeLayout>

I think the above code does not need me to do too much explanation, because it is too good to understand, we have button 1 and the parent layout of the upper-left corner, Button 2 and the parent layout of the upper-right corner of the alignment, Button 3 is centered, button 4 and the lower left corner of the parent layout is aligned, button 5 Aligns with the lower-right corner of the parent layout. Although Android:layout_alignparentleft, Android:layout_alignparenttop, Android:layout_alignparentright, Android:layout_ Alignparentbottom, android:layout_centerinparent These properties we have not touched before, but their names have fully explained their role. Rerun the program, as shown in effect 3.21.

Figure 3.21

Each of the controls in the example above is positioned relative to the parent layout, which can be used relative to the control

What about positioning? Of course it is possible to modify the code in Activity_main.xml as follows:

<relativelayout xmlns:android= " HT tp://schemas.android.com/apk/res/android "android:layout_width=" match_parent "android:layout_height=" match_parent ">

<buttonandroid:id= "@+id/button3" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_centerinparent= "true" android:text= "Button3"/>

<buttonandroid: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"/>

<buttonandroid: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= "Button2"/>

<buttonandroid: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= "Button4"/>

<buttonandroid: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= "Button5"/>

</RelativeLayout>

This time the code is a little bit more complicated, but there are still rules to follow. The Android:layout_above property allows a control to be located above another control, and you need to specify a reference to the relative control ID for this property, where we fill in @id/button3, which means that the control is positioned above Button 3. Other properties are similar, android:layout_below means that one control is placed under another control, android:layout_toleftof means that one control is on the left side of another control, android:layout_t Orightof means that you have one control on the right side of another control. Note that when a control references the ID of another control, the control must be defined behind the reference control, or the ID cannot be found. Rerun the program, as shown in effect 3.22.

Figure 3.22

There is another set of properties in Relativelayout that are positioned relative to the control, android:layout_alignleft means that the left edge of one control is aligned with the left edge of another control, android:layout_alignright means to align the right edge of one control with the right edge of another control, as well as Android:layout_aligntop and Android:layout_alignbottom, all the same, and I will not say more, these attributes are left to you to try. Well, as I said earlier, although there are many properties in Relativelayout, there are rules to follow, so it is not difficult to learn a bit?

3.3.3 Framelayout

Framelayout is much simpler than the previous two layouts, so it has a lot less application scenarios. This layout does not have any positioning, and all controls are placed in the upper-left corner of the layout. Let's take a look at the example and modify the code in Activity_main.xml as follows:

<framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent "

>

<buttonandroid:id= "@+id/button" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "button"

/>

<imageviewandroid:id= "@+id/image_view" android:layout_width= "wrap_content" android:layout_height= "Wrap_ Content "android:src=" @drawable/ic_launcher "

/>

</FrameLayout>

Framelayout just put a button and a picture, rerun the program, the effect is shown in 3.23.

Figure 3.23

As you can see, the buttons and pictures are located in the upper-left corner of the layout. Since the picture is added after the button, the picture is pressed on top of the button.

You might think, what does this layout do? Sure, it's not a lot of scenarios, but we can still use it when it comes to fragmentation in the next chapter.

3.3.4 Tablelayout

Tablelayout allows us to arrange the controls in a tabular way, which is not very common, and you just need to understand the basic usage of it. Since it is a table, there must be rows and columns, and we should try to make each row have the same number of columns when designing the table, which is also the simplest. But sometimes things don't always follow our heart. When a row of a table must have an unequal number of columns, it needs to be addressed by merging cells.

For example, we are designing a login interface that allows the user to enter the account password and log in to

The code in Activity_main.xml is changed as follows:

<tablelayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" >

<TableRow>

<textview android:layout_height= "wrap_content" android:text= "account:"/>

<edittextandroid:id= "@+id/account" android:layout_height= "wrap_content" android:hint= "Input youraccount"/>

</TableRow>

<TableRow>

<textviewandroid:layout_height= "Wrap_content" android:text= "Password:"/>

<edittextandroid:id= "@+id/password" android:layout_height= "wrap_content" android:inputtype= "TextPassword"/ >

</TableRow>

<TableRow>

<buttonandroid:id= "@+id/login" android:layout_height= "Wrap_content" android:layout_span= "2" android:text= " Login "/>

</TableRow>

</TableLayout>

Each addition to a TableRow in tablelayout means that a row is added to the table, and then each control is added to the TableRow, which means that a column is added to the row, and the control in the TableRow cannot specify the width. Here we design the table into three rows and two columns of the format, the first row has a TextView and a EditText for entering the account, the second row also has a TextView and a EditText for entering the password, we pass a The value of the Ndroid:inputtype property is specified as Textpassword, and the EditText is changed to the password input box. But the third line has only one button for login, two columns in the first two rows, and the third row has only one column, so the table will be hard to see, and

Structure is also very unreasonable. In this case, we need to solve this problem by merging the cells, using android:layout_span= "2" To make the login button occupy two columns of space, it can guarantee the rationality of the table structure. Rerun the program, as shown in effect 3.24.

Figure 3.24

It is no wonder, however, that the current login interface does not take full advantage of the width of the screen and that an area is vacated on the right, since we cannot specify the width of the control in TableRow. This is a good way to solve this problem by using the Android:stretchcolumns property, which allows a column in the tablelayout to be stretched to automatically fit the screen width. Modify the code in the Activity_main.xml as follows:

<tablelayoutxmlns:android= "Http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "Match_parent "

android:stretchcolumns= "1"

>

......

</TableLayout>

The value of Android:stretchcolumns is specified here as 1, which means that if the table does not fully fill the screen width, the second column is stretched. That's right! Specifying 1 is to extrude the second column, specifying 0 is to stretch the first column, and do not assume that

I wrote it wrong here. Rerun the program, as shown in effect 3.25.

Figure 3.25

Android: four basic layouts