Unity-UI（UGUI详解）01基础概念、自动布局、动画集成、富文本

Canvas

Canvas应该包含全部UI元素，全部的UI元素应该时Canvas的子物体 调整元素的显示顺序可以从Hierarchy中直接拖拽他们，顺序从也可以被控制通过Scripting使用 SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.这些方法。

RenderModes

• Screen space - Overlay： 这个模式，UI将渲染在screen的最上层 This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.
• Screen Space - Camera : 这个模式类似于Overlay，但是Canvas被放置在一个Camera前面一定距离，UI将通过camera进行渲染，相机的渲染效果将影响UI的表现，如果相机是透视视角，UI将被渲染成透视效果 This is similar to Screen Space - Overlay, but in this render mode the Canvas is placed a given distance in front of a specified Camera. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to Perspective, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera Field of View. If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.
• World space： 渲染规则将和世界坐标中的object相同。 In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a “diegetic interface”.

The Rect Tool

Rect Transform: 这个组件和Transform一样也有position，rotation和scale，但是多出了width和height。

Pivot下，可以调节中心位置，一切变化都是围绕Pivot展开的 Center下，中心就在UI组件的中心，变化围绕中心展开

锚点（Anchors）：用于自适应的工具 如果父物体也有RectTransform组件，子的RectTransform可以通过anchored Anchor presets提供了一些锚点的快速设置。

Visual Components 可视组件

Text、Image、Raw Image、Mask、Effects

Interaction Components 交互组件

交互组件无法自己生效，需要绑定一个visual elements Button、Toggle、Toggle Group、Slider、Scrollbar、Dropdown、Input Field、Scroll Rect（Scroll View）

Animation Integration 动画集成

在Button组件中将Transition的类型设成Animation，点击AutoGenerateAnimation，将自动生成动画状态机，并生成4端Animation分别对应普通状态、悬停状态、点击状态、不可用状态。 使用Animation transition，需要在物体上添加一个Animator Component，将controller设置为生成的Animator

Auto Layout 自动布局

自动布局提供了将元素放置在嵌套布局组中的方法，他还允许根据所包含的内容自动调整大小。可以动态的调整按钮的大小，使其与文本内容完全匹配，并添加一些填充。 自动布局系统是建立在Rect Transform layout system的基础之上。它可以选择性地用于某些元素或全部元素。 布局元素 布局系统基于layout elements 和 layout controllers，layout element是一个GameObject包含Rect Transform组件，layout element包含size信息，layout element并不直接设置自身的大小，但是其他组件提供的信息通过layout controllers计算出自身的大小。 layout element需要定义自己的一些属性 Minimum width Minimum height Preferred width Preferred height Flexible width Flexible height 布局元素在Layout group中的大小使用原则： 先设定最小的元素大小 如果有足够的大小，使用最佳大小 如果没有足够的空间，使用可变的大小 Layout Element Component LayoutElement ->重写minimum, preferred, or flexible size

布局控制器：可能控制自己的布局元素，也可能控制子布局元素 Content Size Fitter:设置Horizontal Fit / Vertical Fit 为Min Size 或者 Preferred Size

layoutAutoInspector.PNG

Aspect Ratio Fitter：通过设置Aspect Mode来进行自适应，可以设置宽高比，设置和parent的比例。

Layout Groups：布局组充当布局控制器，控制其子布局元素的大小和位置。例如水平布局组将其元素放置在梁林位置，网格布局组将其子元素放置在网格中。布局组不控制自己的大小。相反，它作为布局元素本身发挥作用。

Technical Details 自动布局系统根据一些相关组件进行构建，但是也可进行自定义的控件创建，这是通过让组件继承一些特殊的接口来实现的 Layout Interfaces: A component is treated as a layout element by the auto layout system if it implements the interface ILayoutElement. A component is expected to drive the Rect Transforms of its children if it implements the interface ILayoutGroup. A component is expected to drive its own RectTransform if it implements the interface ILayoutSelfController.

Layout Calculations: 自动布局系统按照一定的顺序进行布局的

Triggering Layout Rebuild: 当组件的属性变化导致当前布局不在可用时，布局需要重新计算，这个过程可以通过LayoutRebuilder.MarkLayoutForRebuild方法实现。 布局不应该立即生效，而是在一帧的末尾，渲染开始之前，这样避免了在一帧中重复的布局计算。 重新布局何时应该被触发：

• 属性设置改变了布局
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange
• OnValidate
• OnDidApplyAnimationProperties

Rich Text（富文本）

UI元素和文本网格可以包含丰富的字体和大小。Text、GUIStyle、GUIText和TextMesh类有富文本设置指示Unity去寻找markup tags在文本中。Debug.Log函数也可以适用markup tags去丰富error输出效果。tags不会显示但是将改变字体样式。

Markup format： markup系统受到HTML的启发但是与标准的HTML有所不同。基本思路是将需要改变样式的字体放在一个matching tags中间： We are <b>not </b> enemy. 如示例所示，标记只是“尖括号”字符<和>中的文本片段。标签内的文字表示其名称(在本例中为b)。请注意，该部分末尾的标签与开头的名称相同，但添加了斜杠/字符。这些标记不直接显示给用户，而是被解释为对它们所包含的文本进行样式化的说明。上面例子中使用的b标记将黑体字应用于单词“not”，因此文本将在屏幕上显示为:- We are not amused

Nested elements： 可以将一种样式嵌套在另一种样式之中 We are <b><i>definitely not</i></b> amused

Tag parameters： 一些tags需要知道一些参数 We are <color=green>green</color> with envy

material： 使用text mesh's array of materials在inspector上显示的

quad： This is only useful for text meshes and renders an image inline with the text. It takes parameters that specify the material to use for the image, the image height in pixels, and a further four that denote a rectangular area of the image to display. Unlike the other tags, quad does not surround a piece of text and so there is no ending tag - the slash character is placed at the end of the initial tag to indicate that it is “self-closing”. <quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5 />