[ALearning] Chapter 4 Layout of the Android Layout component (1), alearningandroid

Source: Internet
Author: User

[ALearning] Chapter 4 Layout of the Android Layout component (1), alearningandroid

In this chapter, we will learn about the Android layout components. In the previous chapter, we also initially used the LinearLayout layout. Next we will learn more about the layout file, in addition, we will have a deep understanding in the use of the case.

The Android interface is completed by collaboration between layout and components. layout is like a framework in a building, while components are equivalent to bricks and tiles in a building. Components are arranged in sequence according to the layout requirements to form the interface that the user sees. The five la s of Android are LinearLayout, FrameLayout, RelativeLayout, AbsoluteLayout, and TableLayout ).

1. LinearLayout)
The linear layout can be divided into two forms: the first horizontal linear layout and the second vertical linear layout. All in all, they are arranged in linear form one by one, the disadvantage of pure linear layout is that it is inconvenient to modify the display position of the control. Therefore, the layout is usually set in the form of linear layout and relative layout nesting.
2. Frame layout (FrameLayout)
The principle is that any widget drawn in the widget can be overwritten by the widget drawn later. The last widget will cover the previous widget.
3. Absolute layout (AbsoluteLayout)
With the absolute layout, you can set the x y coordinate points of any control on the screen. The control drawn after the same frame layout overwrites the previously drawn control.
4. RelativeLayout)
Relative layout is the most powerful in android layout. First, it can set the most attributes, and second, it can do the most. The screen resolutions of android mobile phones are varied. Therefore, in order to consider screen adaptation, we recommend that you use relative la s in the development process so that it is correct to use them for adaptive screens..
5. table layout (TableLayout)
In the table layout, you can set TableRow to set the content and position of each row in the table. You can set the display indent and alignment.

[Blog: http://blog.csdn.net/column/details/alearning.html]

LinearLayout (linear layout) LinearLayout arranges child elements in vertical or horizontal order. Each child element is placed behind the previous element. Not only can the LinearLayout layout be nested, but other layout methods can also be nested. The sub-element attribute android: layout_weight in LinearLayout describes the proportion of the sub-element in the remaining space. The default value is 0.
In this example, the extended property configuration is:
  • Android: layout_weight weight
If LinearLayout contains two unequal text boxes (TextView, etc.), their android: layout_weight values are 1 and 2, respectively, then the first text box occupies 2/3 of the remaining space, the second text box will occupy 1/3 of the remaining space. Android: layout_weight follows the principle that the smaller the value, the higher the importance. In this example, android: layout_weight is 1, so the two LinearLayout are evenly allocated.
[Layout file] activity_linearlayout.xml
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center" android: orientation = "vertical" tools: context = ". mainActivity "> <! -- Single LinearLayout --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: background = "#99 CCFF" android: orientation = "horizontal"> <TextView android: layout_width = "match_parent" android: layout_height = "80dp" android: gravity = "center" android: text = "#99 CCFF"/> </LinearLayout> <! -- A single LinearLayout contains two horizontal evenly distributed LinearLayout --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "# CCFF66" android: orientation = "vertical"> <TextView android: layout_width = "match_parent" android: layo Ut_height = "60dp" android: gravity = "center" android: text = "# CCFF66"/> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "# FF9900" android: orientation = "vertical"> <TextView android: layout_width = "match_parent" android: layout_height = "60dp" android: gravity = "center" android: text = "# FF9900"/> </LinearLayout> </LinearLayout> <! -- Overlay the preceding two cases --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "# CC99CC" android: orientation = "vertical"> <TextView android: layout_width = "match_parent" android: layout_height = "120dp" android: gravity = "center" android: text = "# CC99CC"/> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: orientation = "vertical"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: background = "# CC9933" android: orientation = "horizontal"> <TextView android: layout_width = "match_parent" android: layout_height = "60dp" android: gravity = "center" android: text = "# CC9933"/> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: background = "#99 CCCC" android: orientation = "horizontal"> <TextView android: layout_width = "match_parent" android: layout_height = "60dp" android: gravity = "center" android: text = "#99 CCCC"/> </LinearLayout>

Effect:

FrameLayout (frame layout) FrameLayout is the simplest layout in the five major la S. In this layout, the entire interface is considered as a blank standby area, all child elements cannot be placed at the specified position. They are all placed in the upper left corner of the area, and the child elements that follow them directly overwrite the child elements in the front, blocks all parts of the child element.
In this example, the extended property configuration is:
  • Android: gravity specifies the basic position of the control
Note: This property has also been introduced before. In this example, it is intended to indicate that if two parameters are specified for this property, the following format can be used to connect to the property using "|.
android:gravity="bottom|center"

[Layout file] activity_framelayoutt.xml
<? Xml version = "1.0" encoding = "UTF-8"?> <FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent"> <TextView android: layout_height = "match_parent" android: background = "#99 CCFF" android: layout_width = "match_parent" android: gravity = "bottom | center" android: text = "Level 1 \ n [# 99CCFF]"/> <TextView android: layout_height = "200dp" android: background = "# CC99CC" android: layout_width = "200dp" android: gravity = "bottom | center" android: text = "Layer 2 \ n [# CC99CC]"/> <TextView android: layout_height = "100dp" android: layout_width = "100dp" android: gravity = "bottom | center" android: background = "#99 CCCC" android: text = "Layer 3 \ n [# 99CCCC]"/> </FrameLayout>
Effect:
AbsoluteLayout (absolute layout) AbsoluteLayout is an absolute location layout. The android: layout_x and android: layout_y attributes of the child element in this layout take effect and are used to describe the coordinates of the child element. The upper-left corner of the screen is the coordinate origin (0, 0). The first 0 represents the horizontal coordinate, and the right is increased. The second 0 represents the vertical coordinate and moves downward. This value increases. Child elements in this layout can overlap with each other. In actual development, this layout format is usually not used, because its interface code is too rigid to adapt to a variety of terminal devices.
In this example, the extended property configuration is:
  • Android: layout_x specifies the x-axis position of the control.
  • Android: layout_y specifies the y-axis position of the control.
Layout file: activity_absolutelayout.xml.
<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="30dp"        android:layout_y="30dp"        android:background="#009966"        android:text="#009966" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="90dp"        android:layout_y="80dp"        android:background="#CC6699"        android:text="#CC6699" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="30dp"        android:layout_y="180dp"        android:background="#3366CC"        android:text="#3366CC" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="180dp"        android:layout_y="90dp"        android:background="#FFCC99"        android:text="#FFCC99" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="240dp"        android:layout_y="200dp"        android:background="#FF6666"        android:text="#FF6666" /></AbsoluteLayout>

Effect:

References

1. http://blog.chinaunix.net/uid-23544029-id-2985631.html

2. http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

3. http://blog.csdn.net/jzp12/article/details/7590591




How does Android get the custom components in the Layout file in Layout?

First, obtain the LayoutInflater of the current Activity:
LayoutInflater factory = LayoutInflater. from (this );
Use the LayoutInflater object to obtain Layout.
Final View DialogView = factory. inflate (R. layout. dialog, null );
Finally, use the layout to obtain the component.
M_EditText1 = (EditText) DialogView. findViewById (R. id. ip_address2 );

A new android project is created. The default layout in mainxml is ReletiveLayout.

Right-click RelativeLayout and select Change Layout. The following dialog box is displayed. modify it to what you need.




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.