Unity&UGUI

　　UI：User Interface 用户交互接口，处理用户与程序直接的交互

　　新建一个UI控件，都会同时新建两个物体：

　　　　--Canvas：画布，所有的UI控件都必须放到画布上

　　　　--EnventSystem：事件响应系统，有了它，用户才能与Canvas上的元素进行交互

1.Text

　　1.Text是用来显示一段文本的控件

　　　　

　　2.常用属性：

　　　　--Text：修改Text中的内容

　　　　--Character：文件常见设置

　　　　　　--Font：字体

　　　　　　--FontStyle：字体样式（斜体、粗体）

　　　　　　--FontSize：字体大小

　　　　　　--LineSpacing：行间距

　　　　　　--RichText：富文本：允许一个Text中的内容进行不一样的效果展示。如果打开，允许解析文件中的html标签来进行界面展示；如果关闭，会将文字中的html标签原样输出

　　　　--Paragraph：段落设置

　　　　　　--Alignment：校准（对齐方式）

　　　　　　--Horizontal Overflow：（水平溢出）

　　　　　　　　--warp：如果文字水平方向超出Text的范围，那么自动折行　　

　　　　　　　　--overflow：如果文字水平方向超出Text的范围，超出范围显示

　　　　　　--Vertical Overflow：（垂直溢出）

　　　　　　　　--Truncate：超出部分不再显示

　　　　　　　　--overflow：超出部分正常显示

　　　　　　--Best Fit：（文字大小，自适应：Text中文字的大小根据Text的大小自动匹配）

　　　　　　　　--Min Size：字体能够缩小的最小值

　　　　　　　　--Max Size：字体能够放大的最大值

　　　　2.Image

　　1.是用来显示图片的：推荐使用png格式（R,G.B,A），Jpg（压缩图片），tga（无压缩图片，主要用来做法线贴图）

　　2.常见属性：

　　　　

　　　　Source Image：需要展示的图片

　　　　color：颜色

　　　　Marerial：材质

　　　　Raycast Target：接收射线

　　　　Image Type：

　　　　　　--Simple：将图片填满Image

　　　　　　--Sliced：按照原图比例进行缩放

　　　　　　--Tiled：平铺

　　　　　　--Filled：填充

　　　　Fill Method：填充方式

　　　　Fill Origin：填充起点

　　　　Fill Amount：填充比例

　　　　clockwise：顺时针（从小到大）

　　　　Set Native Size：设置为图片初始大小

　　　　

　　　　SpriteMode：可以将一张图片分割为多个Sprite Image

　　　　Sprite Editor：编辑切割

　　　　

　　　　Type：（切割类型）

　　　　　　Automatic：通过图片的通道自动切割

　　　　　　Grid By Cell Size：通过自定义每部分的大小来切割

　　　　　　Grid By Cell Count：通过自定义总体的数量来切割，切割后可以通过点击某一块来修改这一块的边框

　　　　

　　　　Filter Mode

　　　　　　--Point：将原图中的一个像素点等比例展示到image中，可能会有锯齿感

　　　　　　--Billnear：四顶点，将需要展示的像素块和上下左右四个像素块的颜色做一个平均，将这个平均的颜色展示到Image上

　　　　　　--Trilinear：八顶点，将需要展示的像素块和周围八个像素块的颜色做一个平均，将这个平均的颜色展示到image上

　　　　3.RawImage

　　1.是用来展示图片的，和Image的区别：

　　　　--Image要求展示的图片是Sprite类型的，而RawImage展示的图片是Default

　　　　--RawImage只能展示整张图片

　　2.属性

　　 

　　　　UV Rect：可以通过UV坐标，来控制RawImage显示的内容

　　　　　　W/H：用来控制图片的大小，范围时0~1；

　　　　　　X/Y：用来控制显示图片的位置

4.Button

　　1.是一个按钮，可以接收用户的点击行为。功能：注册，登录等

　　2.属性

　　　　

　　　　--Interactable：是否可交互

　　　　--Transition：（转换）

　　　　　　color Tint：允许在不同的状态下修改按钮的颜色；

　　　　　　Normal Color：正常状态下的颜色

　　　　　　Highlighted Color：高亮状态下的颜色

　　　　　　Pressed Color：点击状态下的颜色

　　　　　　Disabled Color：禁用状态下的颜色

　　　　　　Color Multiplier：是每个状态下的颜色变亮（颜色*值）

　　　　　　FadeDuration：每个状态之间进行过渡的时间

　　　　　　Sprite Swap：在不同状态下切换不同的图片，normal状态的图片设置，在Image中进行设置

　　　　　　Animation：在不同状态下切换不同的动画

　　　　　　5.Toggle

　　1.是一个选项框

　　　　如何做单选：

　　　　　　--在Canvas下新建一个EmptyObject

　　　　　　--给EmptyObject添加一个一个组件：Toggle Group

　　　　　　--依次给每个需要放到单选列表中的Toggle设置group属性为空物体

　　　　　　--Is On取消勾选

　　　　　　--Allow Switch Off勾选（表示选项框最多只有一个选择，可以不选）

　　2.属性：

　　　　

　　　　--Lable：用来控制选项框右边的文案

　　　　--Background：对勾的背景

　　　　--CheckMark：控制对勾样式

　6.Slider

　　1.是一个滑块

　　 2.属性：

　　　　

　　　　--Background：滑块的背景

　　　　--Fill：滑块的填充区域

　　　　--Handle：滑块控制按钮

　　　　--Direction：滑动的方向

　　　　--Min Value：最小值

　　　　--Max Value：最大值

　　　　--Whole Numbers：以整数移动

　　　　--Value：当前的值

7.Scrollbar

　　　　1.概念：滚动条；当一个视图显示不了太多内容的时候，需要滚动显示，在滚动过程中，出现的指示器就是滚动条

　　　　2.组成部分：Scrollbar-->Image 滚动条的背景

　　　　　　　　　　Handle-->Image 滑块的背景

　　　　3.属性

　　　　　　

　　　　　　　　Direction：方向

　　　　　　　　Value:滑块当前值

　　　　　　　　Size：滑块的大小

　　　　　　　　Number Of Step：滑块从最小值滑到最大值，需要径路多少步，从2开始，步数才有意义

　　　　　　　

　　　　　　　　content：可滚动的内容

　　　　　　　　Horizontal：是否启用横向滚动

　　　　　　　　Vertical：是否启用垂直滚动

　　　　　　　　MovementType：当内容移动超出滚动直线时使用的行为

　　　　　　　　Elasticity：当内容移动超过滚动直角时使用的弹性量

　　　　　　　　Inertia：运动惯性是否启用

　　　　　　　　Deceleration Rate：运动减速的速度

　　　　　　　　Scroll Sensitivity：对滚轮和轨迹盘滚动事件的敏感度

　　　　　　　　viewport：引用作为RectTransform内容父项的视口RectTransform

　　　　　　　　HorizontalScrollBar：可选的Scrollbar对象链接到ScrollRect的水平滚动

　　　　　　　　VerticalScrollBar：可选的Scrollbar对象链接到ScrollRect的垂直滚动

8.InputField

　　1.输入框：允许用户输入一些内容

　　2.结构：

　　　　placeholder：当输入框中没有任何文字的时候，显示出来给用户的提示信息

　　　　Text：输入框中需要显示的内容，用户输入的内容

　　3.常用属性：

　　　　

　　　　--Character Limit：最大字符限制；0表示不限制

　　　　--Contet Type：输入内容的样式（限制输入内容格式）；表示这个输入框中文字的类型（如果在手机上，则弹出键盘的样式不一样）

　　　　--Placeholder：设置字体

　　　　--Caret Blink Rate：光标闪烁频率

　　　　--Caret Width：光标宽度

　　　　--Custom Caret Color：自定义光标颜色

　　　　--Selection Color：旋转文字的颜色（在Text中调整）

9.Canvas

　　　　

　　属性：

　　　　Render Mode:显示格式

　　　　　　Overlay：画布始终展现在相机的最前方，其他的物体不能越过，画布虽然也是GameObject，但是不能移动、旋转和缩放（不需要摄像机）

　　　　　　Camera：使用指定相机渲染（需要一个相机添加到RenderCamera）；画布不能移动、旋转和缩放；画布将不再默认展示在相机的最前方，其他的GameObject可以穿过画布

　　　　　　　　PlaneDistance：画布到相机的距离

　　　　　　WorldSpace：可以对画布进行移动、旋转和缩放（需要摄像机，纯3D）

　　　　　　　　Order In Layer：和Depth相似，假如一个场景中有多个Canvas，优先展示Order值大的Canvas

　　　　　　UI Scale Mode：UI视图的拉伸方式

　　　　　　　　Constant Pixel Size：

　　　　　　　　　　按照像素拉伸：对于同样的一个场景，屏幕越大，看到的东西就越多

　　　　　　　　Scale With Screen Size：按照屏幕位置进行缩放

　　　　　　　　　　Reference Resolution：设计界面的参数，参考的分辨率，在这个分辨率的基础上进行UI绘制，其他的分辨率适当拉伸

　　　　　　Match Width值为0则按屏幕宽度进行拉伸，Height值为1则按照高度进行缩放

　　　　　　10.Panel

　　在Canvas中扮演一个容器的角色，可以将其他的UI元素放到Panel中进行统一管理

11.Anchors

　　锚点：作用是定位（Alt+鼠标左键）

　　　　Image的四个顶点离四个锚点的距离是始终不变的

　　　　移动Image时，锚点不会跟着移动

12.Pivot

　　中心点：UI元素进行旋转和缩放时的中心点，值的范围为0~1

13.DropDowm

　　　　

　　　　　　Template：模板，控制下拉列表的显示样式

　　　　　　Caption Text：选择一个下拉选项后，在哪个Text上展示选择的文案

　　　　　　Caption Image：选择一个下拉选项后，在哪个Image上展示选择的图片

　　　　

　　　　　　Template：下拉选项框的模板

　　　　　　Viewport：下拉选项框

　　　　　　Item：每一个下拉选项框

　　　　　　Item Background：选项背景

　　　　　　Iten Checkmark：选项选中

　　　　　　Item Lable：选项显示名称