码迷,mamicode.com
首页 > 其他好文 > 详细

UGUI RectTransform详解

时间:2015-12-17 00:37:57      阅读:817      评论:0      收藏:0      [点我收藏+]

标签:

UGUI RectTransform.Unity RectTransform详解

The first:look look API.

http://docs.unity3d.com/ScriptReference/RectTransform.html

在新的UI系统中,无论ButtonTextImageToggle等组件,都是基于RectTransform进行布局的。

你可以不知Button为何物,不知Text为何物,不知Image为何物,但是一定要知道RectTransform

Unity4.6引入的新的UI坐标系,它在新的UI系统中扮演了极其重要的角色。

 技术分享

它的属性有anchoredPosition,anchorMax,anchorMin,offsetMax,offsetMin,pivot等。

干说是比较难以理解RectTransform的表面与内在联系的。那么我们就用最直接的图文代码方式来解释它各个属性之间的联系。

新建一个场景,其UI关系如下图,这个场景中我们要实验的对象就是参考按钮。

父容器是BaseBox,子对象是白色的Button。

 技术分享

首先 我们来验证按钮的anchorMax,代码如下:

        if (isTween)

        {

            Vector2 value = btnRect.anchorMax;

            value += new Vector2(0.01f, 0.01f);

            btnRect.anchorMax = value;

            btnText.text = btnRect.anchorMax.ToString();

        }

它的作用很明显当isTween为true时候,请注意下图中的anchorMax值将会不断叠加。而anchorMin却不动丝毫。

所以我们可以理解为,图中白色按钮的左下角表示anchorMin,而变化的右上角自然就是anchorMax

通过这两个点各自的XY值,我们可以确定这个UI对象在整个父容器当中的尺寸比例。

记住,是比例,当你切换回Scene场景就可以看到!

技术分享

技术分享

//////////////////////////

同样的方式再看anchorMin

当isTween为true时候,我们的anchorMin值将会不断减小。

 

        if (isTween)
        {
            Vector2 value = btnRect.anchorMin;
            value += new Vector2(0.001f, 0.001f);
            btnRect.anchorMin = value;
            btnText.text = btnRect.anchorMin.ToString();
        }

请注意下图中Anchors Min的值和按钮的变化。原理同上面的anchorMax.不再重复表述。

技术分享

 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 接下来,我们再看anchoredPosition。

        if (isTween)
        {
            Vector2 value = btnRect.anchoredPosition;
            value += new Vector2(1, 1);
            btnRect.anchoredPosition = value;
            btnText.text = btnRect.anchoredPosition.ToString();
        }

请注意下图中按钮的最低点【Left-Bottom】和最高点的【Right-Top】参数进行等比例变化。

但是却不会影响anchorMax,anchorMin的锚点比例变化。所以修改他是不会影响UI对象在父容器中定义的占比尺寸。

通过这个例子,我们知道了anchoredPosition的作用就是修改UI对象的2维坐标位置。

技术分享

 

我们再往下看看offsetMax,演示代码如下下

        if (isTween)
        {
            Vector2 value = btnRect.offsetMax;
            value += new Vector2(0.1f, 0.1f);
            btnRect.offsetMax = value;
            btnText.text = btnRect.offsetMax.ToString();
        }

通过下图的结果,我们确定了offsetMax起作用就是改变按钮的最高点【Top-Right】的值。

而相应的最低点却没有同比例调整,那么必然导致UI对象尺寸的改变。

但是对UI对象的anchorMax,anchorMin锚点确实没有任何影响的。

通俗的理解就是通过溢出自身的anchorMax,anchorMin定义的占比边界来改变尺寸。

技术分享

为了说明offsetMax的改变对anchorMax,anchorMin是否有影响,我们在看一下Scene中当时的情况。

技术分享

没错,UI对象确实变了尺寸,但是对anchorMax,anchorMin半毛钱的影响都没有。

下面顺便再配上offsetMin的演示:

 

        if (isTween)
        {
            Vector2 value = btnRect.offsetMin;
            value += new Vector2(0.1f, 0.1f);
            btnRect.offsetMin = value;
            btnText.text = btnRect.offsetMin.ToString();
        }

 

结果如下图 我们确定了offsetMin起作用就是改变按钮的最低点【Bottom-Left】的值。

技术分享

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

通过上面的演示,我们可以确定锚点的变化是会影响按钮尺寸的,而按钮的尺寸变化却不会影响锚点。

anchoredPosition的变化是需要offsetMax,offsetMin共同配合实现。

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

往下再看pivot

        if (isTween)
        {
            Vector2 value = new Vector2(Random.Range(0.1f, 0.9f), Random.Range(0.1f, 0.9f));
            btnRect.pivot = value;
        }

这个概念很简单就是UI元素的轴心点,UI元素想怎么Rotation都要围绕轴心点来运动。直接看演示图:

我们把pivot 的值进行了随机,在Scene场景中的pivot圆圈圈就是这么疯狂了。此处略过3千字。

技术分享

 

最后我们要说的就是sizeDelta

        if (isTween)
        {
            Vector2 value = btnRect.sizeDelta;
            value += new Vector2(0.1f, 0.1f);
            btnRect.sizeDelta = value;
            btnText.text = btnRect.sizeDelta.ToString();
        }

这是个什么东东,我们看演示图吧。

技术分享

那么他在Scene场景中真实的状态是什么样的呢?看下图

技术分享

你没有看错,Anchors没有任何变化,他只是改变了自己的尺寸而已,

他的变化依然要通过修改offsetMax,offsetMin实现。所以大家应该明白,sizeDelta和offsetMax,offsetMin是存在必然联系的。

关系就是:btnRect.sizeDelta=btnRect.offsetMax-btnRect.offsetMin;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

小小的一个RectTransform,这里面的关系还是有点意思。大家多多思考。

本篇完结,纯属个人理解,如有错误,欢迎大家指出修正。

 

UGUI RectTransform详解

标签:

原文地址:http://www.cnblogs.com/2Yous/p/5052723.html

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