uGUI练习(一) Anchor



一、练习步骤

如果用过NGUI的Anchor,我们知道在2.x的版本有UIAnchor组件(下图左),3.x版本中,每个UIWidget有自带的Anchors(下图右)

uGUI练习(一) AnchoruGUI练习(一) Anchor

而uGUI的Anchor用起来也一样很直观,简单易使用。

1、创建一个新场景,我们创建一个UI/Button

uGUI练习(一) Anchor——>uGUI练习(一) Anchor——>uGUI练习(一) Anchor

2、创建完成后,观察Scene中的情况

uGUI练习(一) Anchor

3、Inspector截图,注意图中框选的部分,对于Anchor很有用。

uGUI练习(一) Anchor

4、在Scene里拖动Button(注意:拖动浅白色圆圈uGUI练习(一) Anchor,而不是uGUI练习(一) Anchor)

uGUI练习(一) Anchor

uGUI练习(一) Anchor

通过上面的拖动观察,我们可以得到,它是先Anchor在中心(0,0,0),然后根据你的拖动而做偏移。

5、在Inspect属性面板中,点击Rect Transform的图标uGUI练习(一) Anchor,弹出如下选项

uGUI练习(一) Anchor

下面我们解释一下这些图形的意思(按住 Alt 显示Position)

uGUI练习(一) Anchor

6、有了上面的概念之后,我们就可以轻松的完成Anchor了,比如我想Anchor在左下角,那我只需要选择 bottom – left

uGUI练习(一) Anchor

7、选择完之后,在场景中可以看到,Button已经Anchor在左下角了,同进看到Anchors下的值也发生了改变。

uGUI练习(一) AnchoruGUI练习(一) Anchor

8、查看Game视图,拉伸窗口不管在什么分辨率下,Button都始终固定在左下角

uGUI练习(一) Anchor

二、完成练习

uGUI练习(一) Anchor

三、Anchor效果

uGUI练习(一) AnchoruGUI练习(一) Anchor



本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/3972656.html,如需转载请自行联系原作者