Android Development Learning Path--ui Basic layout

The previous article mainly introduces the UI controls, so let's learn the layout. Android's basic layout under layout is mainly

It can be seen from Framelayout (single frame layout), LinearLayout (linear layout), tablelayout (table layout),relativelayout (relative layout), GridLayout (Grid layout), etc. The specific layout style can also be easily seen in the.

Here is the first introduction of Android View,viewgroup,layout.

1, View: Represents a piece of the user interface can be drawn area. Each view occupies a rectangular area on the screen. Within this area, the view object is responsible for drawing and event processing. View is the parent of small controls widgets and ViewGroup.

2, Viewgroup:viewgroup is a special view object, its function is to load and manage a set of view and ViewGroup. It is a set of containers that allow controls to be placed and provide management of controls.

3, layout: Even if the above-mentioned layout, it is ViewGroup subclass.

For example, a container can place and manage multiple containers and controls, where viewgroup can be thought of as a layout and view as a control.

Basically understand the layout and control of the relationship, then one by one to learn the next.

1. LinearLayout (Linear layout): Controls are arranged in a linear, horizontal or vertical direction. Let's take an example, create a new Layouttest project, and modify the code as follows:

Where android:orientation represents the horizontal or vertical arrangement, here is the vertical: vertical, then the level is: horizontal. Such as:

Then look at the Android:layout_gravity property, but only in the horizontal of the time can be in the vertical direction, the same vertical in the horizontal direction of the effective, modify the button of this property, respectively, the top, Center, and bottom, run as follows:

then learn the Android:layout_weight property, which is mainly to control the size of the control, such as a edittext to enter content, a button to send, then the General button contains the Send content, The rest is populated by EditText, and the code is modified as follows:

Here is the ratio 1:0, that is, the button in the word "send" is included except the place is edit_text, if the ratio is 1:1, then as shown, the width of the split:

2, Relativelayout (relative layout): Make the control appear anywhere in the layout by means of relative positioning. That is, everything we learned in the front is based on relative layout. I believe some of the attributes have also been understood, here again to explain. Here you write 5 buttons, respectively, on the top left, right, middle, bottom left, bottom right, the code is as follows:

<?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 "android:orientation=" Horizontal "> <button android:id=" @+id/button1 "android:text=" Button1 "android:layout_width=" Wrap_conte NT "android:layout_height=" Wrap_content "android:layout_alignparentleft=" true "/> <button an Droid:id= "@+id/button2" android:text= "Button2" android:layout_width= "Wrap_content" Android:layout_hei        ght= "Wrap_content" android:layout_alignparentright= "true"/> <button android:id= "@+id/button3" android:text= "Button3" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" an        Droid:layout_centerinparent= "true"/> <button android:id= "@+id/button4" android:text= "Button4" Android:layout_width= "Wrap_Content "android:layout_height=" Wrap_content "android:layout_alignparentleft=" true "Android:layout_al Ignparentbottom= "true"/> <button android:id= "@+id/button5" android:text= "Button5" Android:la        Yout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Android:layout_alignparentright= "true"/></relativelayout>

The effect is as follows:

By the above code, Android:layout_alignparentleft,android:layout_alignparentright,android:layout_alignparentbottom, Android:layout_centerinparent so many properties, in fact, is also very good understanding, is in the left side of the parent view, right, below, middle, of course, there are top, where the default is top.

Of course these are relative to the parent view, then the control can be relative to the control, here are relative to the center button, the code is as follows:

<?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 "android:orientation=" Horizontal "> <button android:id=" @+id/button1 "android:text=" Button1 "android:layout_width=" Wrap_conte NT "android:layout_height=" Wrap_content "android:layout_above=" @id/button3 "android:layout_toleftof=" @id/button3 "/> <button android:id=" @+id/button2 "android:text=" Button2 "android:layout_width = "Wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/button3" android:layou t_torightof= "@id/button3"/> <button android:id= "@+id/button3" android:text= "Button3" Android     : layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true"/> <button android:Id= "@+id/button4" android:text= "Button4" android:layout_width= "Wrap_content" android:layout_height= "W        Rap_content "android:layout_below=" @id/button3 "android:layout_toleftof=" @id/button3 "/> <Button Android:id= "@+id/button5" android:text= "Button5" android:layout_width= "Wrap_content" Android:layo ut_height= "Wrap_content" android:layout_below= "@id/button3" android:layout_torightof= "@id/button3"/></ Relativelayout>

The effect is as follows:

In fact, the relative layout is relatively easy to understand, is relative to a control or view position, there is left, right, top, next points, as long as the UI design is good, you can make full use of.

3, Framelayout (single frame layout): This is used relatively little, is the back of the control to cover the front space.

4, Tablelayout (table layout): To arrange the control in a tabular way, the table of course there are rows and columns, should try to make each row have the same column number, it is relatively simple, see a login interface example:

<?xml version= "1.0" encoding= "Utf-8"? ><tablelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:orientation=" Horizontal "> <TableRow> <textview android:layout_height=" Wrap_content "android:textsize= "20SP" android:text= "user name"/> <edittext android:id= "@+id/account" Android:layo ut_height= "wrap_content" android:hint= "Please enter user name"/> </TableRow> <TableRow> <textvie        W android:layout_height= "Wrap_content" android:textsize= "20sp" android:text= "password"/> <edittext android:id= "@+id/password" android:layout_height= "Wrap_content" Android:            hint= "Please enter password"/> </TableRow> <TableRow> <button android:id= "@+id/login" Android:text= "Landing" andRoid:layout_span= "2" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content"/> </TableRow></TableLayout>

The effect is as follows:

From the code can be, Tablelayout is composed of a lot of TableRow, each TableRow represents a row, this line can have a lot of child element control composition, from the know, here is divided into 3 rows, two columns. Where Android:layout_span indicates that the login button occupies two columns, so it can be aligned with 1 or 22 lines. It is obvious here that there is a lot of free space on the right, and it seems out of place, so here you can use the Android:stretchcolumns property, which means that if the table cannot fill the control, the specified column stretches to fill the table. Modify the code to add Android:stretchcolumns=1, which means to extrude the 2nd column with the following code:

<?xml version= "1.0" encoding= "Utf-8"? ><tablelayout xmlns:android= "http://schemas.android.com/apk/res/    Android "Android:layout_width=" Match_parent "android:layout_height=" Match_parent "android:stretchcolumns=" 1 ">             <TableRow> <textview android:layout_height= "wrap_content" android:textsize= "20SP" android:text= "user name"/> <edittext android:id= "@+id/account" Android:layout_hei            ght= "wrap_content" android:hint= "Please enter user name"/> </TableRow> <TableRow> <textview android:layout_height= "Wrap_content" android:textsize= "20sp" android:text= "password"/> &l T EditText android:id= "@+id/password" android:layout_height= "wrap_content" android:hint= "please Lose Enter password "/> </TableRow> <TableRow> <button android:id=" @+id/login "Android : text= "Landing" android:lAyout_span= "2" android:layout_width= "Wrap_content" android:layout_height= "wrap_content"/> &lt ;/tablerow></tablelayout>

the effect is as follows:

In this way, basically the landing interface is very beautiful.

About the layout basically this, hurriedly finished this article, and then organize things, ready to go home. Tomorrow is the year Eve, the New year hope to finish Android learning, and then write a few apps, more research design mode, architecture, Android source code, as well as Linux. Well, this year's blog is basically over.

2016, new start, Come on! ^_^

Android Development Learning Path--ui Basic layout