Android Rookie learning note 6----android Layout (one)

Last Update:2015-06-27 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The UI components of an Android app are inherited from the view class, and the view class represents a blank rectangular area. Common components such as textview, Button, edittext, etc. are inherited directly or indirectly from VIEW.In addition, view has an important subclass of viewgroup, which can be used to contain multiple view components, which can itself be included as a view component by other viewgroup, thus building a very complex UI Interface.Common layout managers such as framelayout, linearlayout, relativelayout and so on are directly inherited from Viewgroup.In Android applications, activity is equivalent to a form in traditional desktop development, which is just created as a blank screen, so when you want to display the UI interface, you need to call the Setcontentview () method to pass in the view instance or layout resource that you want to display.Such as:To pass in a layout resource:Setcontentview (r.layout.main);To pass in a view instance:TextView myTv = new TextView (this);Setcontentview (myTv);Mytv.settext ("hello, world");Because Setcontentview () can only accept one view instance, to display a complex UI interface, you need to use ViewGroup to contain multiple view instances and then pass ViewGroup instances to SETCONTENTVIEW. ViewGroup is an abstract class that is generally used directly by its subclasses and is called the layout manager.Android has two ways to write the UI interface, one in the XML layout resource file, the other is written directly in the code, such as the previous approach to a view instance is written directly in the code, which is the traditional approach to form programming. It is now recommended to write the UI interface in the XML layout resource file so that the application presentation layer can be separated from the logical layer, and the presentation layer can be modified without modifying the Code.To write a complex UI interface, you need to master the layout manager that is commonly used in ANDROID. Mainly include:Absolutelayout: Absolute LayoutFramelayout: Frame LayoutLinearlayout: Linear layoutRelativelayout: Relative layoutTablelayout: Table LayoutGridlayou: Grid Layout (new layout manager added by Android 4.0)1.LinearLayout Linear LayoutThe linear layout is where the view components are aligned in a linear alignment and can be arranged vertically or horizontally.How to create a new layout resource file:Right-click res/layout, then select New from the pop-up menu and select Android Xml file, to create a new LinearLayout layout file, Select LinearLayout as its root node.The Linear_layout.xml code is as Follows:<pre>1 <?XML version= "1.0" encoding= "utf-8"?>2 3 <LinearLayoutxmlns:android= "http://schemas.android.com/apk/res/android"4 5 Android:layout_width= "match_parent"6 7 Android:layout_height= "match_parent"8 9 android:orientation= "vertical">Ten one <Button a - Android:layout_width= "match_parent" - the Android:layout_height= "wrap_content" - - Android:text= "aaaaaa" - + /> - + <Button a at Android:layout_width= "match_parent" - - Android:layout_height= "wrap_content" - - Android:text= "bbbbbb" - in /> - to <Button + - Android:layout_width= "match_parent" the * Android:layout_height= "wrap_content" $ Panax Notoginseng Android:text= "cccccc" - the /> + a <Button the + Android:layout_width= "match_parent" - $ Android:layout_height= "wrap_content" $ - Android:text= "dddddd" - the /> - Wuyi </LinearLayout></pre>The code in activity is as follows:<pre><pre>1 protected void onCreate (Bundle Savedinstancestate) {23 // TODO auto-generated Method Stub 4 5 Super . OnCreate (savedinstancestate); 6 7 Setcontentview (r.layout.linear_layout); 8 9 }</pre></pre>Display Effect:Several common Properties are:1 ) Orientation Properties : Sets the arrangement of the components in the linearlayout, either vertical or horizontal to either vertical or horizontal rows.In the above code, if the orientation is set to Horizontal. The Display becomes:Because only one row is displayed, and the width of the first button is full of the parent element, only the first button is Displayed.2 ) Layout_width Property : Sets the width of the component in the parent element, which can be wrap_content,match_parent , or fill_parent. Where wrap_content means that the width is able to wrap the contents of the component, fill_parent and match_parent mean the same meaning that the width is full of the parent element, and now the match_parent is used more often, and the fill_parent is seldom used.If all the Button's layout_width are set to Wrap_content in the code above, the effect is as Follows:3 ) Layout_height Property : Sets the width of the component in the parent element, with a value of Layout_width.4 ) grativity Properties : Sets the alignment of components within the Container.If you add a property in the LinearLayout node: android:gravity= "center_vertical"The results are shown as Follows:The value of this property can be: top, bottom, left, right, center, center_vertical, center_horizontal equivalent, or these values or (ascended or arithmetic |)Such as: android:gravity= "bottom|right" display effect5 ) layout_gravity Property : The position of the current control at the parent Element.If Layout_gravity is set to "center" in the aaaaaa button, the effect will be superimposed with the gravity attribute effect in the container that is linearlayout, as shown below:is centered vertically, horizontally or on the left side of the BBBBBB6 ) Layout_weight Property : Sets the allocation weight for extra space in the parent element in the child Control.At this point, if you set the Layout_weight property only in the AAAAAA button, you can set it to any value, and the custom setting is 1. The aaaaaa button will stretch to occupy the rest of the space, as shown below:If the Layout_weight property is set in both AAAAAA and dddddd two buttons, and the first is set to 1 and the second is set to 2, the remaining space before the excess will be assigned to AAAAAA 1/3, to DDDDDD 2/3, which is the respective weight value/ The total weight value, that is, the proportion of the remaining space to be divided, is shown as Follows:7 ) WeightSum Property : Sets the total weight value of the remaining space in the container, which is a property in linearlayout, and Layout_weight is a property in each child control, and, if not set, defaults to the sum of Layout_weight property values for each child Control.If the value of Layout_weight as above aaaaaa layout_weight value is 2 and the LinearLayout value in Weightsum is set to 6, there will still be half the remaining space. AAAAAA only the original remaining space of the 1/6,dddddd divided by 2/6, shown as Follows:8 ) Visibility Properties : Control whether the display, the value can be invisible, visible, gone. Visible indicates that invisible and gone do not appear, where invisible does not appear, but the control still exists, occupies space, and gone means that the control does not exist, and it does not occupy Space.For example: CCCCCC Setting the visibility property to gone, as shown below:If you change to Invisible:LinearLayout setting Invisible:2.RelativeLayout : Relative LayoutAs the name implies, according to the relative position of each control layout, relative position, can be child control a relative to the position of the parent control, or child control a relative to applies control B Position.Right-click res/layout, then select New from the pop-up menu and select Android Xml file, to create a new Relativelayout layout file, Select Relativelayout as its root node. The file name is Relative_layout.xml.The code is as Follows:<pre>1 <?XML version= "1.0" encoding= "utf-8"?>2 3 <Relativelayoutxmlns:android= "http://schemas.android.com/apk/res/android"4 5 Android:layout_width= "match_parent"6 7 Android:layout_height= "match_parent" >8 9 <ButtonTen one Android:id= "@+id/aa" a - Android:layout_width= "wrap_content" - the Android:layout_height= "wrap_content" - - android:layout_centerinparent= "true" - + Android:text= "aaaaaa" - + a at /> - - <Button - - Android:id= "@+id/bb" - in Android:layout_width= "wrap_content" - to Android:layout_height= "wrap_content" + - Android:layout_torightof= "@id/aa" the * Android:layout_aligntop= "@id/aa" $ Panax Notoginseng Android:text= "bbbbbb" - the /> + a <Button the + Android:id= "@+id/cc" - $ Android:layout_width= "wrap_content" $ - Android:layout_height= "wrap_content" - the Android:layout_toleftof= "@id/aa" - Wuyi Android:layout_alignbottom= "@id/aa" the - Android:text= "cccccc" wu - /> about $ <Button - - Android:id= "@+id/dd" - a Android:layout_width= "wrap_content" + the Android:layout_height= "wrap_content" - $ Android:layout_above= "@id/aa" the the Android:layout_alignleft= "@id/aa" the the Android:text= "dddddd" - in /> the the <Button about the Android:id= "@+id/ee" the the Android:layout_width= "wrap_content" + - Android:layout_height= "wrap_content" the Bayi Android:layout_below= "@id/aa" the the Android:layout_alignleft= "@id/aa" - - Android:text= "eeeeee" the the /> the the </Relativelayout></pre>Modify Firstactivity in Setcontentview (r.layout.relative_layout);Display Effect:AAAAAA is centered in the parent containerThe BBBBBB is displayed on the right side of the aaaaaa and aligned with the top of the AAAAAACCCCCCC is displayed on the left side of AAAAAA and aligned with the top of the AAAAAADDDDDD shown on AAAAAA and left aligned with AAAAAAEeeeee is shown below aaaaaa and left-aligned with AAAAAAPrimary Properties: Both the relative position of the parent and child, or the relative position of the child controlAndroid:layout_torightof on the right side of the specified controlAndroid:layout_toleftof on the left side of the specified controlAndroid:layout_above the top of the specified controlAndroid:layout_below the bottom of the specified controlAndroid:layout_alignbaseline horizontal alignment with the specified controlAndroid:layout_alignleft left-aligned with the specified controlAndroid:layout_alignright right-aligned with the specified controlAndroid:layout_aligntop aligns with the top of the specified controlAndroid:layout_alignbottom aligns with the bottom of the specified controlAndroid:layout_alignparentleft is left-aligned with the parent layoutAndroid:layout_alignparenttop is aligned with the top of the parent layoutAndroid:layout_alignparentright is right-aligned with the parent layoutAndroid:layout_alignparentbottom is aligned with the bottom of the parent layoutAndroid:layout_centervertical Center vertically in the parent layoutAndroid:layout_centerhorizontal Center horizontally in parent layoutAndroid:layout_centerinparent Center in parent layoutAndroid Rookie learning note 6----android Layout (one)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Android Rookie learning note 6----android Layout (one)

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support