UGUI中RectTransform的使用

Canvas子节点中的GameObject的Transform组件会被被RectTransform(下文简称rectT)组件所代替。可以看到,除了position,rotation,scale“三巨头”之外,还有anchors,pivot以及左上角的框框。
他们代表队是对齐方式
RectTransform组件

首先是默认的对齐方式:我们可以看到,左上角的图标上写着middle,center。
anchors和pivot都是0.5。这个情况最贴近中学所学的平面直角坐标系:
1.已父节点的中心点为原点
2.坐标为x,y
3.宽高为width和height
合起来就是“以父节点中心点为原点,水平和垂直方向分别偏移x和y像素的位置为中心,生成一个宽高为width和height的矩形”
节点
这个例子中,我们把父节点设为红色,子节点设为蓝色,子节点的坐标设为50,100。可以看到蓝色方块的位置水平方向上往右偏移了50像素,垂直方向上往上偏移了100个像素。
例子1
这些都很简单。来说几种类似的对齐方式:
我们点开小框框按钮,里面有9个红色的。中心的对齐方式为上文介绍的默认对齐方式。
周围的“八大护法”,理解上也很简单:
以父节点的“xx”点为原点…(后面的相同)
以左上角的对齐方式为例,就是“以父节点的左上角为原点”
右下角的对齐方式就是“以父节点的右下角为原点”
…以此类推
对齐方式列表
这里再举个例子,假如我们把对齐方式调整为“左上角原点”
那么我闷把坐标设为0,0。矩形的中心就会在父节点的左上角了
例子2
例子2
…这里也非常简单。
引出一个问题,“假如我要子节点的左上角对齐父节点的左上角该怎么办?”,子节点的中心点对齐的确很奇怪,不符合常规情况。
这里就要使用我们刚刚所提到的pivot
pivot定义的是子节点的中心,默认的0.5,0.5代表中间。而我们这种情况下需要把左上角当作中心,就需要把值调整为0,1。就是左上角了。
例子3
例子3
值得一提的小技巧:同时设定pivot
在上面的有一段话:shif: also set pivot
当你在设定的时候按下shift,就会自动生成常用的pivot。上文所说的情况就可以一键设定了。
自动设置pivot
另外,在修改了pivot之后,rotation和sacle的调整也会以新的pivot为中心进行变化。就不贴例子了,有兴趣的朋友可以自行设置一下。

然后就是蓝色的几种对齐方式说明:
最简单,最常用的对齐方式,就是右下角那个十字。
当我们选择后小图标的文字会变成strech,strech。
对应点pos和宽高也变成了left,top,right,bottom。
拉伸对齐方式
这种对齐方式代表的是子节点每条边,对到父节点边上的距离。
全部都是0,就表示和父节点重合,相当于屏幕
假如要用一张图片当黑底,我们就可以使用这种对齐方式:
无论手机的分辨率怎么变化(这也是我们为什么要适配的原因),黑底的大小始终等于屏幕大小。想起有人曾经弄了一个宽高都是99999的图片当背景…哈哈哈
黑底例子
懂了以上例子之后别的就很好理解了。
举个例子:这种对齐方式代表“水平方向是以拉伸的方式对齐”,而垂直方向保持原来的坐标系对齐法则。
即“以父节点的顶部中心为原点,垂直方向偏移y像素,高度为height。左右两边距离父节点的边界为left和right的矩形”
例子4
实际效果:会随着横向变化而拉伸自己,垂直方向始终保持从顶部往下偏移
例子4
基本的使用介绍就到这里。那unity内部是如何实现的呢?会在下一篇文章中介绍。
有错误欢迎指正。

ps:我们为什么需要适配?以下图为例,假如右上角的小地图是以中心为原点进行对齐。那会发生很多奇怪的情况:
屏幕太短看不到;屏幕太长会在中间,挡住视线;分辨率太高地图会很小,分辨率太低地图会很大…
用一套ui解决所有的情况,才是合格的ui仔
实例

猜你喜欢

转载自blog.csdn.net/weixin_39247181/article/details/115414590