详解Unity 4.6新UI的布局

本文所讲的是Unity 4.6中新加入的uGUI，官方称Unity UI，而不是过去的OnGUI式的旧UI（官方称Legacy GUI）。

我曾经在8月份对照4.6 Beta的文档写过一篇笔记学习Unity 4.6新GUI系统，但对Anchors不够深刻，并且有了一些API上的变化。下面就是我对新UI布局的理解，以及最后Canvas Scaler组件的介绍。

放置任意一个UI元素到场景中，首先能够看到自动建立了一个Canvas对象；另外这个元素必定会拥有一个Rect Transform组件。

Rect Transform是专为UI元素准备的，它的一个重要属性就是锚点Anchors，用于指定自身相对父级的布局。对于这个UI元素，它的父级就是Canvas。锚点一共有四个，分别对应自身矩形的四个顶点。在父级元素形状发生变化时，四个锚点到四个顶点的偏移offset不变。

咱们能够直接在场景中拖动锚点来设置，拖动时有数值显示，很是直观。但有时候咱们但愿更精确一点。注意到四个锚点能够汇集在一点，也能够在一条线，也能够分散成矩形。这样，它们的位置总能由两个点来肯定，就是图中Anchors下面Min和Max两个属性。Min表明更左边、更下边的点，Max表明更右边、更上边的点。数值范围是0~1，以左下为(0,0)，右上为(1,1)。图中的锚点能够看出就是矩形的中心。

其实经过左上角你已经能够直观看出锚点的位置了。点击左上角能够弹出一个菜单，这里是Unity预置的几种布局。有固定在一点的，也有在一条边上的，还有更加自由的布局。肯定一种模式后，右边的属性也会随之变化，方便你调整元素的大小或偏移。

在固定在一点的模式下，元素的形状不变，位置随这一点变化。因此能够指定它的两个坐标轴的偏移Pos X和Pos Y。Pos X和Pos Y均为0时，元素的支点和锚点重合。由于大小不变，能够指定宽和高。效果以下图：

固定在一条边的状况下，元素的形状和位置都可能发生变化。如下图的固定在下边为例，受偏移量影响，它的宽会变而高不变。因此它能够设置的属性是Left、Right、Pos Y、Height，分别表明元素左（右）边距离父元素左（右）边的距离，支点距父元素下边的偏移、元素的高度。

注意无论是Left、Right仍是Top、Bottom都是以元素的边为准，而Pos X和Pos Y则是以支点为准。

这种固定在边的两个顶点上的模式，这条边会显示为stretch。若是把锚点从顶点移开，则会变为custom。对于custom，当父元素形状变化时，元素自身会按比例变化。效果如图所示：

若是在两个坐标轴上都用custom，那么元素就能在不一样的屏幕上显示相似的大小。如下图为例，若是想让Logo（Image对象）显示在屏幕中上部分，而且在不一样分辨率下占据的比例都相同，就能够设置为custom，将锚点框住想显示的位置，并将上下左右边距都设为0，就能达到这种效果。

最后介绍一下Canvas Scaler这个组件。能够在Canvas上经过Add Component找到这个组件。

这个组件有三种模式：

• Constant Pixel Size
• Scale With Screen Size
• Constant Physical Size

选择Scale With Screen Size并设定默认分辨率，其余分辨率下的UI就会经过设定的分辨率拉伸获得。并且Canvas也会调整到默认分辨率大小，方便UI设计。应该算是一个偷懒的方法吧。在4.6 Beta中，曾经有个Reference Resolution组件，如今已经被它替代了。