[Mobile development] comprehensive understanding of the Unityui system

With Unity 4.6 released, the new UI system has finally met with you.


Recttransform
the Unity UI system uses Recttransform to achieve basic layout and hierarchical control. Recttransform inherits from Transform, so all characteristics of Transform recttransform likewise possess. On the basis of Transform, Recttransform increases the axis (pivot), the anchor point (actually the rectangular area defined by Anchormin, Anchormax two points), and the size variation (Sizedelta).
Pivot: Represents the center of a UI element, using the point position expressed as a percentage of its rectangular extent, which affects positioning, scaling, and rotation.
Anchor point: The rectangular area of the rectangle, relative to the parent rectangle, with a percentage representation of each boundary value.
dimension Change: The size change of the sub-rectangle defined by the anchor point, and the area after the bounding rectangle defined by the anchor point is the final UI rectangle.
in the Inspector interface, in order to more easily adjust the properties of the Recttransform, the two points of the anchor point will display position and width height (direct adjustment position and Sizedelta), Otherwise, the offset of the bounding rectangle of the relative anchor point is displayed (calculated and then assigned to the position and Sizedelta). In the program, Recttransform adds the Anchoredposition and Rect properties for easier programming.


The Recttransform component is also responsible for organizing the hierarchical relationships of gameobject. In the UI system, the child UI object always overrides the UI object that appears on the parent UI object, and the UI object underneath is always overwritten with the UI object that appears above. This design avoids the tedious setting of the depth. In the program, Transform added Setsiblingindex, Getsiblingindex, Setasfirstsibling, setaslastsibling These methods to easily modify the object's hierarchical order.
EventSystem
If you use the UI system, the EventSystem object is created automatically. This object is responsible for listening for user input. By default, keyboard and mouse input is available on your computer, and touch input is available on your mobile device. But if you're developing for a device like surface, you can also enable both types of input. When you need to block user input, turn this object off. UnityEngine.EventSystems.EventSystem.current saves the currently active EventSystem object.
Canvas
a Canvas is the root of all other UI objects. There is no limit to the number and hierarchy of canvases in a scene. The child canvas uses the same rendering mode as the parent canvas. A CANVAS has three rendering modes:
The screen space-overlay:ui element is displayed on top of any camera screen in 2D relative to the display space. This is a very standard UI style. Typical example: A large number of window, text and button strategy games.
The screen space-camera:ui element is displayed by the specified camera, relative to the display space, and the camera's parameters affect the displayed result. You can think of Canvas as a sub-object of the camera. Typical example: A 3D HUD on a shooting game screen.
World Space:ui elements have the same world position and occlusion relationships as objects in other scenes, as opposed to global space. Often used to make a very innovative UI design. Examples: in-game phone screens, game guides that bind to scenes, and more.
Canvasscaler
This component is responsible for screen adaptation. The UI system uses Recttransform to calculate the location and size of the UI, but that is not enough. How can I make the UI of a design fit different resolutions, aspect ratios, and DPI? This component gives the following 3 adaptation methods, noting that any adaptation method does not change the aspect ratio and relative positioning of the UI.
Constant Pixel Size: Maintains the zoom by adjusting the size of the Canvas pixel. It means that the canvas's zoom factor (scale Factor) is not changed on any screen, but that the canvas's pixel size is aligned with the screen. You can adjust the zoom factor of the Canvas manually or by code. This is the default adaptation scheme for the UI system. The same UI display differs in both resolutions, although the positioning and size of the UI elements are not changed on different screens (the two white elements in the figure are positioned in the upper-left and lower-right corners of the screen, respectively), but the smaller screen UI elements occupy most of the screen space and appear more crowded. This is the disadvantage of this approach, the small screen is too crowded, the large screen is too empty, not considering the screen resolution and DPI. But the benefit of this pattern is that UI elements can maintain the design-time details (because there is no scaling). This pattern may apply to: you want the UI to be displayed in a certain range at its original size, which allows the UI to display as clearly as possible, while allowing the larger screen player to have a wider view, but on a screen that is too small or too large, you can adjust the zoom factor by the program so that the small screen is fully occupied by the UI, The UI is not found on the big screen.

scale with screen Size: scales according to the resolution of the screens. This is probably the most convenient way to fit most games. In this mode, you need to specify a design resolution and then specify the algorithm for scaling. Regardless of the scaling algorithm, if the actual aspect ratio is the same as the design aspect ratio, the UI will be scaled. In fact, the Canvas just keeps its size and the design resolution consistent. If the actual aspect ratio is different from the design aspect ratio, then the scaling algorithm will affect the display results. There are three scaling algorithms: scaling, shrinking, and matching wide heights. The logic of the extension algorithm is to enlarge the short side of the canvas (on the aspect ratio) so that the canvas aspect ratio is consistent with the screen. As shown below, the design resolution aspect ratio is 1:1 (red wireframe) and the actual screen is wider so the width of the Canvas is increased to match the screen. Such an algorithm will always cause the UI to be more "open" on screens with different aspect ratios. The logic of the shrink algorithm is to shrink the long side of the canvas (on the aspect ratio) so that the canvas aspect ratio is consistent with the screen. As shown in the figure below, the design resolution aspect ratio is 1:1 (red wireframe) and the actual screen is narrower so the height of the Canvas is reduced to match the screen. Such an algorithm will always cause the UI to be "compact" on screens with different aspect ratios. The algorithm logic for matching the width to height is that the canvas width and height are adjusted to match the screen according to the specified weights. On the right, the design resolution is the red wireframe, the weights of the width and height are equal (0.5), and the Canvas width and height on the actual screen are adjusted to match the screen. The purpose of this algorithm is to maintain the original design of the UI as much as possible with adjustable width and height weights.

Constant Physical Size: Maintains the scale unchanged by adjusting the Canvas physical size. Instead of changing the DPI of the canvas on any screen, adjusting the canvas's physical size is always consistent with the screen. This argument may be more difficult to understand than Constant Pixel size, in fact they are essentially the same, except that Constant Pixel size maintains the scale through the logical pixel resizing, while the Constant physical size is maintained by physical size adjustment Scaling. Using this mode, you must specify a factor to convert the physical size of a pixel (fill in 96 to facilitate development on windows). The runtime calculates the Canvas pixel size and scaling factor from the DPI reported by the specific device. This pattern, from the point of view of design, is to use physical units rather than pixel units during development, which only complicates the work of the program and the arts, and the actual value is not high. Because developers are more concerned with designing pixel resolutions, they need to draw explicit pixel-sized pictures! If future developers and players use ultra-high-dpi displays, they might be more focused on physical dimensions.
selectable
the base class for an interactive UI component. It is responsible for responding to user input, creating visual changes, switching navigation targets, and handling common UI events.
Transition: There are 4 visual states for an interactive component: Normal, highlighted (highlighted), pressed (pressed), and disabled (disabled). The selectable performs a state switch based on the user's input and its current state, with 4 types of visual effects on the toggle state: None, color tint, sprite swap, and animation. Using the animation effect, you must add another animator component, which contains the 4 states described above. You can automatically add components and create animation controllers through the Auto Generate Animation button.
Navigation: You can use the keyboard and game controller to switch the navigation target, if you want to develop a game only using the game controller can play (host game), then this feature is very important, because the player does not have a mouse and can not use the touch screen, only through the button to switch navigation target. This feature is so well designed that you can handle almost anything without doing it. There are 5 navigation options: Do not use (None), horizontal (horizontal), vertical (Vertical), Auto (Automatic), explicit designation (EXPLICIT). In situations that are not explicitly specified, the navigation system automatically finds the most appropriate switching target in 4 directions based on the rectangle position and size of each UI element. If you choose to specify explicitly, you need to specify a switch target (selectable) for 4 directions. Click the Visualize button in the Inspector interface to see the navigation path (the Yellow line in), and in Eventsystems you can set the default selected object.

General events: OnSelect, Ondeselect, Onpointenter, Onpointexit, Onpointdown, Onpointup, .... Override these methods to define your own interoperable components. An example of how to implement a custom control is presented at the weekend.
Auto Layout
automatic layouts are used to simplify the layout of your UI. The automatic layout is based on the Recttransform layout system, which contains two concepts of layout elements (layouts Elements) and layout controller (layouts Controllers).
layout elements contain the minimum size, preferred size, and optional dimensions, and the layout controller adjusts the size and position of the layout elements based on these parameters. The basic principle of layout controller tuning is to assign the smallest size first, then allocate the preferred size if there is enough space, and then allocate the optional size if there is space. A game object that contains a Recttransform component is a layout element. Adding some components modifies the parameters of the layout element. Layoutelement is a component used to modify the default layout parameters. Layout controllers exist in the form of multiple components that control the size and position of layout elements of their own or children. Please refer to the Unity documentation for the functions and usage of various layout controller components.
Rich Text
by default, a text component displays all text in a single style, and Rich text lets you enrich the display style, such as highlighting some text. In fact, rich text functionality can be used not only in the UI system, but also in the Legacy GUI system and Debug.
Rich Text is used like HTML tags, such as "Hello" will appear as bold "Hello". These tags can also be used in nested nesting. The available labels are B (bold), I (italic), size (sizes), and color (colors). where size and color must specify the property value, such as: "Hello" "Hello". The Size property is in pixels, and the color property uses the 16-binary representation of the RGBA format or directly fills in the common color names. To use the example.

[Mobile development] fully understand the Unityui system