Unity基础-UGUI

Canvas

• 渲染顺序
  遵循刷油漆规则（画家算法）
  依次由Render CameraDepth值、Sorting Layer先后顺序、Order in Layer值决定

• canvas有三种渲染方式
  1.screen space-overlay :理解为在屏幕上贴一层膜，在一切物体之上
  2.screen space-camera：附着在camera上
  3.world space：相当于一个GameObject 可被遮挡
  

  canvas.png

• 射线检测
  GraphicRaycaster
  必须添加在Canvas上，因为它依赖Canvas。UI元素必须具有继承自Graphic的组件，也就是可视的UI元素
  Ignore Reversed Graphics —— 忽略反方向的图形，图形面向前方时才参与射线检测
  Blocking Objects —— 屏蔽对象不参与射线检测（渲染模式不为ScreenSpaceOverlay时起作用）
  1.None-不屏蔽；
  Two D-屏蔽2D物理对象（具有2D碰撞体）；
  Three D-屏蔽3D物理对象（具有3D碰撞体）；
  2.All-屏蔽所有
  Blocking Mask——屏蔽层Layer（渲染模式不为ScreenSpaceOverlay，且Blocking Objects不为Node时起作用）

• PhysicsRaycaster、Physics2DRaycaster
  建议不要用在ScreenSpaceOverlay模式的Canvas上
  必须添加在具有Camera组件上，因为这两个依赖Camera
  建议Camera不要和Canvas在同一物体上
  PhysicsRaycaster——只对3D物理对象产生影响，Camera的Projection尽量选择Perspective(透视)模式
  Physics2DRaycaster——只对2D物理对象产生影响，Camera的Projection尽量选择Orthographic(正交)模式
  EventMask——射线作用层，可以用来做事件屏蔽。

• CanvasGroup
  它不仅可以管理Canvas，还可以控制Canvas内的UI元素
  Alpha——统一控制自身及没有忽略的子物体透明度
  Interactable——统一控制自身及没有忽略子物体，继承自Selectable组件是否可交互
  Blocks Raycasts——统一控制自身及没有忽略子物体是否可以封锁事件的射线。这意味着我们可以自由控制事件射线是否可以穿透UI元素
  Ignore Parent Groups——忽略父物体对自己以及子物体的影响
  注意：屏蔽按钮事件不推荐采用 添加灰色蒙蔽panel的方式，会增加Draw Call
  

  group.png

Image

• Source Image（图像源）：纹理格式为Sprite（2D and UI）的图片资源（导入图片后选择Texture Type为Sprite（2D and UI））。

• Color（颜色）：图片叠加的颜色。

• Material（材质）：图片叠加的材质。

• Raycast Target（射线投射目标）：是否作为射线投射目标，关闭之后忽略UGUI的射线检测。

• Image Type（图片显示类型）：

• Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸。

• Sliced（切片的）：图片切片显示，在Project页面选中图片，切换为Sprite（2D and UI）模式后，点击Sprite Editor进入图片裁切模式，将图片裁切为上图的形状，使用Sliced模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会拉伸5进行填充。
  Fill Center（填充中心）：是否填充九宫格中心区域。

• Tiled（平铺的）：若图片已经过裁切，则使用Tiled模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会用5进行平铺填充。若图片未裁切，则使用Tiled模式后，根据图片边框拉伸，图片保持原大小不做变化，只是用自身平铺填充。

• Filled（填充的）：根据填充方式、填充起点、填充比例决定图片显示哪一部分。
  Fill Method（填充方式）：分为水平、垂直、90度圆、180度圆、360度圆。
  Fill Origin（填充起点）：根据填充方式不同有所变化。
  Fill Amount（填充比例）：0是完全不显示，1是完全显示。

• Preserve Aspect（锁定比例）：针对Simple模式，勾选之后，无论图片的外形放大还是缩小，都会一直保持初始的长宽比例。
  

  image.png

Raw Image

• Textture：指定要显示的图片，注意：图片类型可以是任何类型

• Color：设置图片的主颜色

• Material：设定Image控件的渲染材质

• Raycast Target：决定是否可接收射线碰撞事件检测（取消勾选不会挡住下层UI事件）

• UV Rect：可以让图片的一部分显示在RawImage组件中，x、y属性用于控制UV左右、上下偏移，W、H用于控制UV的重复次数。
  

  rawimage.png

Text

• Text:显示的文本

• Font：字体

• FontStyle：样式

• LineSpacing：行间距，单位是行高

• Rich Text：是否支持HTML标签。支持b、i、size、color等标签。

• Alignment：对齐方式
  Horizontal Overflow：水平方向溢出模式，默认是Wrap即允许自动换行，Overflow模式即直接溢出，不换行。
  Vertical Overflow：垂直方向溢出模式，Turncate截断模式。

• Best Fit：控件大小一定的前提下字体的自适应：
  Min Size：即字体最小能小到多少，配合Best fit使用。
  Max Size：即字体最大能大到多少，配合Best fit使用。

• color：改变颜色
  

  Text.png

Button

• Interactable（是否可用）：勾选，按钮可用，取消勾选，按钮不可用，并进入Disabled状态。

• Transition（过渡方式）：按钮在状态改变时自身的过渡方式：

• Color Tint（颜色改变）
  Normal Color（默认颜色）：初始状态的颜色。
  Highlighted Color（高亮颜色）：选中状态或是鼠标靠近会进入高亮状态。
  Pressed Color（按下颜色）：鼠标点击或是按钮处于选中状态时按下enter键。
  Disabled Color（禁用颜色）：禁用时颜色。
  Color Multiplier（颜色切换系数）：颜色切换速度，越大则颜色在几种状态间变化速度越快。
  Fade Duration（衰落延时）：颜色变化的延时时间，越大则变化越不明显。

• Sprite Swap（图片切换）
  Highlighted Sprite（高亮图片）：选中状态或是鼠标靠近会进入高亮状态。
  Pressed Sprite（按下图片）：鼠标点击或是按钮处于选中状态时按下enter键。
  Disabled Sprite（禁用图片）：禁用时图片。

• Animation（执行动画）（后面有详细介绍）
  Normal Trigger（默认触发器）：默认状态触发。
  Highlighted Trigger（高亮触发器）：选中状态或是鼠标靠近会进入高亮状态。
  Pressed Trigger（按下触发器）：鼠标点击或是按钮处于选中状态时按下enter键。
  Disabled Trigger（禁用触发器）：禁用时触发。
  Target Graphic（过渡效果作用目标）：可以是任一Graphic对象。

• Auto Generate Animatior（自动生成动画控制器）：
  点击此按钮，会自动生成一个包含了以上四种状态以及四种动画的animatior，然后选中此按钮，ctrl+6进入动画编辑界面，分别对以上四种动画进行调动就可以了。

• OnClick()：按钮点击事件触发集合。
  

  Button.png

Slider

• Background
  代表了进度条的底色，其实质是处于Sliced模式下的UGUI Image，因为只有Sliced模式才能保证进度条两端的弧度。当Slider的值为0时，呈现的全是Background的颜色。

• Fill Area 代表Slider值不为0时、非0部分的颜色。

• Fill Area 其实是个空的UGUI物体，之所以强调它是UGUI，是因为它有Rect Transform，并且其由Rect Transform确定的范围将是进度条可以活动的最大范围。

• Fill 作为Fill Area的子物体才是这部分的实质，同样是Sliced模式下的UGUI Image。

• Handle Slide Area代表了Slider上的进度钮。
  和Fill Area一样，Handle Slide Area本身也只是确定范围的UGUI空物体。
  Handle作为其子物体，是一个Simple模式下的UGUI Image。

• Slider组件

• Interactable：是否允许Slider交互的bool变量

• Transition：和UGUI Button部分是一样的，大家可以往前几讲翻一翻；但这里的区别在于Target Graphic设成了Handle，也就是说这是针对进度钮的、不同条件下的颜色光照。

• Navigation：和UGUI Button中的用法相同。Slider和Button之间可以向相互“导航。”被Navigation当下选中的Slider或者Button会处于Highlighted-高亮状态。

• Fill Rect：该进度条的已填充部分所绑定的Rect组件。能拖进这里的必须要有Rect Transform，即UGUI物体。

• Handle Rect：该进度条的进度钮。
  说明了Fill 和Handle都不是绝对的，大家可以试着互换一下二者；笔者不敢试，太邪恶了。

• Direction：Slider的演进方向，默认是（Left To Right）从左往右刷满，还可以选的有：Right to Left（从右往左）、Bottom To Top（从底至顶）、Top To Bottom（从顶到底）

• Min/Max Value：设定进度条数值的极限值，默认最小为0，最大为1，支持Float类型。

• Whole Numbers：勾选之后，Slider的Value值只能取整数，通常用于Max Value > 1的情况。

• Value：Slider的当前值。

• On Value Changed()
  

  slider.png

Toggle

• Transitioin：和Button组件一样请自行翻看

• Is On（选中状态）：此Toggle的选中状态，设置或返回为一个bool。

• Toggle Transition（切换过渡）：None为无切换过渡，Fade为切换时Graphic所指目标渐隐渐显。

• Group（所属组合）：这里指向一个带有Toggle Group组件的任意目标，将此Toggle加入该组合，之后此Toggle便会处于该组合的控制下，同一组合内只能有一个Toggle可处于选中状态，即便是初始时将所有Toggle都开启Is On，之后的选择也会自动保持单一模式。

• On Value Changed（状态改变触发消息）：当此Toggle选中状态改变时，触发一次此消息。

• Toggle Group组件：
  带有此组件的物体，可以同时管理多个Toggle，将需要被管理的Toggle的Group参数指向此Toggle Group便可。

• Allow Switch Off（是否允许关闭）：Toggle Group组默认有且仅有一个Toggle可处于选中状态（其管辖的所有Toggle中），如果勾选此属性，则Toggle Group组的所有Toggle都可同时处于未选中状态。
  

  toggle.png

InputField

• Text Component（文本组件）：此输入域的文本显示组件，任何带有Text组件的物体。

• Text（文本）：此输入域的初始值。

• Character Limit（字符数量限制）：限定此输入域最大输入的字符数，0为不限制。

• Content Type（内容类型）：限定此输入域的内容类型，包括数字、密码等，常用的类型如下：
  Standard（标准类型）：什么字符都能输入，只要是当前字体支持的。
  Autocorrected：自动修正
  Integer Number（整数类型）：只能输入一个整数。
  Decimal Number（十进制数）：能输入整数或小数。
  Alpha Numeric（文字和数字）：能输入数字和字母。
  Name（姓名类型）：能输入英文及其他文字，当输入英文时自动姓名化（首字母大写）。
  Email Address：邮箱
  Password（密码类型）：输入字符和数字，并显示为星号。
  Pin（密码类型）：只能输入数字，并显示星号
  Custom：定制的

• Line Type（换行方式）：当输入的内容超过输入域边界时：
  single Line（单一行）：超过边界也不换行，继续延伸此行，输入域中的内容只有一行；
  multi Line Submit（多行）：超过边界则换行，输入域中内容有多行；
  multi Line Newline（多行）：超过边界则新建换行，输入域中内容有多行。

• Placeholder（位置标示）：此输入域的输入位控制符，任何带有Text组件的物体。
  注意：Placeholder对应的Text也为此输入框的提示语显示：（例如Enter text...为提示语，当输入框内容为空时，提示语可见，内容不为空时，提示语不可见）

• Caret blink rate（光标闪烁速度）：标示输入光标的闪烁速度。

• Hide mobile input（手机端隐藏输入）：这个没测试过有什么效果。

• On Value Changed：值改变时触发消息。

• End Edit：结束编辑时触发消息。
  

  inputfield.png

ScrollView

• Content：滑动内容区。

• Horizontal ：代表水平方向滚动，vertical代表竖直方向。

• MovementType： ScrollView的滑动模式
  Unristricted：不限制
  Elastic：有弹性
  Clamped：限制的，无弹性

• Inertia： 鼠标放下后还可以动一点点。
  Deceleration Rate：惯性速率。

• scrollbar：可以根据需要的自定义，也可以不要。

• Spacing：是间距。这里我做了一个单列纵滚动条，所以只用考虑y轴间距。
  

  scrollview.png

Layout布局管理器

• Grid Layout Group： 横竖布局
  Padding —— 间隔
  CellSize —— 子物体大小
  Spacing —— 子物体之间的间隔
  Start Corner —— 子物体排列的角度
  Start Axis —— 子物体排列方向
  Child Alignment —— 子物体整体位于什么方位
  Constraint 约束 —— Flexible灵活的( 按照父物体长宽自动横竖行 ) Fixed Column Count 指定列数 Fixed Row Count 指定行数
  

  gridlayout.png

• Horizontal（Vertical） Layout Group 横(竖)向布局
  child force expand —— 是否强制拉伸长宽到父物体大小，
  单是一个布局组件很难实现想要的效果，还可以再添加一个Content Size Fitter 组件配合使用（只是用来过滤尺寸，没有设置的选项默认为0处理，比如选择Min Width ，但是子物体上没有设置过Min Width ，那么它就没有宽度）。
  Content Size Fitter 内容大小过滤 组件
  Horizontal Fit —— 子物体横向适配（Unconstrained 不受约束 Preferred Size 首选尺寸 Min Size 最小尺寸）
  Vertical Fit —— 子物体竖向适配
  

  

• Layout Element 布局元素 组件 ( 子物体上需要添加 )
  Min Width —— 最小宽度( 不受父物体宽度影响 )
  Min Height —— 最小高度
  Preferred Width —— 首选宽度( 最大不能超过父物体宽度 )
  Preferred Height —— 首选高度
  Flexible Width —— 灵活宽度 ( 只有0和大于0两种 大于0的话会自动补全宽度)
  Flexible Height —— 灵活高度
  注：横竖布局下的子物体大小是统一的，不能单独设置大小。没有单个横竖布局灵活，但是设置简单一些。
  

  layoutElement.png

• Content Size Fitter 内容大小过滤 组件
  一般和Layout Group配合使用 用法刚才已经写过了，再写一次加深印象。
  

  filter.png

• Aspect Ratio Fitter 宽高比过滤 组件
  Aspect Mode —— 宽高比模式 （ Width Controls Height 宽控制高(高度不可修改) Height Controls Width 高控制宽 Fit In Parent 宽或高和父物体一样，另一个小于父物体 Envelope Parent 宽或高和父物体一样，另一个包围父物体 ）
  Aspect Ratio —— 宽高比例
  

  aspect.png