Unity--UI控件

基础组件：

注：具体属性查看https://docs.unity3d.com/Manual/script-Text.html官方文档

Transform组件：

   属性：Position、Rotation、Scale

   主要用于查找子物体，或组件。

RectTransform组件：

   UGUI专用的类，游戏元素添加任何UI组件，会自动将其transform组件转换成RectTransform。

Width/Height：矩形框的宽高（用于显示）

Left、Top、Right、Bottom：Anchors形成一个锚框时，代表矩形与锚框的内边距。

Pivot：类似Cocos2dx锚点的设置，仅影响Pos数值。

PosX、PoxY：当Anchors不能形成一个框时（即左上角与右上角的坐标有相同），其值表示Pivot在矩形表示的点到锚点的距离。

Anchors：锚点处于父结点的矩形框的固定百分比位置  当锚点形成框时，就是百分比内边距，而自身的矩形框数据就会显示内边距

重点函数：

anchorMin、anchorMax、sizeDelta

总结：

当锚点不处于同一位置时，子物体会根据父结点的矩形框（X方向或Y方向，依锚点而定）等比例变化。

当锚点处于同一位置时，子物体大小不会变化，但其位置始终处于父结点的矩形框百分比位置上，其位置会根据父结点矩形框大小变化而变化。

Text组件：

Line Spacing字体间的行间距。

RichText富文本，即一段文本中可以显示包含多段颜色字体格式的文字。常用说明文字中红色重点标示显示

Align By Geometr是否通过几何对齐。

Horizontal Overflow设置文本内容的换行和溢出。

Vertical Overflow设置文本内容的截断和溢出。

Best Fit文本内容自适应文本框大小。

Material材质球用于渲染文本

RaycastTarget：射线目标，表示是否参与射线检测，即是否响应触控（UI事件）。

注：EventSystem在Update的Process触发UI事件。UGUI会遍历屏幕中所有RaycastTarget是true的UI，接着就发射线，并且排序找到玩家最先触发的UI，再抛出事件给逻辑层去响应。

Image组件：

Source Image:图像的纹理，只接受Sprite纹理（UISprite）

Preserve Aspect:保持纹理原比例不变（只整体缩放）

Set Native Size:恢复纹理原始大小

图像纹理的缩放，主要受RectTransform的影响

RawImage组件：

Texture:图像的纹理，任何纹理均可

UV Rect：X、Y、W、H

纹理首先被放置在UV坐标系中，X、Y代表从纹理的左下角的百分比开始显示，W、H表示纹理在百分比区域显示。

简单的说，X、Y移动纹理在显示区域的百分比位置，W、H缩放显示区域。两者综合调整显示的纹理（有可能是部分纹理）在显示区域的位置信息。

UV坐标系中的显示区域 被投射平铺到 RectTransform里。若两者区域大小不一致，将会发生缩放。

总结：

Image组件只能显示完整的Sprite纹理，纹理大小主要受RectTransform的影响而缩放

RawImage组件能显示所有的纹理，可控制纹理在显示区域的位置，纹理大小受UV Rect的W、H与RectTransform共同影响而缩放。

Button组件：

含有一个Text子控件，其自身由Image脚本、Button脚本控制。

Image脚本：Image Type = { Simple、Sliced、Tiled、Filled }

Simple模式：显示全部纹理，具有Image控件的基本属性

Sliced模式：Sprite纹理将被看做九宫格，九宫格四个角的纹理保持原大小不变，其他部分随RectTransform缩放。Fill Center是否显示九宫格中心块纹理

Tiled模式：若控件区域较大，则在Sprite尺寸不变的前提下不断重复填满控件，像铺地板砖一样。若控件区域较小，则只显示部分。

Filled模式：与Simple模式相似，但可以表现一种“从无到有”的呈现过程，如顺时针显示部分纹理等。Clockwise是否顺时针

Button脚本：Interactable(是否启用按钮)、Transition(过渡方式)、Navigation(按钮导航)

Transition按钮在状态改变时自身的过渡方式：Color Tint（颜色改变）、Sprite Swap（图片切换）、Animation（执行动画）

             Target Graphic 过渡效果作用目标，任意Graphic对象

             Highlighted Color或Sprite 选中状态或是鼠标靠近会进入高亮状态

             Color Multiplier 颜色切换系数，表示颜色在几种状态间变化速度

             Fade Duration 衰落延时  颜色变化的延时时间，越大则变化越不明显。

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

     

Toggle组件：

含有一个Text子控件和组合Image子控件。

Toggle脚本：具有基本的Button脚本属性

                 Is On 选中状态，返回bool

                 Graphic 过渡目标

                 Toggle Transition 切换过渡  Fade模式时切换，Graphic所指目标渐隐渐显

                 Group 所属组合  指向一个带有Toggle Group组件的任意目标。同一组合内只能有一个Toggle处于选中状态。

                 OnValueChanged 状态改变触发消息

Toggle Group组件：Allow Switch Off 勾选则Toggle Group组的所有Toggle都可同时处于未选中状态。

              

Slider组件：

由三个子控件组成，Background、组合Fill Area、组合Handle Slide Area

Slider脚本：具有Button脚本的基本属性

Navigation Visualize:

Derection 设置滑块的方向

MinValue、MaxValue 控制滑块移动的范围

Whole Numbers是否限定滑块值为整数值

Value 滑块当前的值

OnValueChange 滑块的数值被改变时调用 传递float类型的值（无论Whole Numbers是否勾选）

Scrollbar脚本：与Slider脚本基本相似

不同Scrollbar没有Whole Numbers属性、MinValue、MaxValue、Value，

替代的是Number Of Steps滑动条允许的滑动位置的数量，即滑动可以处于的位置数量，每次滑动百分比位置。其影响滑块的大小、初始位置显示

Vaule 滑块的初始位置 0~1  其与NumberOf Steps 会影响滑块的位置显示。如只有4个滑块位置，初始位置却设定为0.5，其会自动调整到0.75（列表底为0,）

Size 滑块的大小 最大滑块的百分比值  其会受Number Of Steps 影响

ScrollRect滑动窗口脚本

        Content 滑动窗口大小（由滑动条与列表显示区域组成），若选项较多，则会出现滑动框。       

        Horizontal 水平滑动  Vertical 垂直滑动  指在滑动区域可按住鼠标拖动列表时，是否可以上下左右滑动

        MovementType = { Elastic弹性滑动、Unrestricted不受限制、Clamped紧紧抓住 }  滑动模式与滑动方向需结合使用
        Inertia惯性 选项显示区域 会在指针拖动后释放时，惯性移动。设置紧紧抓住时，区别明显

        Scroll Sensitivity 对滚动滚轮和滚动条滚动事件的敏感性  即表示为在滚动区域   移动滑动条时列表滑动的速度

        Viewport 列表显示区域

        Horizontal Scrollbar水平滑动条

             Visibility = { Permanent 固定、Auto Hide自动隐藏、Auto Hide And Expand Viewport自动隐藏幷扩展列表显示} 针对滑动条的显示设置

             Spacing 滑动条与列表显示区域的间距

        OnValueChanged( Vector2 )滑动位置变化时触发（滑动位置，不是指鼠标指针，滑动滚轮时指针位置不变，但滑动位置改变）

Mask脚本  设置遮罩，根据RectTransform来设置显示区域，不在显示区域内的不显示。

Dropdown组件

子控件：Text（Label对象）、Image（Arrow对象）、ScrollRect（Template对象）、Toggle（Template\Viewport\Content\item）、ScrollBar（Template\Scrollbar）

运行时展开下拉框：创建Button（Blocker）、根据Template实例化一个可见的Dropdown List。注意Template是不可见的

Dropdown脚本

      Caption Text：标题的显示文字，标题指收起下拉表时显示的选项。

      Item Text：模块选项的显示文字

      Options：选项列表  每一项由text和sprite组成

      Value：当前选中选项 在选项列表的 Index 最上面的为0,依次下推。

      OnValueChanged( Int32 )：当前选中选项改变时触发

Template控件：两个子控件Viewport和Scrollbar，自身Scroll Rect脚本

      Viewport：子物体Content，自身Mask脚本

            Content：子物体Item，自身无脚本，仅有RectTransform

                  Item：子物体Item Background、Item Checkmark、Item Label，自身Toggle脚本

InputField组件：两个Text子控件，自身InputField脚本

        Text Component：内容文本控件

        Placeholder：占位符文本控件，即提示说明 Enter UserName等等

        Text：内容

        Character Limit：最大输入字符数，可输入文字字数。

        Content Type = { Standard任何字符、Integer Number整数类型、Decimal Number十进制数、Alpha numeric文字和数字、Name姓名、Password密码类型

                                  Email Address邮箱、Pin只允许输入数字的密码类型}

        Line Type 换行方式  = { singleLine单行，越界不换行、multi Line Submit 越界则被动换行、nulti Line Newline 越界则换行或主动新建换行 }

        OnValueChanged()值改变时触发消息

         End Edit()结束编辑时触发消息

Layout布局：Horizontal Layout Group水平布局、Vertical Layout Group垂直布局、Grid Layout Group网格布局

Padding偏移：Left、Right、Top、Bottom

Spacing：表示为Cell之间的间隔

Child Alignment 对齐方式

Child Force Expand 自适应宽高

Layout Group节点下的Cell均不能设置 Rect Transform，其大小受布局设置控制。

LayoutElement

MinWidth最小宽度、PreferredWidth首选宽度、FlexibleWidth自适应宽度

补充：

设置Pivot时，若保证UI元素相对父元素不移动，则需要重新设置anchoredPosition。

anchoredPosition代表着Pivot距离锚框（锚点们组成的框）的中心点，其确定UI元素框在父容器里的位置。Unity里的Inspector显示的Pox X、Pox Y，就是anchoredPosition。

若仅改变Pivot，由于anchoredPosition的值未变，当父结点重新渲染子UI元素，就会改变UI元素的位置。

计算方式：

# lua 代码
function SetPivot(rect, newPivot)
local sizeDelta = rect.sizeDelta
local oldPivot = rect.pivot
rect.pivot = newPivot
local oldPosition = rect.anchoredPosition
local newX = oldPosition.x + sizeDelta.x * (newPivot.x - oldPivot.x)
local newY = oldPosition.y + sizeDelta.y * (newPivot.y - oldPivot.y)
rect.anchoredPosition = Vector2(newX, newY)
end

。。。