前言
项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中找到了方法,趁着记忆犹新,写下动态创建UGUI的方法,供需要的朋友参考
你将学到什么?
一、新建一个Test项目
首先我们新建一个名为 Test 的项目来实践我们这次的内容,项目创建成功后,我们新建一个Button对象,如下图:
然后我们设置一下Cavans的缩放模式和尺寸,本例中我们以iPhone6的尺寸大小为准,我们选中
Canvas
,然后在其
Canvas Scaler
组件中,修改
Ui Scale Mode
为
Scale With Screen Size
,然后将
分辨率设置为750*1334
三、动态创建UGUI对象的原理说明
在开始下面的内容之前,先在这边讲解一下动态创建UGUI对象的原理,我们看看Unity官方文档的介绍说明:(懒得看到大段文字的朋友可以直接跳过这段,看后面的简单说明)
Creating UI elements from scripting
If you are creating a dynamic UI where UI elements appear, disappear, or change based on user actions or other actions in the game, you may need to make a script that instantiates new UI elements based on custom logic.
Creating a prefab of the UI element
In order to be able to easily instantiate UI elements dynamically, the first step is to create a prefab for the type of UI element that you want to be able to instantiate. Set up the UI element the way you want it to look in the Scene, and then drag the element into the Project View to make it into a prefab.
For example, a prefab for a button could be a Game Object with a Image component and a Button component, and a child Game Object with a Text component. Your setup might be different depending on your needs.
You might wonder why we don’t have a API methods to create the various types of controls, including visuals and everything. The reason is that there are an infinite number of way e.g. a button could be setup. Does it use an image, text, or both? Maybe even multiple images? What is the text font, color, font size, and alignment? What sprite or sprites should the image use? By letting you make a prefab and instantiate that, you can set it up exactly the way you want. And if you later want to change the look and feel of your UI you can just change the prefab and then it will be reflected in your UI, including the dynamically created UI.
Instantiating the UI element
Prefabs of UI elements are instantiated as normal using the Instantiate method. When setting the parent of the instantiated UI element, it’s recommended to do it using the Transform.SetParent method with the worldPositionStays parameter set to false.
Positioning the UI element
A UI Element is normally positioned using its Rect Transform. If the UI Element is a child of a Layout Group it will be automatically positioned and the positioning step can be skipped.
When positioning a Rect Transform it’s useful to first determine it has or should have any stretching behavior or not. Stretching behavior happens when the anchorMin and anchorMax properties are not identical.
For a non-stretching Rect Transform, the position is set most easily by setting the anchoredPosition and the sizeDelta properties. The anchoredPosition specifies the position of the pivot relative to the anchors. The sizeDelta is just the same as the size when there’s no stretching.
For a stretching Rect Transform, it can be simpler to set the position using the offsetMin and offsetMax properties. The offsetMin property specifies the corner of the lower left corner of the rect relative to the lower left anchor. The offsetMax property specifies the corner of the upper right corner of the rect relative to the upper right anchor.
Customizing the UI Element
If you are instantiating multiple UI elements dynamically, it’s unlikely that you’ll want them all to look the same and do the same. Whether it’s buttons in a menu, items in an inventory, or something else, you’ll likely want the individual items to have different text or images and to do different things when interacted with.
This is done by getting the various components and changing their properties. See the scripting reference for the Image and Text components, and for how to work with UnityEvents from scripting.
动态创建UGUI对象的方法,简单来说就是将我们需要创建的UGUI对象制作成一个Prefab,然后使用Instantiate方法将其实例化,最后使用相关的API对其属性进行动态设置
四、制作自定义的Text Prefab
接下来我们就来创建自定义的Text Prefab,为动态创建做准备,首先我们会自定义一个如下图所示的Text:
接下来我们回到 Animation 编辑器里面,在这个里面我们可以对MyText对象的一个属性进行动态变化,从而形成动画效果,Unity对每个对象可以操控的属性变量都列举出来了,这里我们以 Text 对象来举例,我们点击 Add Property 按钮,会弹出下级菜单,我们在菜单中可以看到能够操作的属性变量有3大类:
6、制作成Prefab
做完上面这些工作后,我们便可将MyText制作成一个Prefab了,制作方法很简单,直接将MyText拖入到Prefabs文件夹就可以了,这里就不做详细介绍了
五、实现点击Button动态创建一个MyText
首先我们选中最开始创建的Button对象,然后滑动 Inspector 看到 Button (Script) 组件的相关属性,我们可以看到其中有一个 On Click() 属性,这里就是实现Button点击的响应事件的地方
拖入之后,我们就可以看到Function里面有很多动作可以供我们选择,而且Unity还很温馨的给我们按照组件类型来分类了,关于每个动作的含义和用法,感兴趣的朋友可以自己去查阅官方文档,本例中,我们需要的动作是没有的,所以我们需要自己创建一个动作
1、创建我们自己的响应动作
首先我们给Button添加一个脚本,命名为 MyButtonEvent ,然后输入一下代码:
写完代码,保存一下,然后回到编辑器
2、选择响应动作
此时我们选中Button对象,我们可以在 On Click() 中找到我们刚刚创建的 createMyText 动作(或者叫方法),如下图: