[移动开发]全面理解UnityUI系统

随着 Unity 4.6 发布,新 UI 系统终于与大家见面了。 


RectTransform 
Unity UI 系统使用 RectTransform 实现基本的布局和层次控制。RectTransform 继承于 Transform,所以 Transform 的所有特征 RectTransform 同样拥有。在 Transform 基础上,RectTransform 增加了 轴心(pivot)、锚点(实际上是用 anchorMin、anchorMax 两个点定义的矩形区域)、和 尺寸变化量(sizeDelta)。 
轴心:表示UI元素的中心,使用相对于自身矩形范围的百分比表示的点位置,这会影响定位、缩放和旋转。 
锚点:相对于父级矩形的子矩形区域,这个矩形各个边界值使用百分比表示。 
尺寸变化量:相对锚点定义的子矩形的大小变化量,与锚点定义的子矩形合并后的区域才是最终的UI矩形。 
在 Inspector 界面上,为了更方便的调节 RectTransform 的属性,锚点的两个点重合时会显示位置和宽高(直接调节位置和sizeDelta),否则显示相对锚点矩形边界的偏移量(通过计算后再赋值给位置和sizeDelta)。在程序中,RectTransform 添加了 anchoredPosition 和 rect 属性来更方便的编程。 


RectTransform 组件同样负责组织 GameObject 的层级关系。在 UI 系统中,子级 UI 对象总是覆盖显示在父级 UI 对象上;层级相同的 UI 对象,下方的 UI 对象总是覆盖显示在上方的 UI 对象上。这样的设计避免了繁琐的深度设置。在程序中,Transform 添加了 SetSiblingIndex、GetSiblingIndex、SetAsFirstSibling、SetAsLastSibling 这些方法来方便的修改物体的层级顺序。 
EventSystem 
如果你使用 UI 系统,那么 EventSystem 对象会自动创建。这个对象负责监听用户输入。默认情况下,在电脑上可以使用键盘和鼠标输入,在移动设备上可以使用触摸输入。但是如果你要为surface这样的设备开发,你也可以同时启用两种输入。当需要屏蔽用户输入时,将此对象关闭即可。UnityEngine.EventSystems.EventSystem.current 保存了当前活动的 EventSystem 对象。 
Canvas 
Canvas 是其他所有 UI 对象的根。在一个场景里 Canvas 数量和层级都没有限制。子 Canvas 使用与父 Canvas 相同的渲染模式。一个 Canvas 有三种渲染模式: 
Screen Space - Overlay:UI元素相对于屏幕空间,以2D方式显示在任何相机画面的上面。这是非常标准的 UI 风格。典型例子:大量窗口、文本和按钮的策略游戏。 
Screen Space - Camera:UI元素相对于屏幕空间,由指定的相机负责显示,相机的参数影响显示的结果。你可以把 Canvas 理解为相机的子物体。典型例子:射击游戏屏幕上的 3D HUD。 
World Space:UI元素相对于世界空间,和其他场景里的物体一样有世界位置、遮挡关系。通常用来做非常创新的 UI 设计。例子:游戏内的手机屏幕、与场景绑定的游戏指导等。 
CanvasScaler 
这个组件负责屏幕适配。UI 系统使用 RectTransform 来计算 UI 的位置和大小,但这还不够。如何让设计的 UI 可以适配不同的分辨率、宽高比和 DPI?这个组件给出了以下3种适配方法,注意任何一种适配方法都不会改变UI的宽高比和相对定位。 
Constant Pixel Size:通过调节 Canvas 像素大小来维持缩放不变。它的意思是在任何屏幕上不改变 Canvas 的缩放系数(Scale Factor),而是调节 Canvas 的像素大小与屏幕保持一致。你可以手动或通过代码调节 Canvas 的缩放系数。这是 UI 系统默认的适配方案。如下图两种分辨率下相同的UI显示的不同之处,虽然不同屏幕下UI元素定位、大小没有发生变化(图中两个白色元素定位分别为屏幕左上角和右下角),但是较小的屏幕上UI元素占用了大部分屏幕空间,显得更拥挤。这就是这种适配方式的缺点,小屏幕太拥挤、大屏幕太空旷,没有考虑到屏幕的分辨率和DPI。但是这种模式的好处是UI元素可以保持设计时的细节(因为没有缩放)。这种模式可能适用于:你希望UI在一定范围内按原始大小显示,这样既可以让UI显示的尽可能清晰、又可以让屏幕较大的玩家拥有更广阔的视野,但是在太小或太大的屏幕上,你可以通过程序来调节缩放系数,不至于小屏幕被UI占满、大屏幕找不到UI。 

Scale With Screen Size:根据屏幕分辨率缩放。这可能是大部分游戏最方便的适配方法。在这种模式下,你需要指定一种设计分辨率,然后指定缩放的算法。无论哪种缩放算法,如果实际宽高比与设计宽高比相同,UI 都会被等比缩放。实际上,Canvas 只是保持自己的大小和设计分辨率一致。如果实际宽高比与设计宽高比不同,这时缩放算法才会影响显示结果。缩放算法有三种:扩展、收缩 和 匹配宽高。扩展算法的逻辑是,扩大 Canvas (在宽高比上)较短的一边,使得 Canvas 宽高比与屏幕一致。如下左图,设计分辨率宽高比为1:1(红色线框),实际屏幕更宽所以 Canvas 的 width 增加以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“开阔”。收缩算法的逻辑是,收缩 Canvas (在宽高比上)较长的一边,使得 Canvas 宽高比与屏幕一致。如下中图,设计分辨率宽高比为1:1(红色线框),实际屏幕更窄所以 Canvas 的 height 减小以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“紧凑”。匹配宽高的算法逻辑是,根据指定的权重,同时调节 Canvas 的宽和高,使得 Canvas 宽高比与屏幕一致。如下右图,设计分辨率为红色线框,设定宽度和高度的权重相等(0.5),实际屏幕上 Canvas 的宽和高都被调整以匹配屏幕。这样的算法目的是,通过可调节的宽高权重,尽可能的保持UI的原始设计。 

Constant Physical Size:通过调节 Canvas 物理大小来维持缩放不变。它的意思是在任何屏幕上不改变 Canvas 的 DPI,而是调节 Canvas 的物理大小总是与屏幕保持一致。这种说法可能比 Constant Pixel Size 更难以理解,实际上他们本质是一样的,只不过 Constant Pixel Size 通过逻辑像素大小调节来维持缩放,而 Constant Physical Size 通过物理大小调节来维持缩放。使用这种模式必须指定一个像素转换物理大小的因数(填写96方便在windows上进行开发)。运行时通过具体设备报告的dpi计算 Canvas 像素大小和缩放系数。这种模式从设计的意图来看,是为了在开发时使用物理单位而非像素单位,这只会让程序和美术的工作变得复杂,实际使用价值并不高。因为开发人员更关心设计的像素分辨率,他们需要绘制明确的像素大小的图片!如果未来开发人员和玩家都使用了超高DPI的显示器,那时或许会更注重物理尺寸。 
Selectable 
可交互UI组件的基类。它负责响应用户的输入,产生视觉变化、切换导航目标 以及 处理通用的UI事件。 
Transition:可交互组件有4种视觉状态:正常(normal), 高亮(highlighted), 按下(pressed)和 禁用(disabled)。Selectable 根据用户的输入和自己当前的状态执行状态切换,切换状态的视觉效果有4种类型:none、color tint、sprite swap 和 animation。使用 animation 效果必须再添加一个 animator 组件,此动画控制器含有上述4种状态。可以通过Auto Generate Animation 按钮自动添加组件并创建动画控制器。 
Navigation:可以使用键盘和游戏控制器切换导航目标,如果你要开发一个仅使用游戏控制器就可以玩的游戏(主机游戏),那么这个功能非常重要,因为玩家没有鼠标也无法使用触摸屏,只能通过按钮来切换导航目标。这个功能被设计的非常完善,以至于你几乎什么都不用做就可以处理的很好。一共有5种导航选项:不使用(None)、水平(Horizontal)、垂直(Vertical)、自动(Automatic)、显式指定(Explicit)。在非显式指定的情况下,导航系统根据每个UI元素的矩形位置和大小,自动查找4个方向上是否存在最合适的切换目标。如果选择显式指定,需要为4个方向指定切换目标(Selectable)。在Inspector 界面点击 Visualize 按钮可以查看导航路径(下图中的黄色线条),在 EventSystems 中可以设置默认选中的对象。 

通用事件:OnSelect, OnDeselect, OnPointEnter, OnPointExit, OnPointDown, OnPointUp, ... 。重写这些方法来定义自己的可交互组件。文末将通过一个例子来说明如何实现自定义控件。 
Auto Layout 
自动布局用于简化UI的布局工作。自动布局基于 RectTransform 的布局系统,包含 布局元素(Layout Elements) 和 布局控制器(Layout Controllers)两个概念。 
布局元素含有 最小尺寸、首选尺寸 和 可选尺寸 这些参数,布局控制器根据这些参数来调整布局元素的大小和位置。布局控制器调整的基本原则是:首先分配最小尺寸,然后如果还有足够空间就分配首选尺寸,最后如果还有空间则分配可选尺寸。一个含有 RectTransform 组件的游戏对象就是一个布局元素。添加某些组件会修改布局元素的参数。LayoutElement 是一个用来修改默认布局参数的组件。布局控制器以多种组件的形式存在,它们控制自身或子级的布局元素的大小和位置。关于各种布局控制器组件的功能和使用方法请参考 Unity 文档。 
Rich Text 
默认情况下一个 Text 组件以单一样式显示所有文本,使用富文本可以让显示样式更丰富,比如高亮部分文本。实际上,富文本功能不仅可以用在 UI 系统,还可以用在 Legacy GUI 系统 和 Debug 中。 
富文本使用方法类似 html 标签,比如 "Hello" 将显示为加粗的 "Hello"。这些标签还可以嵌套使用。可用的标签有 b(加粗)、i(倾斜)、size(大小)和 color (颜色)。其中 size 和 color 必须指定属性值,如:"Hello" "Hello"。size 属性的单位是像素,color 属性使用RGBA格式的16进制表示颜色或直接填写常用颜色名称。下图为使用示例。 

原文地址:https://www.cnblogs.com/x-poior/p/5736601.html