Android Learning Series (5)-simple model of APP Layout

The progress of human science and technology comes from exploration. The exploration comes from the original discovery. Of course, the app layout is not so advanced. This article is just a summary.
This articleArticleIt is a must-have knowledge for Android Developers. It is especially well-organized and summarized for everyone. It is not perfect but useful.

Android interface development has a lot of similar or similar la S. In addition, looking at the android application interface, there is always no way to escape those familiar structures.
Today, based on my experience, I have analyzed common la S and summarized several simple models. These models are generally the best layout for solving their corresponding layout problems, it depends on the situation.
Due to the limitation of work, I cannot study the layout of the Arms. The layout of the arms can only be considered based on the layout I encountered during my work.
Another point I want to emphasize is that these layout principles are simple and flexible.

Model 1: horizontal three-column sitting
:

Note: There are three horizontal columns, with the buttons "return" and "Submit" on both sides. The buttons must be centered in the middle and generally contain the title name.
It seems that the background of the title contains two beautiful buttons.
Method: framelayout layout is used.
Material:
,
Layout code:

 <? XML version = "1.0" encoding = "UTF-8"?> <Framelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/layout01_bg" Android: paddingleft = "10dip" Android: paddingright = "10dip"> <button Android: layout_gravity = "Left | center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" android: background = "@ drawable/layout01_tool" Android: text = "back" Android: padding = "8dip"/> <textview Android: layout_gravity = "center" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "title content" Android: textsize = "18dip" Android: textcolor = "#000000"/> <button Android: layout_gravity = "right | center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: background = "@ drawable/layout01_tool" Android: text = "" Android: padding = "8dip"/> </framelayout>

Model 2: horizontal three-column dual-ears
:
 
Note: There are three horizontal columns, with the buttons "return" and "Submit" on both sides. There are several words in the middle. These words can be left, center, and right, it does not overlap with buttons on both sides.
This model is similar to the sitting model, but the middle part is not the left and right buttons, but the middle part, and only the middle part.
This model can achieve the effect of the sitting model, and can be left-to-right without overlapping buttons on both sides.
However, in this case, the relativelayout layout is better, so you need to define the ID, which is a little more troublesome.
Method: Mainly relativelayout Layout
Material: Same as above
Layout code:

<! -- This layout: the disadvantage is that Code It's still concise, but it's a little more complicated than the sitting-on style. It's a little more powerful and flexible than the sitting-on style. --> <? XML version = "1.0" encoding = "UTF-8"?> <Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/layout01_bg" Android: paddingleft = "10dip" Android: paddingright = "10dip"> <button Android: Id = "@ + ID/left_button" Android: layout_alignparentleft = "true" Android: layout_centervertical = "true" Android: layout_width = "wrap_content" and Roid: layout_height = "wrap_content" Android: Background = "@ drawable/layout01_tool" Android: text = "back to list" Android: padding = "8dip"/> <button Android: id = "@ + ID/right_button" Android: layout_alignparentright = "true" Android: layout_centervertical = "true" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: background = "@ drawable/layout01_tool" Android: text = "comment" Android: padding = "8dip "/> <! -- Set leftof and rightof to fill in the spare part in the middle --> <textview Android: layout_torightof = "@ ID/left_button" Android: layout_toleftof = "@ ID/right_button" Android: layout_centervertical = "true" Android: gravity = "Left" Android: paddingleft = "5dip" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: TEXT = "News> text" Android: textsize = "18dip" Android: textcolor = "#000000"/> </relativelayout>

I add that many people think that the linearlayout layout is used to set the controls on both sides to the left and the right, and the layout_gravity in the middle to the left and the right to the right.
However, the linearlayout layout direction is"Horizontal", Layout_gravity is invalid.

Model 3: horizontal four-column dual-ears complementary
:
 
 
Note: The buttons on both sides are separated by the two controls in the middle. The left side is filled with the content, but the sum of the content width must not be greater than the middle part.
This is similar to the dual-in-ear model. It also shows that the dual-in-ear model can be expanded to four columns, five columns, and other columns Based on the guaranteed free-space.
Method: Mainly relativelayout Layout
Material: Same as above
Layout code:

<! -- Extended in-ear mode with multiple columns --> <? XML version = "1.0" encoding = "UTF-8"?> <Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/layout01_bg" Android: paddingleft = "10dip" Android: paddingright = "10dip"> <button Android: Id = "@ + ID/left_button" Android: layout_alignparentleft = "true" Android: layout_centervertical = "true" Android: layout_width = "wrap_content" and Roid: layout_height = "wrap_content" Android: Background = "@ drawable/layout01_tool" Android: text = "back to list" Android: padding = "8dip"/> <button Android: id = "@ + ID/right_button" Android: layout_alignparentright = "true" Android: layout_centervertical = "true" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: background = "@ drawable/layout01_tool" Android: text = "comment" Android: padding = "8dip "/> <! -- The following width is wrap_content. On the right of the button on the left, it can be widened with the content --> <textview Android: Id = "@ + ID/center_text_01" Android: layout_torightof = "@ ID/left_button" Android: layout_centervertical = "true" Android: gravity = "Left" Android: paddingleft = "5dip" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: Background = "# aabbcc" Android: text = "couples + threes" Android: textsize = "18dip" Android: textcolor = "#000000"/> <! -- The following width is fill_parent, which automatically fills in the free space in the middle and defines the controls on which the left and right depend. Therefore, it is placed at the end --> <textview Android: id = "@ + ID/center_text_02" Android: layout_torightof = "@ ID/center_text_01" Android: layout_toleftof = "@ ID/right_button" Android: layout_centervertical = "true: gravity = "right" Android: paddingleft = "5dip" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "# ccaabb" Android: TEXT = "He Qiu" Android: textsize = "18dip" Android: textcolor = "#000000"/> </relativelayout>

Model 4: horizontal multi-column allocation (enhanced version)
:< br>
Note: Each module occupies all regions, separated by a small split line.
because the split line only occupies a small part, all modules and the split line are not apportioned, but the module title itself occupies a large part.
material:
method: layout_weight = "1" is set for the linearlayout layout and the module is evenly distributed. layout_weight is not set for the split line, the default package does not extend.
layout code:

<! -- This code is dynamically generated. If you have a slight judgment, the results will be the same --> <? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "25dip" Android: Background = "# ffffff"> <textview Android: TEXT = "Homepage" Android: layout_weight = "1" Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/> <imageview Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "10dip" Android: layout_height = "wrap_content" Android: src = "@ drawable/layout04_split"/> <textview Android: text = "" Android: layout_weight = "1" Android: gravity = "center" Android: dimensions = "center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/> <imageview Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "10dip" Android: layout_height = "wrap_content" Android: src = "@ drawable/layout04_split"/> <textview Android: text = "blog" Android: layout_weight = "1" Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/> <imageview Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "10dip" Android: layout_height = "wrap_content" Android: src = "@ drawable/layout04_split"/> <textview Android: text = "image" Android: layout_weight = "1" Android: gravity = "center" Android: dimensions = "center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/> <imageview Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "10dip" Android: layout_height = "wrap_content" Android: src = "@ drawable/layout04_split"/> <textview Android: text = "Forum" Android: layout_weight = "1" Android: gravity = "center" Android: layout_gravity = "center_vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/> </linearlayout

model 5: three vertical lines
:
Note: It is similar to the horizontal three-column dual-ears mode and is fixed up and down, intermediate adaptive (self-filling), not to mention.
method: Use relativelayout layout in the same level and three columns.
layout code:

<? XML version = "1.0" encoding = "UTF-8"?> <Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <textview Android: Id = "@ + ID/top_text" Android: layout_alignparenttop = "true" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: gravity = "center" Android: text = "Shanghai Auto Show" Android: textcolor = "# ffffff"/> <linearlayout Android: Id = "@ + ID/bo Ttom_linear "Android: layout_width =" fill_parent "Android: layout_height =" wrap_content "Android: gravity =" center "Android: layout_alignparentbottom =" true "Android: Background =" #123456 "Android: orientation = "horizontal"> <button Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "previous"/> <button Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" android Oid: layout_gravity = "center" Android: text = "Next"/> </linearlayout> <! -- The following part is the intermediate subject part. I specially wrapped it with linearlayout, indicating that the widget can be filled with any other combinations --> <linearlayout Android: id = "@ + ID/center_linear" Android: layout_below = "@ ID/top_text" Android: layout_above = "@ ID/bottom_linear" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# ffffff" Android: gravity = "center"> <imageview Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: src = "@ drawable/Shanhai"/> </linearlayout> </relativelayout>

model 6: three vertical spring
:< br>
note: this model is very simple, similar to spring, the bottom line can be stretched, and the middle part is fixed with the content.
method: similar to mode 5.
layout code:

<? XML version = "1.0" encoding = "UTF-8"?> <Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <! -- Top --> <textview Android: Id = "@ + ID/top_text" Android: layout_alignparenttop = "true" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: gravity = "center" Android: text = "Shanghai Auto Show" Android: textcolor = "# ffffff"/> <! -- The middle navigation section at the top --> <linearlayout Android: Id = "@ + ID/center_linear" Android: layout_below = "@ ID/top_text" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: gravity = "center" Android: Background = "#123456" Android: Orientation = "horizontal"> <button Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "previous"/> <button Android: layout_width = "wrap_co Ntent "Android: layout_height =" wrap_content "Android: layout_gravity =" center "Android: text =" Next "/> </linearlayout> <! -- Fill in the remaining area in the last part --> <linearlayout Android: Id = "@ + ID/bottom_linear" Android: layout_below = "@ ID/center_linear" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# ffffff" Android: gravity = "center" Android: layout_alignparentbottom = "true"> <imageview Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: src = "@ drawable/Shanhai"/> </linearlayout> </relativelayout>

In my preliminary research, I listed a simple 6 medium model. In addition, I found that due to the limitation of the mobile phone screen size and the fixed height and width, there are a lot of web la s which are actually difficult to implement on mobile phones.
I hope the person who has read the article can support it. What is the classic layout? Leave a message for me, discuss it together, and share it with me.
Finally, we will announce a three-character article with a rough layout:

Upper, middle, left, middle, right, multiple columns, use relative.

Linear layout, compact layout, no direction, can be in the middle.

Frame layout, accurate positioning, weak correlation, less code.