UGUI ToggleGoup和Toggle制作选项卡

最新推荐文章于 2024-03-27 14:32:37 发布
最新推荐文章于 2024-03-27 14:32:37 发布
阅读量3.2k 收藏 1
点赞数
文章标签： c# unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43136702/article/details/123197752
版权
本文介绍了如何在Unity中简单快速地创建选项卡功能，通过一个面板和Toggle组实现多个Tab切换。只需一个ToggleGroup组件和一些基本设置，配合脚本动态更新面板内容，即可轻松实现标签页的交互功能。
摘要由CSDN通过智能技术生成

        网上教程要么自己使用Button来写，要么就是多个Tab对应多个面板，当面板界面一样只是内容不一样时，这两种方式都比较麻烦，不够简便。今天介绍的一种方法超级简单制作选项卡，多个tab对应一个面板。

      首先在panel下创建一个空物体（命名为Groups），然后添加上组件ToggleGroup，接着在Groups下创建一个Toggle（命名为toggle），其中Background为背景图片，也就是未选中时的图片，ChechMark为选中时的图片，两者本质就是Image，将对应素材拖进去就好，Label就是标签名字，然后将toggle复制多份，选中所有的toggle，将Groups拖到所有toggle物体的Toggle组件的Group属性中。新建一个脚本testToggle，挂Groups上，脚本如下watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQzMTM2NzAy,size_12,color_FFFFFF,t_70,g_se,x_16

 tabList需要在unity里按照toggle顺序依次赋值，然后选中所有的toggle，在Toggle组件中为它们绑定好事件就行了，函数就是上图中的这个方法。这样我们就可以获得标签对应的索引，根据索引去更新面板内容就好了。秒啊～

 

爬进棺材睡鬼
关注
UGUI用Tab键实现跳转
09-25
将该脚本绑定到需要跳转的控件们的父物体上，按Tab就可以在它们之间循环跳转焦点。
【unity】UGUI选项卡toggle封装
iywgqt的专栏
02-16 3757
在别人的博客里看到选项卡tab的封装，用的是button的方式。 传送门：UGUI（十七）选项卡Tab的封装 效果大概是这样子的： 源码似乎调用了外部函数，无法实现。 这里用toggle方式重新封装一下，实现效果基本一致，以供参考。
UGUI练习 - Tab选项卡以及自定义灵活网格
Ha啤酒来大杯的博客
09-10 496
原作者视频 项目地址 这个练习是Tab和自定义网格布局组合完成的具体效果如下Gif图 首先Tab功能就是TabGroup负责控制每一个TabButton对鼠标进入、离开、选择，针对进入和离开做出不同的反应，针对选择选择激活相应的GameObject，代码就是2个脚本很简单，可以直接看上面项目脚本。 从上面Gif中可以看到每个页面都有不同的网格布局，并且都是同一个布局组件实现的。如果想实现自定义布局需要继承LayoutGroup抽象类具体如下代码，覆写的这个函数看名字很奇怪是计算布局的垂直..
Unity基础：NGUI制作Tabs选项卡
QQhelphelp的博客
08-21 621
Tabview可以参考NGUI中的示例，场景Examples\Scenes\Example 13 - Tabs 1.使用NGUI创建一个2D UI，在该UI Root下新建一个Panel(背景)，然后在该Panel下新建两个Button, 2.在Panel下新建两个Panel(要显示的内容选项)，用来对应两个Button键, 3.给两Button添加UIToggle脚本和UIToggleOb...
UnityPC端UGUITab键切换
文刀雨田
08-21 544
最近研究UGUI中inputfield中按tab键切换的功能。 开始没有想到自己实现，就在网上搜了一下。果然还真有。 以下，是我找的帖子。 https://www.cnblogs.com/feiyanstudio/articles/7326212.html 把代码拷到本地，拖到inputfield上，直接就能用了。 但是，在用着的时候，会出现在按下Tab键的时候，inputfield的光标会跳级。比如三个自上而下的inputfield，在第一个inputfield按下Tab键的时候，光标会跳到第三
Unity游戏开发之UGUI设计——制作一个易用的Tablebar/导航栏（详细流程，附代码）
qq_36926782的博客
11-17 2199
功能说明 今天要实现的其实是一个使用范围很广的UI组件，即App中常见的Tablebar/导航栏，看到U3D方面没有人写这个，我就把自己的设计流程分享一下。先看效果： 设计思路上还是挺简单的，将按钮与Panel进行绑定，当某个按钮触发点击事件后，就显示对应Panel而隐藏其余的Panel。 一、UI设计 1. 层级设计 如下图设计层级。其中，Table Panel、Table Bar和Container只需要构造空物体对象即可。 2. UI布局 对于Tablebar而言，将布局更改为底端扩展，并添加一个
Unity3D 使用UGUI Toggel 配合Image实现选项卡功能
03-27
Unity3D 使用UGUI Toggel 配合Image实现选项卡功能操作
Unity UGUI原理和优化
07-05
2. 美术相关的制作规范：遵循美术相关的制作规范来优化 UGUI。 3. QA 大纲：使用 QA 大纲来优化 UGUI。 UGUI 的开源地址是 https://bitbucket.org/Unity-Technologies/ui。 UGUI 是 Unity 的标准 UI 系统，具有...
UGUI原理和深度优化.rar
08-29
注意，“更改”是指影响UI元素外观的任何变动，包括修改sprite renderer的sprite、transform的position和scale、文本网格的text等。 Canvas嵌套：Canvas可以嵌套使用，一个子Canvas下dirty的子物体不会触发父Canvas...
Unity UGUI实现卡片椭圆方向滚动
08-26
Unity UGUI实现卡片椭圆方向滚动 Unity UGUI实现卡片椭圆方向滚动是指在 Unity 游戏引擎中使用 UGUI ...UGUI 卡片椭圆方向滚动是一个非常实用和有趣的效果，它可以为游戏和育成类应用程序提供更加直观和交互的体验。
Unity 3D UGUI Tab 键切换输入框
07-31
使用Unity自带的一些插件 实现Tab键自动切换输入框,住左(或者右)shift，在按下tab键，光标进行向上跳转！ 
用Tab键控制UGUI的InputField切换Unity3D项目
03-08
用Tab键控制UGUI的InputField切换Unity3D项目，下载就可以用，这里Unity版本是5.6.4，下载的小伙伴记得看清楚版本哦，以免下载之后打不开
Unity用UGUI制作一个多选下拉框
12-21
Unity用UGUI制作一个多选下拉框 资源包教程及其说明： https://blog.csdn.net/weixin_48388330/article/details/135126028
【unity2D游戏开发】第一章节：创建2D项目模板并认识unity游戏编译器各选项卡的作用——《AVG-太空之战》
最新发布
weixin_44959182的博客
03-27 1935
File（文件）：打开和保存场景、项目、以及创建游戏。Edit（编辑）：主要用于Unity内部功能、快捷键设置。Assets（资源）：用于资源的创建、导入和导出。GameObject（游戏对象）：用于游戏对象的创建。Component：（游戏组件）：为游戏对象等添加组件来实现部分功能。Window（窗口）：显示特定视图。Help（帮助）：主要包含使用手册、资源商店、论坛等。
Unity3D - UGUI实现Tab键切换输入框、按钮（按Tab键切换高亮显示的UI）
weixin_34192732的博客
06-08 902
1.在Hierarchy面板创建能被选中的UI（Button、InputField等）。 2.在Canvas上创建C#脚本 TabCutPichon。 3.编写脚本。 1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEn...
ugui 点击tab触发补充滑动
残獄の世界に救いを
10-12 212
效果 点击视野范围边缘的tab按钮时触发一段滑动，将被点击的按钮移动至视野中心，如果tab按钮长度不够则滑动到最大值 1.补帧动画 用DoTween插件做的滑动补帧动画，用Unity的协程也可以。 public class UIScrollRect : ScrollRect { public bool IsPlaying => _isPlaying; private bool _isPlaying; /// <summary> /// 进度补帧动画
UGUI制作Tab标签页
zhangzhen551的专栏
09-28 6868
方法有2种 1.利用UGUI中的Button来制作。 using UnityEngine; using UnityEngine.UI; using System.Collections; using System; using System.Collections.Generic; [Serializable] public class TabControlEntry { [Serialize
UGUI 按Tab键切换下一个输入框或其他UI组件
qq_24733765的博客
04-08 350
using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class TablePressNext : MonoBehaviour { //把需要用Tab键选择的物体按顺序拖入这个集合即可 public List<Selectable> selectables; private void Update()
Unity 如何把UGUI做到极致的优化
你只管努力，其他的，交给天意！
07-01 7574
在日常工作中，UI的性能往往是被忽略的一点，他其实看似影响不大，但当一个项目达到了性能瓶颈的时候，你反过来在去优化UI，你会发现你大部分的性能，内存，包体全都的原因都处于UI系统。 一个没有提前考虑性能和优化的UI系统带来的问题会有很多，比如： Apk包体过大 界面之间切换不流畅 动画卡顿掉帧 内存占用过大（会导致应用闪退） Draw Call过多导致GPU渲染压力大游戏掉帧 顶点过多造成游戏卡顿 这只是一部分在游戏中很常见的性能问题。 那么究竟是什么原因造成了我们的UI性能下降。 首先，要知道为什么会
unity ugui上点击toggle对子物体进行切换颜色
06-10
你可以使用Unity的Toggle组件和事件来实现在点击Toggle时切换子物体的颜色。首先，在子物体上添加一个Image组件，并将其颜色设置为默认颜色。然后在Toggle组件上勾选“Is On”属性，这样Toggle默认就是选中状态。接下来，在Toggle上添加一个Toggle组件，并在该组件的“On Value Changed”事件中添加一个事件处理程序。在事件处理程序中，你可以检查Toggle的选中状态，然后根据需要设置子物体的颜色。例如，以下代码将在Toggle选中时将子物体的颜色设置为红色，取消选中时将颜色设置回默认颜色： ```csharp public class ToggleColorController : MonoBehaviour { public Toggle toggle; public Image childImage; public Color defaultColor = Color.white; public Color selectedColor = Color.red; void Start() { // 设置子物体默认颜色 childImage.color = defaultColor; // 添加Toggle事件处理程序 toggle.onValueChanged.AddListener(OnToggleValueChanged); } void OnToggleValueChanged(bool isOn) { // 根据Toggle的选中状态切换子物体颜色 if (isOn) { childImage.color = selectedColor; } else { childImage.color = defaultColor; } } } ``` 在这个示例中，我们为Toggle组件添加了一个事件处理程序，并在Start方法中设置了子物体的默认颜色。在事件处理程序中，我们检查Toggle的选中状态，并根据状态切换子物体的颜色。最后，将Toggle组件和子物体的Image组件分别分配给变量toggle和childImage。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值