Dev Guide/framework topics/User Interface/XML layouts

Declaration Layout

In an activity, your layout is the overall interface architecture. It defines the elements displayed to the user. You can declare your layout in two ways:
@ Defined in XML
Android provides some intuitive view classes and their subclasses, such as widgets and layout.
@ Create an instance at runtime
Your application can establish view or viewgroup through code and set their attributes.
The android framework provides you with these two flexible methods to manage and declare your application UI. For example, you can declare a default layout in XML, including the elements and attributes of the user interface. You can use the code to modify the interface elements declared in XML at runtime.
The advantage of customizing the UI in XML is that it makes the interface and the logic part independent and easy to iguanli their time. If the UI and code are separated, it means that you can modify the interface at any time without modifying the code and then compile it. For example, you can create different la s for the horizontal and vertical screens in different languages. In addition, it is more intuitive to declare layout files in XML, so you can easily find out the bugs. Therefore, this article will tell you how to declare your layout in XML. If you are interested in instantiating view and viewgroup at runtime, you can refer to the two viewgroup and view classes.
Generally, the name of the UI element is very similar to the actual function. The element name corresponds to the class name, and the attribute name corresponds to the method name. In fact, this correspondence makes it easy for us to guess the class methods lost in XML attributes. Or the XML element corresponding to a class. However, not all names are the same. In some cases, the name may be different. For example, the edittext element has a text attribute, but corresponds to the edittext. settext () method.
TIPS: to learn more about layout types, refer to the common layout objects chapter. There are a lot of examples of creating layout in Hello views.

Write XML
Using the android XML vocabulary, you can quickly design the UI layout and their location. Like HTML, there are a series of nested elements.
Each layout file must contain a root element, which must be a view or viewgroup. Once you define the root element, you can add its child elements to form a hierarchical layout. For example, a linearlayout contains a textview and a button.

1. View plaincopy to clipboardprint?
   
2. <? XML version = "1.0" encoding = "UTF-8"?>
   
3. <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
   
4. Android: layout_width = "fill_parent"
   
5. Android: layout_height = "fill_parent"
   
6. Android: Orientation = "vertical">
   
7. <Textview Android: Id = "@ + ID/text"
   
8. Android: layout_width = "wrap_content"
   
9. Android: layout_height = "wrap_content"
   
10. Android: text = "Hello, I am a textview"/>
    
11. <Button Android: Id = "@ + ID/button"
    
12. Android: layout_width = "wrap_content"
    
13. Android: layout_height = "wrap_content"
    
14. Android: text = "Hello, I am a button"/>
    
15. </Linearlayout>

Copy code

After layout is declared in XML, save the file with XML as the suffix and put it in the Res/layout/directory of the Project. Then, the file will be correctly compiled. We will discuss the meaning of the specific elements later.

Load XML Resources

After you compile the program, Each XML is programmed with a view resource. You can load these layout resources from the code in your activity. In the oncreate () method. After you call setcontextview (), the resource reference is passed through R. layout_file_name. For example, if you have the main_layout.xml configuration file, you can load it in the activity as follows:

1. View plaincopy to clipboardprint?
   
2. Public void oncreate (bundle savedinstancestate ){
   
3. Super. oncreate (savedinstancestate );
   
4. Setcontentview. (R. layout. main_layout );
   
5. }

Copy code

When the activity is running, the oncreate () callback method is called by the android framework.

Attribute attributesEach view and viewgroup object supports XML attributes, some of which are special. For example, textview supports textsize attributes, but these attributes can also be inherited and expanded by view objects. Some attributes are public because they inherit from the root class, such as ID. Other attributes, such as layout parameters, are called layout parameters. These attributes are used to describe the layout of a view and are defined by their parent view, namely, viewgroup. ID: each view object has an int ID attribute, which is the unique identifier in the view structure. After a program is compiled, Id becomes an int type reference. However, in XML, ID is a string. This is a basic attribute shared by all view objects and is frequently used. The syntax for writing in XML is as follows: Android: Id = "@ + ID/my_button" the @ character starting with the string, indicating that the XML parser will parse the remaining string following the @ character, it is defined as an ID resource. The "+" symbol means that this resource must be added to the R. Java file. The android framework provides a large number of ID resources. When we reference an android resource ID, you do not need the "+" symbol, but you must add the android package namespace, such as: Android: Id = "@ Android: ID/empty "when the android package namespace is used, we can use android. r Resource class. To create a view
And it is used in the program. The common mode is: 1. Define a viewm in XML and assign an ID

1. View plaincopy to clipboardprint?
   
2. <Button Android: Id = "@ + ID/my_button"
   
3. Android: layout_width = "wrap_content"
   
4. Android: layout_height = "wrap_content"
   
5. Android: text = "@ string/my_button_text"/>

Copy code

2. (usually in the oncreate () method) create a reference to the view object in the code.

1. View plaincopy to clipboardprint?
   
2. Button mybutton = (button) findviewbyid (R. Id. my_button );

Copy code

In relativelayout relative layout, it is very important to define the view object ID. In this layout, brothers view can determine the layout through the positional relationship, that is, the unique ID. In the entire layout structure, the ID is not necessarily unique and can be unique in the current layout structure. However, we sometimes use the entire layout, so we must make it globally unique.

Layout Parameters

The XML Attribute named layout_something defines the layout parameters of the view in the viewgroup. Each viewgroup class implements a nested class inherited from the viewgroup. layoutparams class. This subclass contains parameters such as the size and position of its sub-view. As you can see below, the parent view defines the layout of the Child View:

19:20:48 upload

Download Attachment
(41.19 KB)

Note that each layout parameter subclass has its own set value format syntax. Each child element must define layout parameters suitable for the parent view, although he defined different layout parameters for his child view. All viewgroups contain the width and height attributes and must be defined. Many layout parameters also include optional gap parameters and boundary parameters. You can use a precise value to define the width and height, although you do not want to do this frequently. In more cases, you will define it as follows: @ wrap_content only occupies the required size. @ fill_parent occupies the maximum size possible for the parent viewgroup. (In the API
In Level 8, it is changed to match_parent. Generally, we do not recommend using pixel values to define high-width values. We often use relative units, such as density-independent pixel units (DP ), it can be replaced by warp_content or fill_parent to ensure that your program runs on a large number of devices of different sizes. The accepted measurement type is defined in the available respurces document.

Layout position
A view is a rectangle. Each view has a position, including the starting coordinates and width and height of X and Y to determine the position of the rectangle. The unit of position and size is pixel. You can call the getleft () and gettop () methods to obtain the view position. The two methods return the coordinate xy in the upper left corner of the rectangle. These methods return the orientation relative to the parent view. For example, if getleft () returns 20, its right side is 20 pixels away from the left side of the parent view. In addition, there are many convenient methods to reduce unnecessary calculations, such as getright () and getbottom (). (Getright () = getleft () + getwidth ())

Size, padding, Margin Size, padding and margins
The size of a view is its width and height. A view actually has two sets of height and width values. The first value is the measured width and measured height we all know, that is, the measurement width and the measurement height. This set of values defines how big they want to be in the parent view. They can be obtained through getmeasuredwidth () and getmeasuredheight. The second set of values is width and height, or it is drawing width and drawing height. This set of values defines the actual size of the view after it is drawn to the screen. These values may be different from those of the first group. You can use the getwidth () and getheight () methods. To get the view
The actual size must take into account his fill. The padding attribute indicates the pixel gap between the top left and the bottom right of the view. By setting some pixel values, the padding attribute is used to fill the surrounding area of the View content. For example, if left padding is set to 2, there is a gap between the left side of the view and the left side of its parent view. You can use the setpadding (INT, Int, Int, INT) method and the getpaddingleft () \ getpaddingright () \ getpaddingtop () \ getpaddingbotton () method to set and obtain it. Although a view can define padding, it does not support the margins attribute, but viewgroup does. Reference
Viewgroup and viewgroup. marginlayoutparams class for more information.