Unity3D_UGUI速成班——05.Rect Transform

Posted 2020-09-08

这一节将主要讲述所有UGUI物体的排布属性RectTransform，熟练运用这个组件，能够让你的UGUI Demo永远排布美观。

5. Rect Transform

对于任意创建好的UGUI物体，它的位姿属性全由RectTransform决定，这和一般的GameObject物体由Transform决定有所区别，本节以Image为例：

 

每次创建UGUI控件，画布上都还有四片三角形组成的图案，其实那是4个Anchor（锚点），每个三角形都可单独拖动，默认会出现在该UGUI物体的父物体的正中央。

①  Anchor Presets-这是左图被红框圈起的部分，只有点开来才能看明全貌。通过它可以直接强行定位Anchor的排布。

 

A） 将4片Anchor分为左右两组，则横向上可以将之都分布在极左、正中、极右，或者左右各安置一组；将锚点分为上下两组，则纵向上可以将之都分布在最上、正中、最下，或者上下边各一组。——这里的极左、极右等等指的都是父物体的边界。

4*4=16，所以锚点有16种极端排布的样式，正如上图所示。

B）选中不同排布时，黄色框内的东西会不一样：

    当选中左上方的9中排布方式时，4片Anchor是聚拢在一起的，此时可以调整Image中心相对于Anchor的坐标（PosX,PosY,PosZ）和其尺寸（Width，Height）。

    当选中最右一列的排布方式时，4片Anchor将会左右分离，因此Anchor不再具有确切的X坐标，Image的宽度将由其左右边界到两边Anchor的横向距离（Left，Right）决定。

    当选中最下一行的排布方式时，4片Anchor将会上下分离，因此Anchor不再具有确切的Y坐标，Image的高度由其上下边界到两端Anchor的纵向距离（Top，Bottom）决定。

  

 

② Anchors-这是当前UGUI物体的Anchor所框选的区域，相对于父物体边界的比例值。

下图中的Min X=0，Y=0；Max X=0，Y=1是对应上方右边图片的值。代表Anchor分为上下两组，形成一条和父物体左边界重合的竖线。

 

倘若要制作一个纵向手机APP的Title，可以尝试将

Min X=0，Y=0.9；Max X=1，Y=1，然后由于四片Anchor完全分开，所以可以将Image的Transform值手动地设置为（Left，Right，Top，Bottom）=（0,0,0,0）。结果将如下图所示：

 

③  Pivot-中心点，代表的是该UGUI物体的中心位于何处，当四片Anchor聚合在父物体正中央时，在Game视窗中的Image，其高度宽度都是250。

左边图是Pivot X=Y=0.5的情况；右边是Pivot X=0.5，Y=1的情况，Pos Y已经被莫名其妙改成了125，也就是高度的一半。

Pivot默认在UGUI空间的正中央，Y=1会强制将中心店上移至顶端，所以出现了这类情况。

    

 

④  Rotation和Scale，与常规的GameObject并无出入。

     但是这里建议大家不要乱动Scale，因为UGUI物体的尺寸完全可以由Width、Height之类的东西来改变。Scale和Width、Height是完全独立的两套体系，改动Scale将会使UGUI物体在程序内部和显示上出现矛盾。例如将Scale的X设为2，肉眼可见图片宽度成为原先的2倍，但是上方的Width却没有改变，这对于日后UGUI物体的位置改写是很不利的。