首页 > 代码库 > 【Unity3D_UGUI速成班】——05.Rect Transform
【Unity3D_UGUI速成班】——05.Rect Transform
这一节将主要讲述所有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物体的位置改写是很不利的。
【Unity3D_UGUI速成班】——05.Rect Transform