The UI Designer for Android project development _android

Developers can declare the UI in the following two ways: either through an. xml file (without a preview interface) or a. axml file (with a preview interface), or with C # code.
When you describe the user interface (UI) with a. axml file, the designer is divided into the Design view and the source view. The advantage of this approach is that you can separate the code of performance from the control behavior as much as possible. That is, you can modify the XML directly without having to recompile. In addition, it makes it easier to visualize and debug your UI structure.
1. layout files (. xml and. Axml)
After you declare the UI in XML, you must save it as an. xml extension or a. axml extension in the resources/layout/directory of your Android project before you can successfully compile it.
.xml file: No design interface
.axml file: with Design interface
• You can change. xml at any time as. Axml, or you can change the. axml to. xml at any time.
When the compiler compiles the application, each XML file or Axml file is compiled into a view. Developers need to specify which XML resource is 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 – controls (components with design interface), main properties include: ID, visibility, text, etc.
style – visual style control such as font, text color, background, etc.
Layout – Layout control
Scroll – Scrolling properties
Behavior – Behavioral control

3, the default value of the property
because the value of a control is mostly inherited from the theme it uses (Android Theme), most of these values are blank by default. That is, the inherited value is not displayed by default, and only values explicitly specified by the developer are displayed.

4. Common Properties
Some of the most commonly used properties are listed below.
(1) ID
Each view object in an activity is identified with an ID of an integer type, but the ID is usually represented in a string in an XML file. For example:

<button android:id= "@+id/mybutton" android:layout_width= wrap_content "android:layout_height=" Wrap
    _content "
    

The "@" at the beginning of the string indicates that the XML parser should parse and extend the remainder of the ID string and identify it as an ID resource. "+" means that this is a new resource name.
Note that when referencing a resource ID already defined in resource, do not use "+", but rather use the "Android" namespace to qualify it. For example, the following code refers to the Empty.jpg file:
Android:id= "@android: Id/empty"
(2) Wrap_content, Fill_parent, match_parent
wrap_content:Resize the element to the size it requires for its own content.
fill_parent: Adjusts the size of an element to the maximum size that its parent element can allow. The layout control in the Toolbox under the Layout tab uses it by default.
match_parent:Resize the element to the maximum size that its parent element can allow. The role of Match_parent is the same as fill_parent, and non-layout controls (such as TextView, Button, and so on) under the Form Widgets tab in the Toolbox use it by default.
(3) DP
It is generally not recommended to specify height and width using absolute units of measure, but rather to use a density-independent pixel unit (DP). In addition, you should try to use relative metrics such as wrap_content,fill_parent, which has the advantage of adapting your application to a device screen of different sizes.
(4) left, top, right, Bottom
The geometry of the view is a rectangle by default, and each view uses the left, top, Width, and height to determine its position.
Left and top returns the positioning value relative to its parent view. In addition, view gives an easy way to avoid unnecessary computations, such as right, Bottom, which return the coordinates of the view's right-hand and bottom edges. where right equals left + Width,bottom equivalent to Top+height.
(5) Size, width, height
The size of a view has two pairs (wide, high) values to construct:
measured width, measured height:Defines how large a view is displayed in its parent. The actual dimensions can be obtained by calling Getmeasuredwidth () and getmeasuredheight ();
width, Height:This defines the actual size of the view on the screen at the time of drawing and after the layout, which may be different from the measured height and measured width, or the same.
In order to measure the size of the element, view calculates its padding. Padding includes the top and bottom four parts of the view. Padding can be used to offset the content of a view with a specific number of pixels. For example, a left padding with a value of 2 pushes the contents of the view from the left-hand edge to 2 units of measure.
Although view can define padding, it does not provide margin, but rather provides it in Viewggroup.
(6) Margin
After you select a control, you can resize the outer margin of the control by dragging the control point in the red box below (Margin):

Double-click the corresponding control point, and you can also enter or modify specific values, such as "39.3DP", as shown in the following illustration:

In the above illustration, you can see that there are a few small rectangular buttons that you can drag to modify the following properties:
wrap_content: Let the control match the size of its own content.
match_parent: Let the control fill the free space of its parent container.
However, not all controls can be double-clicked to modify their property values, for example, LinearLayout does not display control points even if it is checked, nor can you modify its property values in the interface by double-clicking.

5, outline view (Outline views)
use outline view to quickly select a control that is not easily selected in the designer:
In outline view, as in the designer, you can drag, drop, copy, paste, and right-click to eject the shortcut menu.
When some controls in the designer are not easy to select, you can also use the right mouse button to eject the shortcut menu to operate:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.