Unity-UGUI基础

一.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。


Canvas 的 RenderMode 参数

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的比例进行分配。

Horizontal Layout Group水平布局

2. Vertical Layout Group垂直布局

与水平布局无异


 Vertical Layout Group垂直布局

3. Grid Layout Group网格布局


Grid Layout Group网格布局

adding:Layout边缘的间隙;

Cell Size:每个元素的尺寸,该值会控制子元素的宽高;

Start Corner:第一个元素所定位角落;

Start Axis:排列方式,一种水平、一种垂直;

Child Alignment:对齐方式,九种;

四.ScrollBar


ScrollBar组件属性

handle rect:(父节点矩形)

用于控件的滑动“句柄”部分的图形;

Direction:(方向)

拖动手柄时,滚动条的值将增加的方向。选项是从左到右,从右到左,从下到上和从上到下;

Value:(值)

滚动条的初始位置值,范围为0.0到1.0。

Size:(大小)

滚动条中手柄的小数部分,范围为0.0到1.0

Number Of Steps:(位置数)

滚动条允许的不同滚动位置数。


五.ScrollView

在游戏中经常遇到一些拖动滚动的效果,比如好友列表,游戏商店分类等等,要想实现这些功能就需要使用到ScrollView拖动效果了


ScrollView创建后的效果

层级识图如下图所示:

Viewport:显示内容

Scrollbar Horizontal:水平方向滚动条

Scrollbar Vertical:垂直方向滚动条

ScrollView的层级视图

ScorllRect组件

Content:可滑动的区域

Horizontal:控制是否可以横向拖动;

Vertical:控制是否可以纵向拖动;

Movement Type:三种弹性类型;[不限制 -- 弹性 -- 不动]

Elasticity:弹力大小

Inertia:惯性;

Deceleration Rate:减速的速率

Scroll Sensitivity:滑动的灵敏度

Horzontal Scrollbar:横向滑动条

Vertical Scrollbar:竖向滑动条

normalizedPosition:滚动视图所处的位置,值的范围为(0,0)--(1,1);

VerticalNormalizedPosition:滚动视图竖直方向上的位置(0--1);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352