当前位置： 首页 > news >正文

Unity_UI_NGUI_组合控件2

news 2025/7/29 7:01:12

Unity_UI

Unity_NGUI_组合控件

4.PopupList（下拉列表控件）

4.1 PopupList的作用与使用场景
  • PopupList控件用于在UI中实现下拉选择菜单，允许用户从多个选项中选择一个。
  • 常用于设置选项、筛选条件、模式切换等场景。
  • 支持自定义选项、显示样式、对齐方式等。
4.2 PopupList常用属性
基础制作步骤
  1. 创建一个Sprite做背景，一个Label做显示内容。
  2. 添加PopupList脚本。
  3. 添加碰撞器（Collider）。
  4. 关联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常用属性
基础制作步骤
  1. 创建3个Sprite对象作为背景，2个子对象（1个进度，1个滑动块）。
  2. 设置层级关系。
  3. 为根背景添加Slider脚本。
  4. 添加碰撞器（父对象或滑块）。
  5. 关联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常用属性
基础制作步骤
  1. 创建2个Sprite对象（1个背景，1个滚动条）。
  2. 背景父对象添加ScrollBar脚本。
  3. 添加碰撞器（Collider）。
  4. 关联对象（背景、滚动条）。
数值设置
  • 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常用属性
基础制作步骤
  1. 创建2个Sprite对象（1个背景，1个进度条）。
  2. 背景父对象添加ProgressBar脚本。
  3. 添加碰撞器（Collider）。
  4. 关联对象（背景、进度条）。
数值设置
  • 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实现分页。
http://www.dtcms.com/a/302563.html

相关文章：

  • Rust实战：AI与机器学习自动炒饭机器学习
  • puppeteer 系列模块的系统性、详细讲解
  • Ubuntu系统完整配置教程
  • InfluxDB 与 HTTP 协议交互进阶（一）
  • 设计模式实战：自定义SpringIOC（理论分析）
  • 无界设计新生态：Penpot开源平台与cpolar的云端协同创新实践
  • 第二十二节 MATLAB转置向量、MATLAB追加向量
  • C++---初始化列表（initializer_list）
  • 基于黑马教程——微服务架构解析（二）：雪崩防护+分布式事务
  • 使用 nvm (Node Version Manager) 来管理多个 Node.js 版本，并自由切换
  • OCR 赋能合同抽取：不良资产管理公司的效率加速器
  • 常见的接⼝测试⾯试题
  • 图像识别边缘算法
  • 从矩阵表示到卷积神经网络（CNN）与循环神经网络（RNN）
  • MCP error -32000: Connection closed
  • 基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
  • mxn矩阵学习笔记
  • 使用Python制造扫雷游戏
  • Marc 非线性仿真复杂，企业如何保障许可证公平与高效使用？
  • （AC）储值购物
  • Android中主线程、ActivityThread、ApplicationThread的区别
  • 【氮化镓】GaN同质外延p-i-n二极管中星形与三角形扩展表面缺陷的电子特性
  • Python 实现服务器自动故障处理工具：从监控到自愈的完整方案
  • 日志分析-windows日志分析base--笔记ing
  • lesson26-2：使用Tkinter打造简易画图软件优化版
  • 深入解析MIPI C-PHY (五） MIPI C-PHY 与 A-PHY 的对比分析
  • 重生之我在暑假学习微服务第三天《Docker-上篇》
  • 【Unity笔记】Unity Camera.cullingMask 使用指南：Layer 精准控制、XR 多视图与性能提升
  • ERC20 和 XCM Precompile｜详解背后技术逻辑
  • 学习Python中Selenium模块的基本用法（2：下载浏览器驱动）