UGUI

Text：

RichText：在文本框中输入“My name is <color="red">MrZivChu</color>”，可以看出如下效果：

此时，我们来改变下文本的颜色，可以看出嵌入在html语法中的文字没变色，不受影响，只受html语法控制，而没嵌入的文字变了色：

Horizontal Overflow：值为wrap表示输入的文字会根据输入框的大小自动换行来填充文本框，超出的文字将会隐藏：

值为overflow表示只在一行显示，超出的文字也显示

Vertical Overflow 垂直方向同理！

一般这两个选项选择第一个值即可！

Best Fit表示让输入的文字自适应文本框的大小，也就是说在文本框内输入的文字过多的时候，文字的字体大小会缩小，以保证所有文字都能显示出来！

使用Best Fit的前提是Horizontal（wrap）和Vertical（Truncate） Overflow都选择第一个值！

上面的例子都是文本框固定大小的，是改变字体大小来适应输入框的！

下面的例子会提到用Content Size Fitter组件来改变输入框的大小来适应文字，保证文字字体的大小不改变！

Image：

如果图片需要使用到shader，那么可以给图片添加材质，但是材质的纹理属性将会被疏略，Unity提供了许多能被UI系统使用的shader

1、Scene场景下，配合鼠标，并使用下面的键来缩放图片：

按住ctrl键：通过改变图片的宽高来保持图片的面积不变

按住shift键：图片进行等比例缩放

按住alt键：拖拽图片左/右边框，图片会进行左右同大小的缩放，图片上下不变，拖拽图片上/下边框同理

2、Perserve Aspect 不管怎么缩放图片，都保持图片宽高比不变

3、Set Native Aspect 应用图片原本的大小

4、不改变图片的边框的大小的方法：

（1）把图片的模式设为Sliced

（2）在图片的属性面板中点击Sprite Editor,打开精灵编辑面板，设置好border区域即可！

Sliced意味着图片会以九宫格的方式显示，九宫格精灵会被分成9个方格，方格外部片段不会被拉伸，仅拉伸中间部分，使得拉伸的时候边缘不会失真！这些片段在SpriteEditor中Border组可以设置

5、创建带alpha透明通道的图片

6、Fill Center(只在图片模式是Sliced，Tiled下才有)：表示是否显示九宫格的中心区域，不显示的话，那么就可以只显示精灵的border

  

7、Clockwise（只在图片模式在Filled，并且Fill Method为Radial才有），当勾选与不勾选时的效果如下：表示顺时针还是逆时针

Image Type：

Simple：简单图片形式

Sliced：边框不变，内容放大，用于不改变图片边框的大小

Tiled：平铺

Filled：用于旋转图片，90°，180°，360°

Button：

Interactable：使按钮变灰，以示此按钮不可点

Disabled Sprite：一直不明白什么时候才触发不可用图片的显示呢？原来是当Interactable选中的时候就出发了！

color multiplier：彩色乘法器（只在Transition为Color Tint下才有），数值越高，按钮的颜色越淡，反之，越深

Transition为Animation时，点击Auto Generate Animatior就可以自动创建四个动画文件，然后自己就可以编辑动画了

Fade Duration：为渐变时间，就是说假如按钮正常状态下是白色，高亮设置的是红色，Fade Duration设置的是0.1s，那么当鼠标移到鼠标上去，按钮会从白色变为红色的时间为0.1s

锚点、中心点：

存在全局空间和本地空间上的编辑的区别：

当在本地空间上编辑UI元素时，矩形和柄与UI元素对齐

在全局空间下，矩形与柄全局方式对齐，矩形表示UI元素的边界

 另一知识点：

Left、Top、Right、Bottom分别表示的值是什么呢？

 

49、70、61、69这四个数值表示的是蓝线的长度

比如Top的值表示的是上锚线和矩形上边框的距离

通常锚线有四条，但只有一条时，情况就不同了

 

此时、RectTranform也是不同的

PosY表示的是上锚线与UI中心点的距离，Left和Right则表示的是左右锚线与UI左右边框的距离（虽然此时的左右锚线长度为0）

多数情况下，每个UI元素将被锚定到父对象，也就是说，当一个对象被创建时，此对象锚点的位置是基于其父对象的区域来设置的，锚点的位置是不会超过父对象的矩形区域的！

锚点

UI元素的父对象都会拥有RectTransform组件，并且UI元素会以某种方式相对父对象锚定位置

什么是锚点？

创建一张图片，如下

四个红色箭头指向的三角形形状的东西就是锚点，我们可以随意拖动锚点，那么锚点有什么用呢？用一张图来表示吧

控件左上顶点对于左上锚点，左下顶点对于左下锚点，右上顶点对于右上锚点，右下顶点对于右下锚点

控件的每个顶点与对应的锚点之间的距离长度（不是比率）不随屏幕尺寸而变化

直接上个例子，使其更加了解锚点的作用

从上面的动画可以看出，当我们的屏幕高度发生变化时（变窄），图片的下半身区域被遮挡了，这是由于锚点的作用引起的，

可以看出无论我们怎么改变屏幕的尺寸，控件的四个顶点与对应的锚点之间的距离长度（不是比率）是不变的！

当我们屏幕的高度变窄时，为了保证四个顶点与对应锚点的距离长度（不是比率）不变，必然会造成被遮挡，

我们可以改变锚点的位置，无论屏幕尺寸怎么变，控件都不会遮挡

可以看出，图片进行了相应的缩放来保证四个顶点与对应锚点的距离长度（不是比率）不变

这一作用可以用于背景图片的自适应：

通常控件的锚点初始的时候是放在自己父对象的中心点位置的，向下面这样锚点在中心位置是无法自适应屏幕的：

只要这样就可以了：

新建一个按钮控件，可以看到按钮下的Text控件的锚点是分布在按钮Button的四个顶点上的，为的就是使Text控件适应Button控件的大小的！

锚点设置：

1、第一种方式（比较麻烦）

这四个值控制的是锚点在其父对象中的位置的，四个值都为0.5，表示锚点在父对象中心的位置，是百分比形式，归一化展示

Min(x，y)：控制的是左下角锚点的位置    Max(x，y)：控制的是右上角锚点的位置

2、我们也可以通过下面这个来直接设置锚点（比较快速，都是常见的锚点设置选项）

另外：

 

UI元素的锚点是和其父对象的矩形之间的距离是成比率进行缩放的

而UI元素的锚点和其自身的矩形之间的距离是按具体距离进行定位的，而不是比率

如果四个锚点聚集在一个点上时，那么此UI元素的大小不会随着屏幕的尺寸变化而变化的，保持原大小

如果四个锚点分开，那么UI元素的大小会随着屏幕的尺寸进行缩放，具体看锚点的摆放位置

但只要记住UI元素的锚点和其父对象矩形的边框之间的距离是成比率的关系以及元素锚点和自身矩形之间的距离为一个固定值的关系就可以了！

一般把四个锚点放在UI元素相对应的四个顶点上就可以使UI元素自适应于父对象了！为此，我们做个自适应的登陆界面：

问题：当分辨率非常小的时候，文字会无法显示，因为文字不会自动缩放，

解决方案：勾选Text组件下的BestFit，设置MinSize为3，MaxSize为40即可！就可以做到文字自适应了！

中心点

解决中心点无法拖拽的问题？

这样设即可！

中心点并不一定要设置在UI元素的矩形内，可以放在矩形的外面从而实现特殊的效果，但并不常见

中心点设置的是如下的值

当我中心点设置为（0,0）的时候，那么中心点会位于控件的左下角的位置，此时我们旋转图片，可以看到图片是绕着左下角的中心点来旋转的，具体就不演示了！

如果中心点设置为（0,0.5）的时候，我们改变控件的scale的x值，可以发现控件是朝右进行拉伸，改变scale的y值，控件却是朝上下两边拉伸的，效果如下：

另一个例子，新建一个Text控件，附个Content Size Fitter组件，并设置Vertical Fit为Preferred Size，也就是垂直方向自适应，

那么此组件就会自动调整文本框垂直方向的大小来适应文本框内的文字，此时也会提示“一些值被此组件所控制”，由于控制的垂直方向，

所以锚点只会对控件的x轴方向进行控制，y轴方向就不会控制了！

如果中心点的位置为（0.5,0.5）的话，那么Text里面的文字多的时候，会向上下两边扩充，而中心点位置为（0.5,1）的话，就会往下边扩充，效果图如下：

   

还有个例子，通常一个对象的自身坐标是在此对象的中心位置那，如果有这样一个需求，一个转盘上的箭头绕转盘中心点旋转，但是箭头的自身坐标点在自己的中心点，

那么transform.Rotate(Vector3.forward * Time.deltaTime * 50);这样的话，只会使箭头绕自己的中心点转，而不会使箭头绕转盘的中心点转，

解决方案就是：改变箭头的中心点Pivot，把Pivot设为(0.5,0)即可！

 这两个的作用分别如下（个人认为基本上用不着）：

Canvas：

所有UI元素都必须是Canvas的子物体，同一个场景允许存在多个Canvas

Receive Events：表示此UI是否接受事件检测

Sorting Layer和Order in Layer：用于控制场景里面多个Canvas之间的渲染顺序

Render Mode：

Screen Space - Overlay：表示UI不受任何摄像机影响，即使摄像机不存在也没事，照样显示，UI会覆盖整个场景，所有的UI元素会在场景的最上层渲染输出

                                    在这个模式下，UI会自动填充整个场景，同时也会随着场景试图大小变化而变化，也就是说，无论你选择哪种分辨率，UI都会自适应

                                    Canvas会影响整个RectTransform，RectTransform处于不可编辑状态，Canvas会自动修改RectTranform的值使之自动填充整个场景

                                    Pixel Perfect：选中表示UI元素渲染输出时，会自动吸附到最近的像素点，在某些情况下，会增强UI的展示效果

                                    适合于做玩家的血条和魔法条等UI

Screen Space - Camera：要指定一个渲染的摄像机，那么UI就受此摄像机的影响了，如果摄像机关闭了，UI也就不会显示了！

                                    此模式也是Canvas会影响整个RectTransform，RectTransform处于不可编辑状态，Canvas会自动修改RectTranform的值使之自动填充整个场景

                                    如果Render Camera为null的话，Canvas就会默认以Screen Space - Overlay的模式来渲染这个Canvas

                                    Plane Distance可用来调整摄像机与UI的距离，但是这个值必须在摄像机的渲染氛围内

                                    此时的摄像机会和UI保持一段的距离，在此距离内可以放置一些粒子效果，来增强UI的炫目感

                                    适合于做带有例子特效的绚丽UI

World Space：会把UI当成一个3D的游戏物体来对待，那么当我们移动摄像机的位置后，UI是不会移动的！

                     并不像前两者那样，移动摄像机，UI跟着移动，从而能够一直看到UI，相当于UI是摄像机的子物体一样

                     Canvas不再影响RectTransform，Canvas可以位于世界坐标系下的任意位置

                     但这有一个好处，可以造成3D的UI效果，如下：

拖拽所触发的事件：

获取RectTransform的宽高，只能在此对象创建之后的下一帧去获取才能获取到、有时候sizeDelta获取不到，可以通过Layout Group组件的preferredHeight属性来获取即可！

转载于:https://www.cnblogs.com/MrZivChu/p/ugui.html