【Unity之FGUI】Fairy GUI一篇四万字详解,快来收藏~!

在这里插入图片描述


👨‍💻个人主页@元宇宙-秩沅

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 秩沅 原创
👨‍💻 收录于专栏就业宝典

🅰️推荐专栏

👨‍💻 专栏交流🧧
🟥Unity100个实战基础✨🎁
🟦 Unity100个精华一记✨🎁
🟩 Unity50个demo案例教程✨🎁
🟨 Unity100个精华细节BUG✨🎁

在这里插入图片描述

在这里插入图片描述

斜体样式


文章目录


前言

FairyGUI是一款用于创建用户界面的UI编辑器和引擎它提供了丰富的UI组件、动画效果、布局管理、事件处理等功能,能够快速构建各种复杂的用户界面。
FairyGUI具有跨平台的特性,支持主流的桌面、移动平台以及网页应用程序。它的编辑器提供了可视化的界面设计工具,用户可以通过拖拽和配置属性来创建和调整UI元素。同时,FairyGUI还提供了强大的动画编辑功能,可以创建丰富的过渡效果和交互动画。
FairyGUI还具备良好的性能表现,它使用了高效的渲染技术和资源压缩算法,能够在低内存和低带宽的情况下高效运行。此外,FairyGUI还提供了丰富的扩展性和定制化选项,开发者可以根据自己的需求进行扩展和定制。
总结来说,FairyGUI是一款功能强大、易于使用、跨平台的UI编辑器和引擎,能够帮助开发者快速创建高质量的用户界面。


🎶(1 FairyGUI SDK


  • 点击官网进行下载
    在这里插入图片描述

  • SDK 下载
    在这里插入图片描述

  • 导入Unity中

在这里插入图片描述

  • 创建项目
    在这里插入图片描述

🎶(2 认识 FairyGUI


在这里插入图片描述

  • 1.assets:包内容放置目录 ——> package1:每个包一个目录。目录名就是包名
  • 2.assets_xx:分支内容放置目录,xx就是分支名称,多个分支存在多个类似名称的目录
  • 3.settings:配置文件放置目录
    1. .objs:内部数据目录。不需要进行版本管理,这里的内容不需要共享
    1. .fairy:项目标识文件。文件名就是项目名,可以随便修改

    1.菜单栏
    2.主工具栏:常用功能按钮
    3.工具栏和舞台区域
    4.状态栏,显示控制台输出的最后一条信息,点击可打开控制台
    5.其它功能视图:可以随意拖动位置,也可以关闭,在主菜单->视图中可以打开关闭后的窗口

    可以将资源直接拖入资源库中
    支持的格式
    1.图片(PNG、JPG、TGA、SVG等)
    2.声音(MP3、wav等)
    3.动画(spine、龙骨、gif、Flash等)
    4.文字(TTF、位图文字)

🎶(3 项目设置


    1.可以修改实际运行的平台
    2.可以设置在编辑器内的一些默认值
    3.可以设置 方便我们使用的 字体列表 颜色列表 字体大小列表
    4.可以进行 分辨率自适应的基础设置
    5.可以编辑 项目分支、多国语言、自定义属性

    我们一般新建一个FGUI的工程后 最好就把这些项目基础设置 设置好

在这里插入图片描述

  • 快捷菜单
    在这里插入图片描述

  • 适配测试
    在这里插入图片描述


🎶(4 包的定义


    包是FairyGUI中用于组织资源的
    它在文件系统中体现为一个目录,assets文件夹下的每个子目录都表示一个包
    最终我们打包时也是以包为单位进行打包的

每个包中都有一个package.xml文件,它是用于记录这个包中的资源对应信息的,是非常重要的文件

包发布后可以得到一个描述文件和一张或多张纹理集(图集)

    我们在引擎中使用时,就是根据这个描述文件使用纹理中的图片来创建UI的

在这里插入图片描述

  • 包的发布设置
    在这里插入图片描述

🪶(A 组件创建


😶‍🌫️1.尺寸、轴心和锚点


旋转是基于轴心点来进行旋转的

位置计算是基于锚点

在这里插入图片描述在这里插入图片描述


😶‍🌫️2.溢出处理和遮罩


可作为滚动视图时侯使用,将视图进行垂直滚动和水平滚动

在这里插入图片描述

遮罩处理(反向和正向的处理的对)

在这里插入图片描述

  • 遮罩处理的反向

😶‍🌫️3.点击测试和点击穿透


  • 点击测试

用于异性按钮的点击区域的测试

  • 点击穿透

若勾选则,例:可同时作用两个重合的按钮

在这里插入图片描述
在这里插入图片描述


😶‍🌫️4.自定义属性和自定义数据


  • 自定义属性
    在这里插入图片描述
  • 自定义数据
    在这里插入图片描述

🪶(B发布设置


发布路径建议直接为Unity Asset资源文件下

  • 仅发布定义 发布包列表中当前选中的包,但仅发布定义,不重新生成纹理集。通常发布的内容包括素材(图片、声音等)和定义文件, 如果你没有增删改素材,那么你可以仅发布定义文件,避免了重新生成图集带来的时间消耗。
    在这里插入图片描述

😶‍🌫️1.重点参数

  • 正方形:生成的图集会变成正方形
  • 允许旋转:建议勾选
  • 裁剪图片边缘空白:建议勾选
  • 纹理集定义:panel里面需要的精灵
    在这里插入图片描述

😶‍🌫️2.发布


  • 包要设置成导出,随即会标红
    在这里插入图片描述

发布后是以二进制形式存储精灵,更加节省空间

在这里插入图片描述


😶‍🌫️3.Alpha通道导出模式


勾选后,会生成两张PNG图集,一张有颜色一张黑白,可以节约空间
在这里插入图片描述


🪶(C如何加载FGUI发布的文件


😶‍🌫️1.加载前准备


1.直接放在Resources或者其子目录下       2.打包进AB包中
  • 注意事项
    1.Texure Type 保持默认Default
    2.关闭Generate Mips Maps ( 开启后,2D图片在3D世界中,离相机不同的距离不同分辨率的图片都会自动生成)
    3.若出现模糊的情况。Filter Mode设置为Point

小知识: 会自动设置在这里插入图片描述


😶‍🌫️2.加载UI包


在这里插入图片描述

  • 获取依赖包
    什么是依赖包:除了这个包,你用到了其他包的元件(当然此时只创建了一个包)
    在这里插入图片描述
       //遍历依赖包相关信息
       foreach (var item in teachPackage.dependencies)
       {
           //这样可以获取到 依赖包的名字
           UIPackage.AddPackage(item["name"]);
       }

  • 卸载UI包

卸载会消耗CPU,产生大量的GC

    UIPackage.RemovePackage("Teach");
    UIPackage.RemoveAllPackages();

😶‍🌫️3.包内存管理


  • 预先加载资源
 //提前加载一些声音或者图片等资源
 teachPackage.LoadAllAssets();
  • AB包的卸载

    2.若UIPackage是从中AB包中载入的,在RemovePackage时AB包才会被Unload(true)。 需自行卸载AB包 ,如果AB包是自行管理,不希望FairyGUI做任何处理的,可以设置

 UIPackage.unloadBundleByFGUI = false;

🪶(1加载UIPanel


😶‍🌫️1.手动创建UIPanel


  • 在Unity中创建UIPanel

Hierarchy窗口右键一>FairyGUI——>UIPanel
选中创建出的uIPanel 在Inspector窗口中点击PackageName或ComponentName在弹出窗口中选择对应的包和组件点击OK即可
UIPanel只能自动载入放置在Resources目录或其子目录下的UT包

在这里插入图片描述

在这里插入图片描述


😶‍🌫️2.代码自动创建UIPanel


  //首先加载对应的UI包
  UIPackage.AddPackage("UI/Teach");
  //为一个对象想 添加UIPanel组件 设置相关参数即可
  GameObject obj = new GameObject("UIPanel2");
   //将层级改为UI层
  obj.layer = LayerMask.NameToLayer("UI");
  UIPanel panel = obj.AddComponent<UIPanel>();
  //设置关键属性
  panel.packageName = "Teach";
  panel.componentName = "TeachPanel";

  //想要改变别的参数属性
  panel.container.renderMode = RenderMode.ScreenSpaceOverlay;
  panel.container.fairyBatching = true;

  panel.SetSortingOrder(1, true);

  panel.SetHitTestMode(HitTestMode.Default);

  //创建UI
  panel.CreateUI();

🪶(2认识UIPanel


创建UIPanel之后,会生成Stage Camera 和UIPanel

在这里插入图片描述


😶‍🌫️1.UIPanel脚本的属性


  • 获取UIPanel,而后即可获取组件
    GComponent view = uiPanel.ui;
    在这里插入图片描述

  • PackageName——包名

  • Componetn Name——组件名

  • Package Path——引用的组件路径

  • Render Mode ——渲染模式

Screen Space Overlay:UI始终显示在最前面
Screen Space Camera:可以自定义正交摄像机渲染UI
World Space:在世界控件使用UI,用透视相机渲染,默认是主相机
当渲染模式是后两种时,可以自己设置渲染UI的摄像机,默认为场景的主摄像机。
如果是World Space模式,需要设置相机,否则无法点击UI

  • Fairy Batching——FairyGUI的动态批处理开关。
    切换这个值,可以在编辑模式下实时看到DrawCall的变化。开启它后会开启深度调整,即使我们的UI层级没有刻意设置,底层也能帮助我们进行优化

  • Hit Test Mode:——点击测试模式

Default:使用内置机制判断点击和触摸,不使用射线,效率较高
Raycast:使用射线判断,UIPanel会自动创建碰撞体,适用于UIPanel需要和其它3D物体交互时时使用

  • Touch Disabled——将关闭点击检测
    如果UI没有可以交互的内容,可以勾选它提升性能

  • Set Native Children Order——在UIPanel下挂其它3D对象,比如粒子模型

  • UI Transform:——UI位置
    渲染模式为Screen Space时设置UI Transform
    渲染模式为World Space时设置Transform

  • FIt Screen:——UIPanel屏幕适配模式

Fit Size:UI铺满屏幕
Fit Width And Set Middle:UI横向铺满屏幕,上下居中
Fit Height And Set Center:UI纵向铺满屏幕,左右居中

  • SortingOrder:——进行排序

1.当渲染模式为ScreenSpace屏幕空间渲染时

SortingOrder为1000这个值是个特殊值
1000以上UIPanel会显示在2D UI的上面
1000以下都显示在2D UI的下面

2.当渲染模式为WorldSpace世界空间渲染时用世界坐标的Z轴来对UI进行排序

如果想要通过z轴来进行排序 需要将需要通过z轴排序的UIPanel的sortingOrder设置为相同值
然后调用API_ Stage.inst.SortWorldSpacePanelsByZOrder(100);

一般进行UI面板的排序,通过 ScreenSpace进行渲染 然后通过 坐标系转换 来不停的更新UI坐标(降低性能消耗),不用方法二世界坐标的Z轴来对UI进行排序


😶‍🌫️2.认识StageCamera


本质:UI摄像机
在这里插入图片描述

  • Constant Size: 是否使用固定的相机大小,默认true

    为ture时。屏幕放大或缩小,粒子效果也会随着放大和缩小,适用于手机平台

    为false时。屏幕放大或缩小,粒子效果不会随着放大和缩小,使用与PC平台,根据自己游戏面向的平台决定是否勾选


🪶(3代码动态加载UI资源



😶‍🌫️1. GRoot


  • 是动态创建UI时会自动创建的跟对象, 它主要负责适配等工作

1.设置适配(分辨率自适应)API
GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);

2.创建好的UI对象添加为它的子对象
GRoot.inst.AddChild()


😶‍🌫️2.主要步骤


  • 1.设置适配相关内容
//设置分辨率(设置一次即可)
 GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
  • 2.加载包
 //创建UI之前 必须加载包
 UIPackage package = UIPackage.AddPackage("UI/package");

  • 3.加载依赖包
 //加载依赖包
 foreach(var item in package.dependencies)
 {
     UIPackage.AddPackage("UI/" + item["name"]);
 }
  • 4.动态创建UI资源

1.同步加载

 //GObject obj = UIPackage.CreateObject("Teach", "TeachPanel");
 //GComponent view = obj.asCom;
 GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;

//组件加载在GRoot对象下
 GRoot.inst.AddChild(view);

 //销毁UI
 //view.Dispose();

2.异步加载

 UIPackage.CreateObjectAsync("Teach", "TeachPanel", (obj) =>
 {
     GComponent v = obj.asCom;
     GRoot.inst.AddChild(v);
 });

😶‍🌫️3.GComponent(组件)常用API


  • 1.位置
    view.x = 10;
    view.y = 10;
    view.SetPosition(0, 0, 0);
  • 2.宽高
    view.width = 1000;
    view.height = 500;
    view.SetSize(1365, 768);
  • 3.轴心点
    view.pivotX = 0;
    view.pivotY = 0;
    view.SetPivot(0, 0, true);
    view.pivotAsAnchor = false;
  • 4.角度
    view.rotation = 0;
  • 5.可见与否
    view.visible = true;
    6.置灰
    view.grayed = true;
  • 7.缩放
    view.scaleX = 1;
    view.scaleY = 1;
  • 8.排序层
    view.sortingOrder = 1;
  • 9.点击不穿透
    view.opaque = true;
  • 10.子对象数量
    print(view.numChildren);
  • 11.子对象相关
    添加子对象 ——view.AddChild()
    根据名字获取子对象—— view.GetChild(“n1”);
    根据索引获取子对象——view.GetChildAt(0);
    设置对象排序位置——view.SetChildIndex(null, 5);
    设置子对象排序规则

默认,升序,从小到大依次渲染,序号大的显示在前面
view.childrenRenderOrder = ChildrenRenderOrder.Ascent;
降序反之
view.childrenRenderOrder = ChildrenRenderOrder.Descent;
拱形 设置一个顶峰值显示在最前面,两侧的依次渲染
view.childrenRenderOrder = ChildrenRenderOrder.Arch;
view.apexIndex = 5;


😶‍🌫️4.选择动态创建UI还是手动创建UIPanel?


  • 大多数都是选择动态创建,使用代码创建UI,可以应用到传统的设计模式上
    注意:动态创建的UI不要和其它GameObject相关联

  • 小项目可以使用_UIPanel一般用来做3DUI,它可以更加方便的挂载到任意GameObject上
    优点是可以像物体一样直接摆放在场景中,因为随着UI的增多,项目的变大
    管理起来常的麻烦


🪶(4脚本组件



😶‍🌫️1.UIContentScaler脚本组件


  • 不需要每个场景都挂,随便一个对象挂载即可

  • 该组件是用来分辨率自适应的

    也可以不使用UIContentScaler
    通过使用 GRoot.inst.setContentScaleFactor 代码设置 效果完全一致
    在这里插入图片描述

  • Scale Mode:缩放模式

Constant Pixel Size:不进行缩放。UI按1:1呈现
Scale With Screen Size:根据屏幕大小缩放
Constant Physical Size:暂不支持

  • Scale With Screen Size:根据屏幕大小缩放
    在这里插入图片描述

Design Resolution X/Y:设计分辨率的宽高
Ignore Orientation:忽略方向,FairyGUI会保证屏幕在旋转时缩放系数保持不变,勾选则该功能失效
PC游戏不需要这个特性

  • Screen Match Mode:屏幕匹配模式
    在这里插入图片描述

Match Width Or Height:宽高匹配(横竖屏切换游戏)
Match Width:根据宽匹配(适合竖屏游戏)
Match Height:根据高匹配(适合横屏游戏)


😶‍🌫️2.认识UIConfig


在这里插入图片描述

UIConfig是FGUI提供设置一些全局参数的组件
(默认字体,按钮音效,按钮音量、预加载的包等等)

  • Config Items:全局设置

在这里插入图片描述

  • Preload Packages:预先加载包放在Resources下的包

**—

🪶( FGUI元件


  • 1.组件类 继承 元件类
  • 2.元件类:GObject —— 组件类:GComponent
  • 3.元件是stage舞台上的最小组成单位,舞台中的组成元素我们称之为元件
    基础元件:图片、图形、动画、装载器、文本、富文本、组、组件
组合型元件:标签、按钮、下拉框、滚动条、滑动条、进度条
特殊元件:列表

😶‍🌫️1.元件基本属性


在这里插入图片描述

关键参数:

  • ①.原大小:勾选后,将使用素材的原始大小,当资源修改后,尺寸会随之修改
  • ②.缩放和尺寸的区别: 缩放会改变子对象大小变化,尺寸不会
  • ③.倾斜:伪3D的效果,除(图片、动画、装载器)三个元件外,建议不要使用
  • ④.轴心:旋转,尺寸,缩放的参考点
  • ⑤.同时作为锚点:锚点用于计算相对位置。默认位置为左上角(0,0)
  • ⑥.不可触摸:默认图片、普通文本、动画永远是不可触摸,不会监听事件。

用的比较少:
在这里插入图片描述

  • ①.BlendMode混合模式和滤镜
    除图片、动画、文字之外的其它组件会有一定内存消耗。特别的会增加DC
  • ②.自定义数据:作为额外数据,可以通过代码来获取

😶‍🌫️2.元件的调用及API


  • 元件类 GObject是所有UI元素的基类,组件类中很多内容都是继承自元件类的
  • ①.创建一个组件设置适配相关
 GRoot.inst.SetContentScaleFactor(1920, 1080, UIContentScaler.ScreenMatchMode.MatchHeight);
  • ②.包和依赖包的加载
    UIPackage package = UIPackage.AddPackage("UI/xxx");
    foreach (var item in package.dependencies)
    {
        UIPackage.AddPackage(item["name"]);
    }
  • ③.得到组件类,并设置位置
  GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;
  GRoot.inst.AddChild(view);
  • ④ 获取组件中的元件
 GObject obj = view.GetChild("btnXXX");
  • ⑤元件的相关API
  //1.设置坐标
  obj.x = 20;
  obj.y = 20;
  obj.SetPosition(0, 0, 0);
  //2.设置大小
  obj.SetSize(100, 100);
  obj.width = 200;
  obj.height = 100;
  //3.设置大小限制
  obj.maxWidth = 1000;
  obj.minWidth = 100;
  //4.设置缩放
  obj.scaleX = 1;
  obj.scaleY = 1;
  obj.scale = Vector2.one;
  //5.设置轴心
  obj.SetPivot(0, 0, true);
  obj.pivotAsAnchor = false;
  //6.设置可见
  obj.visible = true;
  //7.设置是否交互(点击)
  obj.touchable = false;
  //8.设置置灰
  obj.grayed = true;
  //9.设置激活(变灰+触摸)
  obj.enabled = true;
  //10设置旋转
  obj.rotation = 0;
  //11.获取原对象
  //obj.displayObject.gameObject
  //12.销毁
  //obj.Dispose();
  //资源地址 动画、 图片、 组件才会有
  //13.得到URL资源地址和资源名
  obj.resourceURL
  obj.packageItem.name
  //14.是否在舞台
  obj.onStag
  //15.自定义数据(用得少)
  obj.data

😶‍🌫️3.图片元件


  • 最基础的图片显示元素,为了简介高效,它不支持修改图片源、不支持点击(PNG、JPG、TGA、SVG)
  • 如果需要动态改变或者支持点击,使用装载器实现
    在这里插入图片描述
  • ①图片大小:图片的原始大小,SVG格式可以修改,SVG可以无损缩放,但是其它格式不能
  • ②数据大小:图片所占字节大小(压缩前—压缩后)
  • ③缩放模式同UGUI
  • ④平滑:若不是像素游戏都需勾选
  • ⑤纹理集:将图片设置道同一纹理集中

单独:图单独成为一张纹理集
单独(NPOT):图按原大小直接输出

  • ⑥重复边缘像素:(平铺时使用)避免平铺时产生缝隙
  • ⑦禁止裁剪边缘空白:不想去掉多余的空白边缘可勾选
    更新:选择外部图片覆盖此图片
  • ⑧裁剪边缘空白:永久剪除图片周围的全透明像素,图片可能变小
    在这里插入图片描述
  • 填充:可以用作做进度条等(如UGUI的Slider)
  • 图片元件相关API
   //1.获取图片元件
   GImage img = view.GetChild("图片元件名").asImage;
   //2.动态创建图片元件
   GImage img2 = UIPackage.CreateObject("包名", "图片名字").asImage;
   view.AddChild(img2);
   //3.填充值
   img.fillAmount = 0.5f;
   img.fillMethod = FillMethod.None;
   //4.材质和着色器改变
   img.shader = xx
   img.material = xx
   //5.更换精灵图集___动态赋值Texture2D
   img.texture = new NTexture(sprite);
   
  • 高清图片使用:将原图改为—— 原名@2x.png 的格式 ,用作这种情况显示,使界面显示效果呈现高清的效果。

😶‍🌫️4.图形元件


在这里插入图片描述
可用它来实现的功能:遮罩、占位、雷达图等等

  //1.获取图形元件
  GGraph graph = view.GetChild("图形名").asGraph;
  //2.画出图形
  graph.DrawRect(100, 100, 4, Color.red, Color.white);//画矩形
  graph.DrawEllipse(100, 100, Color.red);//画椭圆
  //3.动态创建图形元件
  GGraph graph2 = new GGraph();
  graph2.SetPosition(50, 50, 0);//设置位置
  graph2.DrawRect(200, 200, 5, Color.white, Color.red);
  view.AddChild(graph2); 
  //4.空白图形中添加Unity对象
  GGraph graph3 = view.GetChild("图形名").asGraph;
  //5.设置激活状态
  graph3.SetNativeObject()

😶‍🌫️5.序列帧动画元件


序列帧动画,就是指由n张图片构成的动画,每张图片按照一定时间进行切换产生动画播放的效果

  • 如何用FGUI制作序列帧动画

动画格式为JTA格式

  • 1.菜单栏——>资源——>新建动画(或工具栏快捷按钮如下:),然后在动画编辑器界面导入图片序列,制作序列帧动画.
    在这里插入图片描述
  • 2.拖入Gif文件到动画编辑器中,Gif会自动转换为序列帧动画
  • 3.美术在外部创建
    在这里插入图片描述

注意:

  • 1.导入序列动画图片到动画编辑里面时,一定要注意图片的顺序是否正确,不然会影响动画播放的效果
  • 2.保持序列动画都在同一个纹理集当中

//1.获取序列帧动画元件
GMovieClip movie = view.GetChild("序列动画名字").asMovieClip;
movie.x = 0;
movie.y = 0;
//2.动态创建动画
GMovieClip movie = UIPackage.CreateObject("包名", "动画名").asMovieClip;
movie2.x = 50;
view.AddChild(movie2);
//3.切换播放和停止状态
movie.playing = false;
//4.ruo处于停止状态,设置停止在第几帧
movie.frame = 5;
//5.设置循环播放
movie.SetPlaySettings(0, -1, 10, -1);
movie.playing = true;
//6.返回播放动画头部
 movie2.Rewind();
//7.播放结束回调函数
movie2.onPlayEnd.Add(() =>
{
    print("动画播放完毕");
});

😶‍🌫️6.骨骼动画元件


FairyGUI目前只支持

  • 1.DragonBones龙骨编辑器 所有版本 导出的骨骼动画(建议使用)
  • 2.只支持Spine编辑器 3.8版本 导出的骨骼动画
    在这里插入图片描述
  • ①着色器:
    Default:,常规遮罩无法作用于骨骼动画,需要用自定义遮罩(骨骼动画库默认的着色器)
    FairyGUI/Image:常规遮罩可以作用于骨骼动画。但是没有预乘处理

预乘:预乘 就是提前把srcRGB*srcAlpha计算出来存在贴图的rgb通道中,这样在渲染时就能少做一次乘法

  • ②贴图是否已预乘:要和骨骼动画软件发布时选项一样,否则动画显示不正确

  • Unity获取API
    首先要将骨骼动画插件的SDK导入
    在这里插入图片描述
  • 然后填写FAIRYGUI_DRAGONBONES
  • 若导入了两个就填
    FAIRYGUI_DRAGONBONES;FAIRYGUI_SPINE

目的启用导入的SDK的代码

  • 选中ske后缀的龙骨动画配置文件,进行下列操作
    在这里插入图片描述
  • 就会生成一个Data结尾的数据文件,才可以正常使用龙骨动画
    在这里插入图片描述

😶‍🌫️7.装载器元件


1.内容装载器 :
节约性能提升效率
用途就是动态载入资源,动态得改变图片
装载器可以装载: 图片、动画、组件
在这里插入图片描述

  • 装载器属性
    ①URL:资源路径(图片、动画、组件)
    ②填充处理

无 :内容不会发生任何缩放。
等比缩放(显示全部)
等比缩放(无边框)
等比缩放(适应高度)
等比缩放(适应宽度)
自由缩放
注意:如果设置了自动大小,那么填充不发挥作用

  • 创建装载器
    ①工具栏点击在这里插入图片描述
    ②元件替换在这里插入图片描述
  • 装载器API
    //1.获取装载器
    GLoader loader = view.GetChild("装载器名称").asLoader;
    //2.加载包中的资源
    loader.url = "ui://包名/资源名";
    //3.路径也可以为Unity中资源路径
    loader.url = "UI/bk";
    //4.动态创建装载器
    GLoader loader = new GLoader();
    loader.SetSize(100, 100);
    loader.y = 400;
    loader.url = "ui://包名/资源名";
    view.AddChild(loader);
    //5.获取装载器中的内容
    loader.movieClip //得到装载器中的动画
    loader.component //得到装载器中的组件
    //6.装载Unity贴图
    public Texture t;
    loader.texture = new NTexture(t);
    //7.自定义加载方案
    UIObjectFactory.SetLoaderExtension(typeof(MyGLoader));//注册方法
public class MyGLoader:GLoader
{
    protected override void LoadExternal()
    {
        //自定义加载方式
        Sprite s = null;
        //如果加载成功 
        NTexture t = new NTexture(s);
        onExternalLoadSuccess(t);
        //如果加载失败
        onExternalLoadFailed();
    }
    protected override void FreeExternal(NTexture texture)
    {
        //释放外部载入资源的逻辑
    }
}

2.3D内容装载器 :
用途是和区别:动态载入比较复杂的资源,例如骨骼动画、模型(暂未支持)、粒子特效(暂未支持)等
在这里插入图片描述

  • 装载器元件相关API
       GRoot.inst.AddChild(view);
       //1.获取3D装载器
       GLoader3D loader3D = view.GetChild("装载器名称").asLoader3D;
       //2.动态创建3D装载器
       GLoader3D loader3D2 = new GLoader3D();
       loader3D2.SetSize(100, 100);
       view.AddChild(loader3D2);
      //3.设置骨骼动画
        loader3D2.SetDragonBones();
        loader3D2.SetSpine()
  • 专业版内容
    在这里插入图片描述

🪶( FGUI控件


😶‍🌫️字体控件注意事项


导入字体资源包后,还需在项目设置中,进行路径填写,才可以选择显示
在这里插入图片描述
在这里插入图片描述

  • 1.系统字体(不建议使用)

  • 2.TTF字体(常用)支持ttf/ttc/otf字体文件
    发布后,字体文件不会被发布,需要自己手动将字体文件放置到引擎中Unity Resources或者Resources/Fonts目录下

字体设置
在这里插入图片描述

①系列:字体名称,只读
②采样字体大小:渲染方式为SDFAA才有意义,其它方式使用默认值16即可
③渲染方式
Smooth:抗锯齿,建议使用
Hinted Smooth:比Smooth更清晰,速度较慢,较小字体建议使用
SDFAA:使用SDF技术渲染字体,TextMeshPro时可使用
④斜体样式:SDFAA时才有,使用斜体时的倾斜角度15~60
⑤粗体分量:SDFAA时才有,使用粗体时,粗体的重量,-3~3


3.位图字体(特殊需求时使用)
位图字体就是使用图片来表示某个文字

在这里插入图片描述

首先需要导入字体图片然后,导入到位图字体编辑器中

在这里插入图片描述
而后就形成了一个字体包,可以放入文字中使用

注意:默认字体




   //2.默认字体需要自己手动设置
   //设置默认字体 要在显示面板之前
   //如果是放置在指定文件夹下 那么直接填写字体名即可
   UIConfig.defaultFont = "STHUPO";
   //如果没有放到指定路径下
   UIConfig.defaultFont = "Other/STHUPO";

   //3.如果字体文件放置在AB包中或者Resources下其他目录下,需要手动自己注册
   //手动从对应位置加载字体文件 
   Font font = Resources.Load<Font>("Other/STCAIYUN");
   //然后申明一个 动态字体类型对象
   DynamicFont dFont = new DynamicFont("STCAIYUN", font);
   //注册它
   FontManager.RegisterFont(dFont);

   //设置适配相关
   GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
   //包和依赖包的加载
   UIPackage package = UIPackage.AddPackage("UI/Teach");
   foreach (var item in package.dependencies)
   {
       UIPackage.AddPackage(item["name"]);
   }

   GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;
   GRoot.inst.AddChild(view);

   #endregion

   #region 知识点三 字体相关问题解决
   //1.字体不带加粗 可以手动设置
   //FontManager.GetFont("字体名").customBold = true;

   //2.斜体和粗体不能同时使用 如果已经设置了customBold 不用设置customBoldAndItalic
   //FontManager.GetFont("字体名").customBoldAndItalic = true;

   //3.如果要使用TextMeshPro 需要在Unity编辑器的Scripting Define Symbols里增加 FAIRYGUI_TMPRO
//1.手动设置字体格式
//FontManager.GetFont("字体名").customBold = true;
//2.使用TextMeshPro 
//Unity编辑器的Scripting Define Symbols增加 FAIRYGUI_TMPRO

😶‍🌫️1.普通文本控件


    普通文本负责文本的显示功能
    不支持交互(鼠标触摸感应)、超链接和图文混排、HTML语法

在这里插入图片描述


在这里插入图片描述

  • 支持UBB语法

在这里插入图片描述

显示图片:[img]ui://包名/图片名[/img]_富文本才支持
超链接:[url=网址]超链接[/url]_富文本才支持
字体:[font=字体名]字体[/font]
字体大小:[size=10]text[/size]
粗体:[b]123[/b]
斜体:[i]123[/i]
下划线:[u]123[/u]
颜色:[color=#FFFFFF]123[/color]
[color=#FFFFFF,#000000]文字[/color] 两个颜色上下过渡
[color=#FFFFFF,#CCCCCC,#000000,#FFFF00]文字[/color]四个颜色可以做左右过渡或者双方向过渡

  • 支持文字模板

钻石数量:
{H=100}红钻{Y=200}银钻

在这里插入图片描述

 //1.获取文本
 GTextField text = view.GetChild("字体控件名").asTextField;
 text.text = "设置文字内容";
 //2.对齐方式
 text.align = AlignType.Left;
 text.verticalAlign = VertAlignType.Middle;
 //3.单行显示并设置大小
 text.singleLine = true;
 text.textFormat.size = 50;
 //4.动态创建文本
 GTextField txt = new GTextField();
 txt.SetSize(100, 100);
 txt.text = "哈喽·";
 view.AddChild(txt);
 //5.修改文本样式
 txt.text
 txt.textFormat.size 
 txt.textFormat.color
 //6.文本模板设置
 GTextField txt = view.GetChild("txtInfo").asTextField;
 //方式一:
 txt2.SetVar("jin", "500");
 txt2.SetVar("yin", "1000");
 txt2.FlushVars();
 //方式二:
 Dictionary<string, string> xxx = new Dictionary<string, string>();
 dic.Add("jin", "10000");
 dic.Add("yin", "1");
 txt2.templateVars = xxx;
 //7.关闭模板功能
 txt2.templateVars = null;

😶‍🌫️2.富文本控件


HTML语法点击进入

1.图片
<img src='ui://包名/图片名/>
<img src='ui://包名/图片名' width='20' height='20'/>
<img src='ui://包名/图片名' width='50%' height='50%'/>
2.超链接:
<a href='链接地址'>链接名字</a>
HtmlParseOptions.DefaultLinkColor = ...; //设置链接颜色
HtmlParseOptions.DefaultLinkBgColor = ...;
HtmlParseOptions.DefaultLinkHoverBgColor = ...;
  • 富文本支持交互(鼠标/触摸)
    • 富文本支持超链接和图文混排
      • 富文本支持HTML语法在这里插入图片描述
        在这里插入图片描述
    //1.获取富文本
    GRichTextField richTxt = view.GetChild("控件名").asRichTextField;
    richTxt.text = "";
    //2.动态创建富文本
    GRichTextField richTxt2 = new GRichTextField();
    richTxt2.SetSize(100, 100);
    richTxt2.SetPosition(20, 20, 0);
    richTxt2.text = "<a herf='www.baidu.com'>超链接3</a>";
    view.AddChild(richTxt2);

    //3.点击相关
    richTxt.onClick.Add(Click);
    richTxt.onClick.Add(() => {
        print("点击2");
    });
    richTxt.onClick.Remove(Click);
    richTxt.onClick.Clear();

    //4.超链接点击相关
    richTxt.onClickLink.Add((obj) =>
    {
        print(obj.data.ToString());
    });

}

    //HTML超链接样式 
    //1.全局设置
    HtmlParseOptions.DefaultLinkUnderline = true;
    HtmlParseOptions.DefaultLinkColor = Color.red;
    HtmlParseOptions.DefaultLinkBgColor = Color.green;
    HtmlParseOptions.DefaultLinkHoverBgColor = Color.yellow;

    //2.单个富文本设置
    HtmlParseOptions options = richTxt.richTextField.htmlParseOptions;
    options.linkUnderline = false;
    options.linkColor = Color.green;
    options.linkBgColor = Color.red;

😶‍🌫️3.输入文本控件


在这里插入图片描述

 //1.获取输入文本控件
 GTextInput input = view.GetChild("inputTxt").asTextInput;
 //2.控件相关API
 input.text = "输入的字符串";
 input.maxLength = 20; //最大长度
 input.displayAsPassword = false; //密码开关
 input.restrict = ""; //输入限制
 input.keyboardType = 0; //键盘类型
 input.promptText = "请输入密码"; //提示内容
 input.SetSelection(0, 4); //设置当前输入框选中的字符串范围
 //3.事件监听相关
 input.onChanged.Add(() =>
 {
     print(input.text);
 });
 //4.焦点事件监听
 input.onFocusIn.Add(() =>
 {
     print("焦点进入");
 });
 input.onFocusOut.Add(() =>
 {
     print("焦点离开");
 });
 //主动设置焦点
 input.RequestFocus();

 //输入完成事件监听(设置为单行时PC上有用)
 input.onSubmit.Add(() =>
 {
     print("输入完成" + input.text);
 });

😶‍🌫️4.组控件


  • 组是组件内用于可以批量管理元件和控件的特殊对象,统一管理多个元件

相当于变成一个对象的子对象的统一管理

在舞台上选定一个或多个元件、控件,然Ctrl+G,建立成组
在这里插入图片描述

在这里插入图片描述

  • 排除隐藏对象:勾选后,隐藏对象不会参与排列
 //1.获取高级组对象
 GGroup g = view.GetChild("group1").asGroup;

 //2.相关API

 g.y = 0; //设置位置
 g.visible = false; //设置显隐
 g.layout = GroupLayoutType.Horizontal; //改变布局
//3.判断归属
 GImage img = UIPackage.CreateObject("包名", "组名").asImage;
 view.AddChild(img);
 //设置该元件属于某一组
 img.group = g;
 for (int i = 0; i < view.numChildren; i++)
 {
     //我们只有通过这种遍历的方式 找到 组件中的 元件 是否在某一个组当中
     if( view.GetChildAt(i).group == g )
     {
         print(view.GetChildAt(i).name + "在组当中" + g.name);
     }
 }


😶‍🌫️5.控制器(组件的一个功能)


核心功能之一:如按钮就用到了控制器

  • 1.分页功能:一个组件可以切换不同的页面
    在这里插入图片描述

  • 2.按钮状态: 按钮通常有按下、鼠标悬浮等多个状态,我们可以利用控制器为每个状态安排不同的显示内容

  • 3.属性变化:利用控制器,我们可以使元件具有多个不同的形态,并且可以方便地切换

在这里插入图片描述

  • 导出为组件属性:可以在组件属性上面显示
  • 分页功能的切换:有以下功能
    在这里插入图片描述
      //1.获取控制器
      GComponent controller = view.GetChild("controllerTest").asCom;
      Controller c = controller.GetController("myController");
      //2.控制器重要API
      c.selectedIndex = 1;       //通过切换控制器页签  会触发事件        
      c.selectedPage = "page2";  //通过名字去切换页签 会触发事件
      c.SetSelectedIndex(1);     //通过索引切换不会触发事件  
      c.SetSelectedPage("page2");//通过名字去切换页签 不会触发事件
      GearBase.disableAllTweenEffect = true;关闭所有控制器的缓动播放
      //3.控制器事件相关
      c.onChanged.Add(() =>//控制器变化时监听
      {
          print("切换页签");
      });
      c.SetSelectedIndex(1);      
      GObject obj = controller.GetChild("bk");
      obj.onGearStop.Add(() =>//控制器有缓动效果 缓动结束后事件监听
      {
          print("结束缓动");
      });

😶‍🌫️6.关联系统(组件的一个功能)


类似于UGUI中的九宫格锚点,但是FGUI操作有点麻烦

  • 默认为左边的为控件的方位,右边为容器的就是组件的方位
    在这里插入图片描述

FairyGUI实现自动布局的核心技术

  • 快捷按钮
    在这里插入图片描述
  //1.设置关联
  obj.AddRelation(view, RelationType.Left_Left);
  obj.AddRelation(view, RelationType.Top_Top);
  //2.删除关联
  obj.RemoveRelation(view, RelationType.Left_Left);
  obj.RemoveRelation(view, RelationType.Top_Top);
  obj.relations.ClearAll();  //移除和所有对象的关联
  obj.relations.ClearFor(view);  //移除和指定对象的所有关联

😶‍🌫️7.标签(组件的一个功能)


标签主要是由文本和图片组成 ,是一个组合控件(组件)

  • 用途: 当我们需要在UI中使用图片+文字的组合显示时

  • 规则:组成完整标签的两部分

1.文本:可以是普通文本、富文本、标签、按钮 ——元件名字一定为title(自动)

2.图片:装载器、标签、按钮——元件名字一定为icon

在这里插入图片描述
在这里插入图片描述

  • 将标签拖到组件上之后,即可一键设置在这里插入图片描述

 //1.获取标签控件
 GLabel label = view.GetChild("标签名").asLabel;
 label.text = "";
 label.icon = "ui://xx/xxxx";
 
 GObject obj = view.GetChild("标签名");
 obj.text = "";
 obj.icon = "ui://xx/xxx";
 //2.标签控件常用API
 label.GetChild("title").asTextField; //获取title使用他的API
 label.GetChild("icon").asLoader//获取icon使用他的API
 label.titleColor; //文本颜色
 label.titleFontSize = 30;//文本大小

😶‍🌫️8.按钮(一个扩展组件)


在这里插入图片描述
在这里插入图片描述+ 文本标题和图形标题勾选后
在这里插入图片描述

  • 四个状态(未按,按下,进入,退出)
    在这里插入图片描述
  • 元件功能属性
    在这里插入图片描述
   

        //1.获取按钮控件
        GButton btn = view.GetChild("按钮名").asButton;
        btn.text = "按钮的内容";
        btn.icon = "ui://xx/xxxx";//图标

        GObject obj = view.GetChild("按钮名");
        obj.text = "";
        obj.icon = "ui://xx/xxxx";

在这里插入图片描述

  • 若面板上未如此设置,则通过以下代码动态创建
        //2.音效相关设置
        UIConfig.buttonSound =   (NAudioClip)UIPackage.GetItemAssetByURL("ui://xx/xxx");
        //设置默认音效,放在显示面板之前,不在这里
        UIConfig.buttonSoundVolumeScale = 0.5f;   //设置音效大小
        GRoot.inst.EnableSound();   //开启音效
        GRoot.inst.DisableSound();  //关闭音效      
        GRoot.inst.soundVolume = 0.5f;  //调整全局声音大小 ,包括 按钮 和 动效
        //3.事件监听相关
        btn.onClick.Add(() =>
        {
            print("按钮被点击");
        });
        btn.FireClick(true, true);        //通过代码控制是否触发按钮
        btn.onClick.Call();     //触发按钮中监听的函数 但是没有点击效果

😶‍🌫️9.单选和复选按钮


在这里插入图片描述

  • 复选按钮
    在这里插入图片描述
  • 单选按钮

①需要添加一个控制器
在这里插入图片描述
②点击连接
在这里插入图片描述
③即可形成互斥效果的单选按钮
在这里插入图片描述


 UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://Teach/btnMusic"); 
 //设置默认音效
 UIConfig.buttonSoundVolumeScale = 0.5f;
 GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
 GRoot.inst.AddChild(view);
 //1.获取单选和多选框
 GButton check = view.GetChild("按钮名").asButton;
 GButton radio = view.GetChild("按钮名").asButton;
 check.selected = true; //改变选中状态
 radio.selected = true; //改变选中状态
 Controller c = view.GetController("控制器名字"); //单选按钮来 建议通过获取控制器去切换选择状态
 c.selectedIndex = 1;

 //2.事件相关
 checkBox.onChanged.Add(() =>
 {
     print("状态现在为" + check.selected);
 });

😶‍🌫️10.进度条(本质:组件)


  • 原理:就是按进度改变一个元件的宽度、高度或填充比例
  • 自动创建
    在这里插入图片描述

在这里插入图片描述

  • 手动创建规则

在组件中按特定规则添加元件即可制作为进度条

组件中关键元件名内部规则:

  • bar:横向进度条改变宽度的元件。处于最大值时的宽度(可以是任意类型元件)
  • bar_v: 纵向进度条改变高度的元件。
  • title: 用于显示进度的标题,可以是装载器,标签,按钮
  • ani:如果进度条是序列帧动画,则0~100对应动画的帧索引

注意:设置bar的宽度为进度条,设置bar_v的高度为进度条处于最大值时的高度(可以是任意类型元件)

  • API相关:
    //1.设置默认音效
    UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://包名/音效名");
    UIConfig.buttonSoundVolumeScale = 0.8f;
    GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
    GRoot.inst.AddChild(view);
    //2.获取进度条
    GProgressBar pb = view.GetChild("进度条名").asProgress;
    //3.改变进度
    pb.value = 30;
    pb.TweenValue(100, 3); //让进度3秒内缓慢的变到100 

😶‍🌫️11.滑动条(本质:组件)


  • 滑动条与进度条相似,滑动条只是增加了一个按钮

在这里插入图片描述
在这里插入图片描述

  • 组件中关键元件名规则:

     bar:横向滑动条改变宽度的元件。
     bar_v: 纵向滑动条改变高度的元件。        title: 用于显示进度的标题,可以是文本、装载器,标签,按钮
     grip:用于拖动的按钮
    

注意:
①设置bar_v的高度为滑动条处于最大值时的高度(可以是任意类型元件)
②grip按钮应该与bar对象建立一个关联,并放置在进度条处于最大值时的位置。这个关联是:
③正向:grip左左关联到bar或者顶顶关联到bar_v;
④反向:grip顶顶关联到bar或者底底关联到bar_v。

 //1.获取滑动条
 GSlider slider = view.GetChild("滑动条名").asSlider;
 //2.改变进度
 slider.value = 100;
 //3.事件
 slider.onChanged.Add(() =>
 {
     print(slider.value);
 });

😶‍🌫️12.滚动条(本质:组件)


  • 需要配合滚动容器使用,是可选控件

  • 自动创建
    在这里插入图片描述
    在这里插入图片描述

  • 手动创建

      组件中关键元件名规则
      arrow1(可选):垂直滚动条时,代表上侧的按钮
      arrow2(可选):垂直滚动条时,代表下侧的按钮
      grip:表示滚动条中间的滑块按钮
      bar:限制区域,作占位用途
    
  • 需要配合滚动容器使用,现在还不可使用
    在这里插入图片描述


😶‍🌫️13.滚动容器(本质:组件)


  • 组件的溢出处理设置为“ 滚动”,那么该组件就成为了滚动容器

在这里插入图片描述

  • 属性相关:
    滚动条显示:默认勾选
    边缘回弹效果:默认勾选
    触摸滚动效果:默认勾选

  • 页面模式:
    以视口大小为页面大小,每次滚动的距离是一页。一般在移动平台上使用,PC上较少,拖动滚动条进行滚动操作与这个模式冲突。

  • 浮动显示:
    勾选后,滚动条不占据视口的位置,而是直接覆盖在视口上面。例如一个适用于手机的滚动条,它是细条且半透明的,只在滚动时才显示出来,用于提示滚动位置。那么我们把它设置为“浮动”,这样就不会挤占视口的显示空间。

在这里插入图片描述

  • 简单效果

在这里插入图片描述

  • 相关API
        //1.获取滚动容器
        ScrollPane scrollPanel;
        GComponent scroll = view.GetChild("滚动条名").asCom;
        scrollPanel = scroll.scrollPane;
        //2.滚动位置设置
        scrollPanel.posY = 0;
        scrollPanel.SetPercY(0.5f, true);  //按百分比滚动
        print(scrollPanel.viewWidth); //视口宽高
        print(scrollPanel.viewHeight);
        print(scrollPanel.contentWidth); //内容宽高
        print(scrollPanel.contentHeight);
        scrollPanel.ScrollToView() //设置指定元件出现在视口内
        scrollPanel.touchEffect = true;//触摸功能开关
        //3.事件相关
        scrollPanel.onScroll.Add(() =>  //当滚动视图位置改变时 
        {});
        scrollPanel.onScrollEnd.Add(() =>  //惯性移动停止回调
        { });
        scrollPanel.onPullDownRelease.Add(() =>  //下拉刷新回调
        {  });
        scrollPanel.onPullUpRelease.Add(() =>     //上拉刷新回调
        {});

😶‍🌫️14.列表(本质:组件)


组件的一种特殊扩展
在组件的基础上加入排序相关的功能
在这里插入图片描述
相关属性

  • 渲染顺序拱形:自定义一个索引显示在最前面,两侧的依次渲染
  • 选择控制:
    可以和控制器联动,这样当列表选中项目发生改变时,控制器也同时跳转到相同索引的页面
  • 分页控制:
    可以绑定一个控制器。当列表发生翻页滚动时(溢出处理必须为三种滚动之一,滚动必须勾选为页面模式),控制器也同时跳转到相同索引(页码)的页面。反之亦然,如果控制器跳转到某个页面,那么列表也同时滚动到相同索引(页码)的页面。
  • 项目资源
    在这里插入图片描述
  • 编辑列表
    在这里插入图片描述
  • 自动调整列表项目大小(默认不勾选,勾选可能会拉伸图像)
    在这里插入图片描述
        //默认竖直滚动条
        UIConfig.verticalScrollBar = "ui://包名/列表名";
        GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
        GRoot.inst.AddChild(view);
        //1.获取列表
        GList list = view.GetChild("列表名").asList;
        //2.组件的 添加和移除
        GObject obj = list.AddChild(UIPackage.CreateObject("包名", "图片名"));
        list.RemoveChild(obj);//移除列表
        obj.Dispose();//销毁

        //从列表缓存池池中取出或新建对象添加到列表中
        
        GObject obj3 = list.AddItemFromPool()//池子里new 个对象
        list.RemoveChildToPool(obj3); //删除一个item,并将对象返回池中
        list.AddItemFromPool();     //现在池子里面有一个对象 会直接取出来        
        list.RemoveChildToPoolAt(0);//删除指定位置item,并返回池中
        list.RemoveChildrenToPool();//删除一个范围内的item,或者全部删除,返回池子
         list.RemoveChildrenToPool(0,50);  //移除指定索引位置的对象                   
         list.GetFromPool("url地址")//从池中取出对象,并不会添加到列表中
          ReturnToPool//将对象返回池中,并不会从列表中移除

        //3.使用回调函数修改列表
        list.itemRenderer = RenderListItem;
        list.numItems = 20; //自动创建20个对象,在委托函数中进行初始化操作       
        list.numItems = 10; //每次重新赋值 会留下10个对象 多余的对象 放入池子中
        list.numItems = 20;//如果在重新变成20 多出来的10个 是之前放入池子的10个      
       list.ResizeToFit(); //重置大小
        //4.事件相关
        list.onClickItem.Add((obj) =>
        {
            print((obj.data as GObject).text);
        });
    private void RenderListItem(int index, GObject obj)//作为回调函数
    {
        //初始化创建的每一个对象
        obj.text = index.ToString();
    }
}
  • 虚拟列表和循环列表

虚拟列表,节约性能,如要创建1000个显示物件,但是列表中只能显示20个,每次滑动时,只更新这20个物件,达到显示1000个的效果

虚拟列表使用的前提条件

    1.必须要定义itemRenderer
    2.必须要开启滚动相关
    3.一开始就要把项目资源设置好 或者 我们可以通过代码设置项目资源
list.defaultItem = "通过url地址去关联项目资源";
  • 开启虚拟列表
         list.SetVirtual();
  • 循环列表只支持 单行或者单列布局,不支持流动布局和分页布局

若列表循环20个,则滚动列表一直是重复这二十个物件

        list.SetVirtualAndLoop();
        list.numItems = 20;

😶‍🌫️15.下拉框(本质:组件)


  • 自动创建
    在这里插入图片描述
    在这里插入图片描述

  • 手动创建

1.弹出组件的构成:背景图(与list宽高关联)+垂直滚动列表(命名为list并关联好项目资源)
2.button 下拉框需要一个按钮控制器(下拉框点击展开时,保持在down页,收回时保持在up也或over页)
3.title 可以是普通文本、富文本、标签、按钮

在这里插入图片描述

  • 相关API
  //1.获取下拉框
  GComboBox comboBox = view.GetChild("下拉框的而名字").asComboBox;
  //2.代码初始化内容
  comboBox.items = new string[] { "选1", "选2" , "选3" , "选4" };
  comboBox.icons = new string[] { "ui://包名/图片1", "ui://包名/图片2", "ui://包名/图片3", "ui://包名/图片4" };
  comboBox.values = new string[] { "11", "22", "33", "44" };
  
  print(comboBox.selectedIndex);  //通过索引通过他就可以得到 内容 图标 值
  print(comboBox.value);  //值 快捷获取值
  comboBox.selectedIndex = 2;  //通过索引设置
  comboBox.value = "44";  //通过值设置
  GRoot.inst.HidePopup();//代码关闭弹出项
  //3.事件相关
  comboBox.onChanged.Add(() =>
  {
      print("下拉框改变了" + comboBox.selectedIndex + "_" + comboBox.items[comboBox.selectedIndex]);
  });
  

🪶(快捷键


  • 拖动视图:鼠标滚轮
  • 重命名组件:F2
  • 成组:ctrl + G

🅰️


【Unityc#专题篇】之c#进阶篇】

【Unityc#专题篇】之c#核心篇】

【Unityc#专题篇】之c#基础篇】

【Unity-c#专题篇】之c#入门篇】

【Unityc#专题篇】—进阶章题单实践练习

【Unityc#专题篇】—基础章题单实践练习

【Unityc#专题篇】—核心章题单实践练习


你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作,输出优质内容的最大动力!


在这里插入图片描述


评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秩沅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值