一.Rect Transform
Rect Transform的作用是用来计算UI的位置和大小的,Rect Transform继承与Transform,具有Transform的所有方法和属性,通过Rect Transform能够实现基本布局和层级控制.学习Rect Transform需要熟悉掌握以下专业术语:
●:Pos X, Pos Y:Pivot与Anchor的距离;
●:Pivot :中心点;
●:Anchor:锚点;
●:Width&Height:宽与高,相对于锚点;
●;Left,Right,Top,Bottom:左右上下;
1.中心点Pivot
指的是U件上的蓝色小圆圈,如下图所示
当鼠标拖动U控件进行旋转、缩放和对齐的时候都会以该点做为对照点.
Pivot的位置在控件的中心时,x=0.5,y=0.5
Pivot的位置在控件的左下角时,x=0,y=0
Pivot的位置在控件的右上角时,x=1,y=1;
点击图示如下图所示:
按下 Shift键可以设置 Pivot的位置,确定 Pivot的位置,再配合 RectTrans继承于 Trans
form中Posx,PosY的值,可以让控件的 Pivot和其父物体的锚点对齐。
2.锚点Anchar
锚点表示的是控件上的某一个点,U画面进行缩放时,该点到其子控件上四个控制点
的距离保持不变,锚点的形状如下图所示:
1、四个锚点,相对于四根钉子,钉在image父级元素上。
2、四个实心蓝点,相当于四个纽扣,缝在Image的四个边上。
3、锚点和纽扣之间被四根无形的钢丝链接,注意是钢丝,因为不会伸缩。
4、如果把Image调整好了大小,现在想让他随着屏幕的变化进行缩放,那么就把四个锚点,拖拽到四个纽扣上,相对于把Image
的四个角钉在了父级元素上,父级元素缩放就会拽着Image进行缩放,比例是一致的。
5、锚点合并在一起,相当于把Image四个角往同一个方向拽,所以不会改变Image的大小。
二.Canvas的三种渲染模式
什么是Canvas
使用UGUI来进行UI开发,离不开Canvas组件,所有的 UI 元素,要么自己包含 Canvas 组件,要么是 Canvas 组件所在 GameObject 的子节点。
如何创建 Canvas
你在 Hierarchy 视图创建任何一个 UI 元素(比如Image)都会自动生成一个 Canvas 作为它的父节点。你也可以可以直接创建一个 Canvas,然后添加其他 UI 元素作为其子节点。
Canvas 组件的RenderMode 参数
Canvas 组件的参数 RenderMode,有三个选项:Screen Space - Overlay、Screen Space - Camera、World Space。
Screen Space - Overlay 模式
Canvas 覆盖屏幕,且永远覆盖在其它元素的上层,也就是说 UI 会遮挡场景中的其它元素。
Screen Space - Camera 模式
和 Overlay 模式相仿,Canvas覆盖整个屏幕空间画布也是填满整个屏幕空间。不同之处在于,Canvas 被放置于指定摄像机的前方。
World Space 模式
此种模式下,Canvas 与场景中其它3D元素没有区别,相当于GameObject,可以进行旋转,移动等操作
三.UGUI布局组件
1. Horizontal Layout Group水平布局
Padding:Layout边缘的间隙;
Spacing:Layout元素之间的间隙;
Child Alignment:子元素的对齐方式,就是文字对齐的那九种,不多说了;
Control Child Size:是否会控制子元素的宽高,只有启用该选项Layout Element的设置才会起作用;
Child Force Expand:是否强制子元素扩张以填满多余空间,该选项不受Flexible属性的影响,并且优先级比Flexible属性高,以1:1的比例进行分配。
2. Vertical Layout Group垂直布局
与水平布局无异
3. Grid Layout Group网格布局
adding:Layout边缘的间隙;
Cell Size:每个元素的尺寸,该值会控制子元素的宽高;
Start Corner:第一个元素所定位角落;
Start Axis:排列方式,一种水平、一种垂直;
Child Alignment:对齐方式,九种;
四.ScrollBar
handle rect:(父节点矩形)
用于控件的滑动“句柄”部分的图形;
Direction:(方向)
拖动手柄时,滚动条的值将增加的方向。选项是从左到右,从右到左,从下到上和从上到下;
Value:(值)
滚动条的初始位置值,范围为0.0到1.0。
Size:(大小)
滚动条中手柄的小数部分,范围为0.0到1.0
Number Of Steps:(位置数)
滚动条允许的不同滚动位置数。
五.ScrollView
在游戏中经常遇到一些拖动滚动的效果,比如好友列表,游戏商店分类等等,要想实现这些功能就需要使用到ScrollView拖动效果了
层级识图如下图所示:
Viewport:显示内容
Scrollbar Horizontal:水平方向滚动条
Scrollbar Vertical:垂直方向滚动条
ScorllRect组件
Content:可滑动的区域
Horizontal:控制是否可以横向拖动;
Vertical:控制是否可以纵向拖动;
Movement Type:三种弹性类型;[不限制 -- 弹性 -- 不动]
Elasticity:弹力大小
Inertia:惯性;
Deceleration Rate:减速的速率
Scroll Sensitivity:滑动的灵敏度
Horzontal Scrollbar:横向滑动条
Vertical Scrollbar:竖向滑动条
normalizedPosition:滚动视图所处的位置,值的范围为(0,0)--(1,1);
VerticalNormalizedPosition:滚动视图竖直方向上的位置(0--1);