Chapter 2 (2) uidesigner, Chapter 2 ui

Chapter 2 (2) uidesigner, Chapter 2 ui

Category: C #, Android, and VS2015; creation date:

Developers can declare the UI in either of the following ways. xml file (without preview Interface) or. the axml file (with a preview Interface) is described. The second is implemented using the C # code.

When you use the. axml file to describe the user interface (UI), the designer can be divided into the design view and Source view. The advantage of this method is that you can try to separate the performance from the code that controls the behavior. That is to say, you can directly modify the XML without re-compiling. In addition, the UI structure visualization and debugging can be made easier.

1. layout file (. xml and. axml)

After the UI is declared in XML, it must be saved in the Resources/Layout/directory of the Android project with the. xml extension or. axml extension before compilation can be successful.

• . Xml file: Without Design Interface
• . Axml file: With Design Interface
• You can change. xml to. axml at any time, or. axml to. xml at any time.

When the compiler compiles an application, each XML file or AXML file is compiled into a View. Developers need to specify the XML resource to be loaded in the OnCreate method of the Activity overload.

For example, the following code loads the Main. axml file:

protected override void OnCreate(Bundle bundle){    base.OnCreate(bundle);    SetContentView(Resource.Layout.Main);}

2. attribute classification

In the Properties window, the following categories help you quickly find the corresponding properties:

• Widget-control (with design interface components), main attributes include: id, visibility, text, etc.
• Style-visual Style control, such as font, text color, and background
• Layout-Layout Control
• Scroll-rolling attributes
• Behavior-Behavior Control

3. Default attribute values

Because most of the control values are inherited from the Android Theme, most of these values are blank by default. That is, the inherited values are not displayed by default. Only values explicitly specified by developers are displayed.

4. common attributes

The following lists some of the most common attributes. (1) ID

Each View object in an Activity is identified by an integer ID. However, this ID is commonly represented by strings in XML files. For example:

<Button android:id="@+id/mybutton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/my_button_text"/>

@ At the beginning of the string indicates that the XML Parser should parse and extend the remaining part of the ID string and identify it as an ID resource. [+] Indicates a new resource name.

Note: Do not use "+" When referencing the Resource ID that has been defined in the Resource, but use the "android" namespace to limit it. For example, the following code references the empty.jpg file:

Android: id = "@ android: id/empty" (2) wrap_content, fill_parent, match_parent

Wrap_content: Adjust the element size to the size required by its own content.

Fill_parent: Adjust the element size to the maximum size allowed by its parent element. The Layout control under the "Layout" tab in the toolbox uses it by default.

Match_parent: Adjust the element size to the maximum size allowed by its parent element. Match_parent works the same way as fill_parent. It is used by default for non-layout controls (such as TextView and Button) under the "Form Widgets" tab in the toolbox. (3) dp

We do not recommend that you use absolute measurement units to specify the height and width. Instead, you should use density-independent pixel units (dp ). In addition, relative measurement attributes such as wrap_content and fill_parent should be used whenever possible. The advantage of this is that applications can adapt to device screens of different sizes. (4) Left, Top, Right, Bottom

The default geometric shape of a View is a rectangle. Each View uses Left, Top, Width, and Height to determine its position. The unit is pix (pixel ).

Left and Top return the position value relative to its parent View. In addition, the View also provides a simple method to avoid unnecessary calculations, such as Right and Bottom. The two attributes return the coordinates of the Right and Bottom edges of the View. Right is equivalent to Left + Width, and Bottom is equivalent to Top + Height. (5) Size, width, and height

The Size of a View is constructed using two pairs of values (width and height:

Measured width and measured height: defines how large a view is displayed in its parent. The actual size can be obtained by calling getMeasuredWidth () and getMeasuredHeight;

Width and height: this is the actual size of the View on the screen defined at the time of painting and after the layout. These values may be different or the same as measured height and measured width.

To measure the size of an element, View calculates its padding. The Padding consists of the top, bottom, and left parts of the View, in pixels. Padding can offset the content of a view by a specific number of records. For example, if the value is 2, the left padding will push the view content from the left edge to the Right to 2 pixels.

Although View can define padding, it does not provide margin, but provides this attribute in ViewGgroup. (6) Margin

After a control is selected, you can drag the control point in the red box to adjust the Margin (Margin) of the control ):

Double-click the corresponding control point and you can directly enter or modify the specific value, for example, "39.3dp", as shown in:

In, we can see that there are several small rectangular buttons. You can drag them to modify the following attributes:

• Wrap_content: Let the control match the size of its own content.
• Match_parent: Fill in the available space of its parent container with the control.

However, not all controls can modify their attribute values by double-clicking. For example, even if you select LinearLayout, the control points are not displayed. Of course, you cannot double-clicking it on the interface to modify its attribute values.

5. Outline View)

You can use the Outline View to quickly select widgets that are not easily selected in the designer:

In the outline view, you can drag and drop, copy, paste, and right-click the designer to bring up a shortcut menu.

When some widgets in the designer are not easy to choose, you can also right-click the shortcut menu to operate: