码迷,mamicode.com
首页 > 编程语言 > 详细

【Unity3D_UGUI速成班】——05.Rect Transform

时间:2017-04-03 19:29:44      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:sdn   体系   ott   fonts   组件   高度   尺寸   ugui   不同   

这一节将主要讲述所有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

标签:sdn   体系   ott   fonts   组件   高度   尺寸   ugui   不同   

原文地址:http://www.cnblogs.com/xxxhhhyxy/p/6662988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!