Preface:
This article will refer to the screen adaptation problems, use Widget (align components), the text layout Label component, as well as container Layout component.
First, the screen adaptation
1. The screen adaptation is mainly used to solve different problems of different phones resolution. Because when we developed the game canvas Canvas is set up, although in general the resolution set all the time for most mobile phones, but there are still some phones do not match. For the resolution does not match the geometric scaling operation will be carried out, this time there have been game interface width and scaled to the phone's screen as wide or game interface and highly scaled to the phone screen as high , this may appear black bars or display incomplete phenomenon.
Resolution design (Design Resolution)
adapted height (Fit Height)
adapted to the width (Fit Width)
Here you can select the screen adaptation scheme according to their needs!
Two, Widget processing position alignment assembly
Front screen adaptation programs just mentioned, it is sometimes incomplete display problems occur. For example: Originally, we had the lower left corner of the game interface has a jump button, because the screen adaptation interface display incomplete, it is possible this button will be clipped. Such an outcome certainly does not work, then the solution to this problem need to use the Widget components.
You look at this property the following components, you can roughly guess why this component uses a ~
The role of components is: make this node is in what position relative to the screen!
Here are a few places worth noting:
- Widget components of the control node is the relative position of the screen.
- Controlled by the need to check the position of different properties, of course, may be in pixels, the percentage may be measured in%.
- When we check the left and right or up and down, when the stretching magnification of the nodes automatically.
Third, here to tell us Sliced (squared) mode Sprite component
Sliced pattern can be found inside the Sprite assembly, its main function is to draw a pattern to enlarge the basic outline of the enlarged pattern is constant. , Change only the size of the intermediate section as we QQ chat bubbles, no matter how many words we type, the bubble did not outline the changes that occur: an example.
After selecting the squared mode, you can click on the Edit button to the right will be able to enter the following interface:
By adjusting each of the two horizontal and vertical dividing line to control zoom, and zoom a portion not!
Question four text layout, Label components
Introduction property:
String text
Horizontal Align (horizontal alignment)
Vertical the Align (vertical alignment)
the Font Size Font Size
Line Height line height
Overflow (pattern layout)
| mode | meaning |
|---|---|
| Truncate (Clamp) | The cut mode, the text is first rendered according to the requirements and size alignment pattern, beyond the bounding box is hidden portion (cut). |
| Auto Reduction (Shrink) | Automatic reduction mode, if the text exceeds the size of the bounding box according to the original will be rendered, the character size is automatically reduced to show the full text |
| Automatically adapt to the height (Resize Height) | Automatically adapt to the altitude mode will ensure that the text bounding box fit the height of the text, no matter how many lines of text. This mode is very suitable for display of a large amount of content is not fixed paragraphs, ScrollView mating component can display an unlimited amount of text in any of the UI area. |
Anchor text node:
text node and the anchor text alignment constraint box mode is a need to distinguish between the two concepts. The need to rely on the text bounding box to stretch the layout mode (such as Resize Height), to set the correct anchor position, to make the bounding box to adjust our desired direction.
For example, if you want the text box expands downward constraint is necessary to anchor (Records) in the y attribute to 1. As shown below:
text can be aligned with the pendant (the Widget)
Five, Layout assembly (automatic layout)
The layout can create a list of what those characters are very easy to use ~
1. The horizontal arrangement direction (Horizontal Direction)
Or may be provided Left to Right Right to Left both orientations, the former will be the node in display order from left to right in accordance with the hierarchy manager; latter from right to left according to the display node.
2. The vertical arrangement direction (Vertical Direction)
You can set Top to Bottom Bottom to Top or both orientations. The former will be displayed according to the order from the nodes are arranged in a hierarchy manager; the latter from the arrangement according to the display node.
On Message:
Today own micro-channel public number listed, although the latter is still very difficult, but today still happy!
If you see this text might help me add a concern, "agriculture cloud library code" micro-channel public number!
Inside the main provider of free e-books computer-related!
