UGUI制作Tab标签页
方法有2种
1.利用UGUI中的Button来制作。
<pre name="code" class="csharp">using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System;
using System.Collections.Generic;
[Serializable]
public class TabControlEntry
{[SerializeField]private GameObject panel = null;public GameObject Panel { get { return panel; } }[SerializeField]private Button tab = null;public Button Tab { get { return tab; } }
}
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System;
using System.Collections.Generic;public class TabControl : MonoBehaviour
{[SerializeField]private List<TabControlEntry> entries = null;[SerializeField]private GameObject panelContainer = null;[SerializeField]private GameObject tabContainer = null;[SerializeField]private GameObject tabPrefab = null;[SerializeField]private GameObject panelPrefab = null;protected virtual void Start(){foreach (TabControlEntry entry in entries){AddButtonListener(entry);}if (entries.Count > 0){SelectTab(entries[0]);}}public void AddEntry(TabControlEntry entry){entries.Add(entry);}private void AddButtonListener(TabControlEntry entry){entry.Tab.onClick.AddListener(() => SelectTab(entry));}private void SelectTab(TabControlEntry selectedEntry){foreach (TabControlEntry entry in entries){bool isSelected = entry == selectedEntry;entry.Tab.interactable = !isSelected;entry.Panel.SetActive(isSelected);}}
}
2.通过Toggle来制作
可以将Toggle中的Checkmark对象看作选中的标签页,Background对象看作是未被选中是的标签显示,将几个Toggle放到一个Group中,即是一组标签。同时,UGUI的最好的一个优势就是,同一个画布上,在Hierarchy视图中,位置越靠下的越后渲染,所以,我们可以通过transform中的SetAsLastSibling()方法将选中的Toggle动态放到最下面,这样就可以让选中的Toggle靠前显示,可以做成像谷歌浏览器页面的样式。
UGUI制作Tab标签页相关推荐
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- Vant Tab标签页
引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant';Vue.use(Tab); Vue.use(Tabs); 代码演示 基础用法 通过 ...
- vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置 业务需求 效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
- vue中tab标签页keep-alive二级路由+删除指定缓存页面
1.实现效果 2.keep-alive 2.1是什么: keep-alive 是 Vue 的内置组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 transiti ...
最新文章
- 一些关于iText和iTextSharp的旧闻(some old news about iText and iTextSharp)
- PAT甲级1055 The World‘s Richest:[C++题解]k路归并
- 为什么敏捷方法能在软件开发中行之有效?
- python orm框架sqlalchemy_python orm 框架中sqlalchemy用法实例详解
- Linux fork的写时复制
- html boot设置列宽,html - Bootstrap 4:设置列宽固定位置内容的宽度 - SO中文参考 - www.soinside.com...
- [Java] Scanner(new File( )) 从文件输入内容
- javascript关于数组合并的——非比寻常
- html label 两端对齐,如果实现表单的label文字两端对齐
- 对Spring框架的理解(转)
- Header First设计模式学习笔记——单例模式
- Java架构师成长之道之Java数据存储
- linux系统 锐捷_ubuntu 下锐捷完美客户端mentohust
- 【C++学习笔记】密码转盘锁解题,记录开锁步骤
- Python之---【pandas】pd.concat(df)、df.append(df)
- python docx文档_【IT专家】python操作docx文档
- Chrome浏览器 抢购、秒杀插件,秒杀助手
- Android 内存剖析 – 发现潜在问题------比较好android博客
- 书写NDIS过滤钩子驱动实现ip包过滤
- 形象解释清了内存颗粒、单双面、主板布线和双通道的那些事儿