UI_NGUI_三大基础控件

Unity_UI

二、UI_NGUI_三大基础控件

1.Sprite (精灵图片)

1.1 Sprite的作用

• Sprite 用于在NGUI中显示所有中小尺寸的图片。
• Sprite可以显示图集中的单个图片资源，常用于UI元素的图片显示。

1.2 代码设置图片

• 切换当前图集内的图片：

  sprite.spriteName = "bk";
  

• 切换到其他图集的图片：

  NGUIAtlas atlas = Resources.Load<NGUIAtlas>("Atlas/login");
  sprite.atlas = atlas;
  sprite.spriteName = "ui_DL_anniuxiao_01";
  

1.3 Sprite常用属性

• Atlas：选择使用的图集。
• Sprite：选择图集中的精灵图片。
• Material：材质，一般不修改。
• Fixed Aspect：固定宽高比，尺寸变化时保持比例。
• Type（图片类型）：
  • Simple：普通模式，缩放会拉伸图片。
  • Sliced：切片模式，可九宫格缩放，常用于按钮、面板等。
  • Tiled：平铺模式，图片重复绘制。
  • Filled：填充模式，可做进度条、CD等，支持多种填充方向（水平、垂直、扇形90/180/360度）。
  • Advanced：高级模式，可将图片分成5部分分别设置模式。
• Flip：翻转模式（水平、垂直、都翻转）。
• Gradient：渐变色（可设置上下颜色渐变）。
• Color Tint：颜色叠加。

1.4 公共内容 Widget

• Pivot：控制对象中心点。
• Depth：深度层级，决定渲染顺序。
• Size：尺寸设置。
• Snap：原始尺寸显示。
• Aspect：宽高比设置。

1.5 Sprite类型详细说明

• Simple：普通图片，缩放时会拉伸。
• Sliced：九宫格切片，适合可拉伸的UI元素。
• Tiled：图片重复平铺。
• Filled：可做进度条、冷却条等，支持多种填充方向（水平、垂直、扇形）。
• Advanced：可对图片的不同部分分别设置显示模式。

2.Label (文本控件)

2.1 Label常用属性与说明

• Font：
  • 使用Unity字体可以使用ttf的字体文件，也可以使用NGUI字体图集。
• Material：
  • 材质，一般不会修改。
• FontSize：
  • 字体大小。
• Text：
  • 显示内容。
• Modifier（修饰方式）：
  • 强制大小写字母。
  • None：没有限制
  • To Uppercase：大写字母
  • To Lowercase：小写字母
  • Custom：自定义
• 字体样式：
  • Normal：普通
  • Bold：加粗
  • Italic：斜体
  • Bold And Italic：加粗并斜体
• Overflow（溢出处理）：
  • Shrink Content：收缩内容，文字显示不下时Label的大小自动适应字体的尺寸。
  • Clamp Content：裁剪内容，无法显示的字体内容被裁剪。
  • Resize Freely：自动调整大小，Label大小去适应字体内容的大小。
  • Resize Height：自动调整高度，Label控件高度无法手动调节，会随着字体内容的大小自动适应。
• Alignment（对齐方式）：
  • Automatic：自动对齐
  • Left：居左
  • Center：居中
  • Right：居右
  • Justified：调整会自动变化
• Keep crisp（动态字体锐化）：
  • 这是一个动态字体功能，可以确保文本在收缩时清晰。
  • Never：从不
  • On Desktop/Always：一般都会开启
• Gradient（渐变）：
  • 渐变色设置。
• Effect（特效）：
  • None：无
  • Shadow：阴影效果
  • Outline/Outline8：边缘线，8为参数不同更粗一点
• Float spacing（浮点数间隔调整）：
  • 开启浮点数间隔调整，默认整形。
• Spacing（字符间隔）：
  • 字符间隔调整。
• Max Lines（最大行数）：
  • 限制Label显示的最大行数。
• BBCode：
  • 是否开启富文本。
• Color Tint（字体颜色）：
  • 设置字体颜色。

2.2 富文本（BBCode）用法

• 支持如下标签：
  • [ff0000]颜色[-]：设置字体颜色
  • [b]加粗[/b]：加粗
  • [i]斜体[/i]：斜体
  • [u]下划线[/u]：下划线
  • [s]直线穿过文字[/s]：删除线
  • [sub]右下角显示[/sub]：下标
  • [sup]右上角显示[/sup]：上标
  • [url=http://www.baidu.com/][u]超链接[/u][/url]：超链接（需添加碰撞器和Open URL On Click脚本）

3.Texture(大图控件)

3.1 Texture的作用与使用场景

• Texture控件用于显示大尺寸图片，适合直接展示整张大图。
• Sprite控件只能显示图集中的图片，通常用于中小图片。
• 如果需要显示大尺寸图片，没有必要打成图集，直接用Texture组件即可。

3.2 Texture常用属性

• Texture：图片资源。
• Material：材质，一般不修改。
• Shader：着色器，一般不修改。
• Type（图片类型）：
  • Simple：普通模式，缩放会拉伸图片。
  • Sliced：切片模式，可九宫格缩放。
  • Tiled：平铺模式，图片重复绘制。
  • Filled：填充模式，可做CD、进度条等。
  • Advanced：高级模式，可将图片分成5部分分别设置模式。
• Flip（翻转模式）：
  • Nothing：无翻转
  • Horizontally：水平翻转
  • Vertically：垂直翻转
  • Both：水平垂直都翻转
• Gradient（渐变色）：
  • 勾选后可设置上下颜色渐变，自动渐变。
• Color Tint（颜色叠加）：
  • 设置图片的整体颜色。

3.3 使用建议

• Sprite适合中小图片，Texture适合大图。
• 直接使用Texture组件进行大图片显示，无需打图集。

3.4 典型Inspector参数说明

• Texture：拖入需要显示的图片资源。
• Material：一般保持默认。
• Shader：一般保持默认（如Unlit/Transparent Colored）。
• Type：选择图片显示模式（Simple、Sliced、Tiled、Filled、Advanced）。
• Flip：选择是否需要翻转图片。
• Gradient：是否启用渐变色。
• Color Tint：设置图片颜色。