Unity_UI
Unity_NGUI_组合控件
4.PopupList（下拉列表控件）
4.1 PopupList的作用与使用场景
- PopupList控件用于在UI中实现下拉选择菜单，允许用户从多个选项中选择一个。
- 常用于设置选项、筛选条件、模式切换等场景。
- 支持自定义选项、显示样式、对齐方式等。
4.2 PopupList常用属性
基础制作步骤
- 创建一个Sprite做背景，一个Label做显示内容。
- 添加PopupList脚本。
- 添加碰撞器（Collider）。
- 关联Label用于信息更新，选择Label中的SetCurrentSelection函数。
选项设置
- Options：下拉列表显示内容（每行一个选项，空行表示加一个空选项）。
列表显示设置
Position：列表出现位置
- Auto：自动（推荐，自动判断上下）
- Above：向上弹出
- Below：向下弹出
Selection：选中操作
- On Press：按下选中
- On Click：点击选中
Alignment：对其方式
- Automatic：自动对齐
- Left：左对齐
- Center：居中对齐
- Right：右对齐
- Justified：两端对齐
字体与外观设置
- Font：字体
- Font Size：字体大小
- TextColor：字体颜色
- Padding：偏移位置
- Modifier：修饰方式（强制大写/小写/自定义）
- None：无
- To Uppercase：大写
- To Lowercase：小写
- Custom：自定义
图集与背景设置
- Atlas：图集
- Background：下拉列表背景图
- Highlight：下拉列表选中图
- Background（高亮叠加）：背景颜色叠加
- Highlight（高亮叠加）：选中高亮叠加
其他设置
- Overlap：弹出窗口边框与打开内容重叠的数量
- Animated：是否有默认的弹出动画（禁用可节约性能）
4.3 PopupList脚本控制示例
using UnityEngine;
public class PopupListExample : MonoBehaviour
{
public UIPopupList popupList;
public UILabel label;
void Start()
{
// 添加选项
popupList.items.Clear();
popupList.items.Add("选项一");
popupList.items.Add("选项二");
popupList.items.Add("选项三");
// 监听选项变化
popupList.onChange.Add(new EventDelegate(OnPopupChange));
}
void OnPopupChange()
{
// 获取当前选中项
string selected = popupList.value;
label.text = "当前选择：" + selected;
}
}
4.4 PopupList使用技巧
- 动态添加/移除选项：可通过代码动态管理items集合。
- 自定义显示内容：可通过Label实时显示当前选中项。
- 多语言支持：结合本地化系统动态切换选项内容。
- 与其他控件联动：选择后可触发其他UI或逻辑变化。
5.Slider（滑动条控件）
5.1 Slider的作用与使用场景
- Slider控件用于在UI中实现数值的连续或分级调整，常用于音量、进度、亮度等调节。
- 支持拖拽、点击等多种交互方式。
- 可自定义外观、步进、方向等。
5.2 Slider常用属性
基础制作步骤
- 创建3个Sprite对象作为背景，2个子对象（1个进度，1个滑动块）。
- 设置层级关系。
- 为根背景添加Slider脚本。
- 添加碰撞器（父对象或滑块）。
- 关联3个对象（背景、前景、滑块）。
数值设置
- Value：当前值（0~1），表示滑块当前位置。
- Steps：步数，将0~1区间分为若干步，步进滑动。
外观设置（Appearance）
- Foreground：前景（用于缩放，显示进度）。
- Background：背景。
- Thumb：拖动块。
拖动方向（Direction）
- Direction：滑动方向
- Left To Right：从左到右
- Right To Left：从右到左
- Bottom To Top：从下到上
- Top To Bottom：从上到下
事件设置
- OnValueChange：值变化时监听脚本，可用于实时响应滑块变化。
5.3 Slider脚本控制示例
using UnityEngine;
public class SliderExample : MonoBehaviour
{
public UISlider slider;
public UILabel valueLabel;
void Start()
{
// 监听滑块值变化
slider.onChange.Add(new EventDelegate(OnSliderChange));
}
void OnSliderChange()
{
// 获取当前值
float value = slider.value;
valueLabel.text = $"当前值：{value:F2}";
}
}
5.4 Slider使用技巧
- 分步滑动：设置Steps属性实现分级滑动（如音量10档）。
- 自定义外观：可替换前景、背景、滑块图片实现不同风格。
- 方向适配：根据UI布局选择合适的滑动方向。
- 与其他控件联动：滑块值变化时可驱动其他UI或逻辑。
5.5 Slider最佳实践
- 滑块大小适中，便于用户拖动。
- 进度条颜色对比明显，提升可读性。
- 步进设置合理，避免过细或过粗。
- 碰撞器覆盖完整滑动区域，保证交互流畅。
6.ScrollBar（滚动条控件）
6.1 ScrollBar的作用与使用场景
- ScrollBar控件用于在UI中实现内容区域的滚动，常见于列表、文本框、图片浏览等场景。
- 一般不单独使用，常与滚动视图（如ScrollView）配合。
- 类似于VS右侧的滚动条。
6.2 ScrollBar常用属性
基础制作步骤
- 创建2个Sprite对象（1个背景，1个滚动条）。
- 背景父对象添加ScrollBar脚本。
- 添加碰撞器（Collider）。
- 关联对象（背景、滚动条）。
数值设置
- Value：当前值（0~1），表示滚动条当前位置。
- Steps：步数，将0~1区间分为若干步，步进滚动。
外观设置
- Foreground：滚动条（用于拖动）。
- Background：背景。
拖动方向
- Direction：滚动方向
- Left To Right：从左到右
- Right To Left：从右到左
- Bottom To Top：从下到上
- Top To Bottom：从上到下
事件设置
- OnValueChange：值变化时监听脚本。
6.3 ScrollBar脚本控制示例
using UnityEngine;
public class ScrollBarExample : MonoBehaviour
{
public UIScrollBar scrollBar;
public UILabel valueLabel;
void Start()
{
scrollBar.onChange.Add(new EventDelegate(OnScrollBarChange));
}
void OnScrollBarChange()
{
float value = scrollBar.value;
valueLabel.text = $"滚动条值：{value:F2}";
}
}
7.ProgressBar（进度条控件）
7.1 ProgressBar的作用与使用场景
- ProgressBar控件用于在UI中显示任务进度、加载进度、血量等。
- 一般不需要交互，仅用于展示。
- 通常直接用Sprite的Filled填充模式实现。
7.2 ProgressBar常用属性
基础制作步骤
- 创建2个Sprite对象（1个背景，1个进度条）。
- 背景父对象添加ProgressBar脚本。
- 添加碰撞器（Collider）。
- 关联对象（背景、进度条）。
数值设置
- Value：当前值（0~1），表示进度条当前进度。
- Steps：步数，将0~1区间分为若干步，分级显示。
外观设置
- Foreground：进度条（用于填充）。
- Background：背景。
填充方向
- Direction：填充方向
- Left To Right：从左到右
- Right To Left：从右到左
- Bottom To Top：从下到上
- Top To Bottom：从上到下
事件设置
- OnValueChange：值变化时监听脚本。
7.3 ProgressBar脚本控制示例
using UnityEngine;
public class ProgressBarExample : MonoBehaviour
{
public UIProgressBar progressBar;
public UILabel valueLabel;
void Start()
{
progressBar.onChange.Add(new EventDelegate(OnProgressBarChange));
}
void OnProgressBarChange()
{
float value = progressBar.value;
valueLabel.text = $"进度：{value:P0}";
}
}
8.ScrollView（滚动视图）
8.1 ScrollView的作用与使用场景
- ScrollView控件用于在UI中实现内容区域的滚动显示，常用于列表、背包、聊天框等。
- 支持内容超出区域时的拖拽、滚轮、弹性回弹等效果。
- 可与ScrollBar联动，实现横向/纵向滚动条。
8.2 ScrollView常用属性
基础属性
- Content Origin：内容子对象对齐方式（如Top Left、Center等）。
- Movement：拖拽方向
- Horizontal：水平
- Vertical：垂直
- Unrestricted：自由
- Custom：自定义
- Drag Effect：拖动特效
- None：无
- Momentum：惯性
- Momentum And Spring：惯性+弹性回弹
- Scroll Wheel Factor：滚动因子，鼠标滚轮滚动的速度和方向。
- Momentum Amount：惯性量，拖拽松开后滑动的速度。
- Spring Strength：弹性强度，回弹的速度。
- Dampen Strength：阻尼强度，滑动减速的快慢。
- Restrict Within Panel：限制内容在面板内。
- Constrain On Drag：拖拽时约束内容。
- Cancel Drag If Fits：内容完全显示时禁止拖拽。
- Smooth Drag Start：平滑拖拽启动。
滚动条关联
- ScrollBars：关联水平/垂直滚动条
- Horizontal：水平滚动条
- Vertical：垂直滚动条
- ShowCondition：滚动条显示时机
- Always：一直显示
- Only If Needed：需要时显示
- When Dragging：拖动时显示
8.3 ScrollView使用技巧
- 内容自适应：配合Grid或Table自动布局内容。
- 弹性回弹：提升用户体验，防止内容超出边界。
- 滚动条联动：与ScrollBar组件配合，提升交互性。
- 性能优化：大量内容时建议使用对象池。
8.4 常见问题与解决方案
- 内容无法滚动：检查Movement和内容尺寸。
- 滚动条不显示：检查ScrollBars和ShowCondition设置。
- 拖拽无弹性：Drag Effect未设置为Momentum And Spring。
- 内容超出边界：未勾选Restrict Within Panel。
Grid（自动对齐/网格布局控件）
8.5 Grid的作用与使用场景
- Grid控件用于自动排列子对象，实现背包、商店、排行榜等网格布局。
- 支持横向、纵向、分页等多种排列方式。
8.5.1 Grid常用属性
排列设置
- Arrangement：排列方式
- Horizontal：横向
- Vertical：纵向
- Custom：自定义
- Cell Width：元素宽度
- Cell Height：元素高度
- Row Limit：每行/列最大元素数，超出自动换行/分页
排序设置
- Sorting：排序方式
- None：无排序
- Alphabetic：按字母排序
- Horizontal：横向顺序
- Vertical：纵向顺序
- Custom：自定义
- Inverted：倒序排列
- Pivot：锚点位置（九宫格九个点）
- Smooth Tween：平滑动画
- Hide Inactive：隐藏未激活对象
- Constrain to Panel：约束在面板内
8.5.2 Grid使用技巧
- 动态添加/移除子对象：自动重新排列。
- 配合ScrollView：实现可滚动的网格列表。
- 排序与倒序：灵活控制显示顺序。
- 分页显示：通过Row Limit实现分页。