UGUI组件详解

一、Image

 

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

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

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

Raycast Target（射线投射目标）：是否作为射线投射目标。

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

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

 

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

Fill Center（填充中心）：勾选后，5显示，反之，5不可见。

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

Fill Center（填充中心）：（已裁切的图像源才有此选项）勾选后，5显示，反之，5不可见。

Image Type（图片显示类型）：Filled（填充的），根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method（填充方式）：分为水平、垂直、90度圆、180度圆、360度圆。

Fill Origin（填充起点）：根据填充方式不同有所变化。

Fill Amount（填充比例）：0是完全不显示，1是完全显示。

二、Button

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

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

Color Tint（颜色改变） 

Sprite Swap（图片切换） 

Animation（执行动画）（后面有详细介绍）

Target Graphic（过渡效果作用目标）：可以是任一Graphic对象。

 

Navigation（按钮导航）：假如你现在有四个按钮，当你点击第一个时，第一个会保持选中状态，然后通过按键盘方向键，会导航将选中状态切换到下一个按钮上，例如你的第一个按钮下方存在第二个按钮，当你选中第一个按方向键下时，第一个按钮的选中状态取消，第二个按钮进入选中状态，前提是这些按钮都开启了导航功能。

 

None（关闭）：关闭导航。

Automatic（自动导航）：自动识别并导航到下一个控件。

Horizontal（水平导航）：水平方向导航到下一个控件。

Vertical（垂直导航）：垂直方向导航到下一个控件。

Explicit（指定导航）：特别指定在按下特定方向键时从此按钮导航到哪一个控件。

 

 

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（禁用触发器）：禁用时触发。

三、Text

 

Character： 
1、Font：字体 
2、Font Style： 
（1）Normal：正常 
（2）Bold：粗体 
（3）Italic：斜体 
（4）Bold And Italic：粗体+斜体 
3、Font Size：字体大小 
4、Line Spacing：行间距（注：Text组件没有提供修改字间距的属性，在前面写过修改字间距的脚本） 
5、Rich Text：富文本 

Paragraph： 
1、Alignment： 
前面三个按钮是水平方向（分别为左对齐、居中、右对齐），后面三个按钮是垂直方向（分别为顶对齐，居中，底对齐）

2、Align By Geometry： 
官方解释： 
Use the extents of glyph geometry to perform horizontal alignment rather than glyph metrics. 
This can result in better fitting left and right alignment, but may result in incorrect positioning when attempting to overlay multiple fonts (such as a specialized outline font) on top of each other. 
使用区段的字形几何执行水平对齐,而不是字形指标。 
这可以导致更好的拟合左和右对齐,但可能会导致不正确的定位当试图覆盖多个字体(如专业轮廓字体)上。

3、Horizontal Overflow：水平溢出 
（1）Wrap：文本将自动换行，当达到水平边界 
（2）Overflow：文本可以超出水平边界，继续显示 
4、Vertical Overflow：垂直溢出 
（1）Truncate：文本不显示超出垂直边界的部分 
（2）Overflow：文本可以超出垂直边界，继续显示 
5、Best Fit：勾选之后，编辑器发生变化，显示Min Size和Max Size 
（1）Min Size：最小大小 
（2）Max Size：最大大小 
当边框很大时，文字最大显示Max Size字体大小；当边框很小时，文字最小显示Min Size字体大小，边框显示不了MinSize字体大小就不再显示文字了。

Color：颜色

Material：材质

Raycast Target：来自类Graphic，当该项为false时，消息会透传

四、InputField

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

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

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

Content Type（内容类型）：限定此输入域的内容类型，包括数字、密码等，常用的类型如下：

Standard（标准类型）：什么字符都能输入，只要是当前字体支持的。

Integer Number（整数类型）：只能输入一个整数。

Decimal Number（十进制数）：能输入整数或小数。

Alpha numeric（文字和数字）：能输入数字和字母。

Name（姓名类型）：能输入英文及其他文字，当输入英文时自动姓名化（首字母大写）。

Password（密码类型）：输入的字符隐藏为星号。

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：结束编辑时触发消息。

五、Toggle

Toggle大部分属性等同于Button组件，同为按钮，不同的只是他自带了组合切换功能，当然这些用Button也是可以实现的。

 

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

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

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

 

Toggle Group

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

 

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

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

六、scrollview

 

 

内容很少，也非常简单。
 

Content：就是我们上面装载所有滚动内容的父节点。

 

Horizontal：水平滚动开关

 

Vertical：垂直滚动开关

 

Movement Type：滚动类型，默认是Elastic，即有弹性的滚动

 

Elasticty：弹性系数

 

Inertia：惯性开关

 

Deceleration Rate：惯性减速系数

 

Scroll Sensitivity：滚动的灵敏度

 

Viewport：视口

 

Horizontal/Vertical ScrollBar：分别是水平和垂直的滚动条

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

七、Grid

脚本属性截图如下： 

1、Padding：RectOffset类型，矩形偏移，详解请戳UGUI之Horizontal Layout Group组件介绍

2、Cell Size：Vector2类型，默认值为(100,100)，网格中的每个单元格的大小

1. [SerializeField] protected Vector2 m_CellSize = new Vector2(100, 100);

2. public Vector2 cellSize { get { return m_CellSize; } set { SetProperty(ref m_CellSize, value); } }

• 1
• 2

3、Spacing：这里的Spacing不同于水平布局、垂直布局，是Vector2类型，既然是网格布局，当然存在水平方向的间隔和垂直方向的间隔，这里也不做过多的介绍。

3、Start Corner：Corner枚举类型

1. public enum Corner

2. {

3. UpperLeft = 0, //左上角

4. UpperRight = 1, //右上角

5. LowerLeft = 2, //左下角

6. LowerRight = 3 //右下角

7. }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

第一个单元格放在哪个角落，默认为UpperLeft左上角

4、Start Axis：Axis枚举类型

1. public enum Axis

2. {

3. Horizontal = 0, //水平

4. Vertical = 1 //垂直

5. }

• 1
• 2
• 3
• 4
• 5

（1）Horizontal：水平 
优先水平排列单元格 
（2）Vertical：垂直 
优先垂直排列单元格

5、Child Alignment：TextAnchor枚举类型，文本锚点，详解请戳UGUI之Horizontal Layout Group组件介绍

6、Constraint：Constraint枚举类型

1. public enum Constraint

2. {

3. Flexible = 0, //不限制行数和列数

4. FixedColumnCount = 1, //约束指定数量的列数

5. FixedRowCount = 2 //约束指定数量的行数

6. }