一、前言
本篇就介绍一下,如何使用UI的预制体,实例化预制体,以及在生成预制体的时候给预制体身上的UI属性就行设置。
二、搭建场景
2-1 预制体制作
比如,我们要制作一个人力管理软件,搭建场景:
网络异常,图片无法展示
|
制作每个人员的信息显示:
网络异常,图片无法展示
|
网络异常,图片无法展示
|
注意:给Content添加了一个GirdLayoutGroup组件用来控制子节点的位置,添加了一个ContentSizeFitter用来自动扩容Content组件的大小
新建脚本PersonItem.cs脚本,编辑代码:
using UnityEngine; using UnityEngine.UI; public class PersonItem : MonoBehaviour { public Text ID; public Text Name; public Text Sex; public Text Age; public Text Post; public Text Work; public Button ViewInfo; public Image Backgroud; } 复制代码
这个脚本挂载在预制体身上,主要用来控制预制体的信息:
网络异常,图片无法展示
|
然后将预制体从场景中拖到项目区的Resources文件夹内做成一个预制体:
网络异常,图片无法展示
|
2-2 新建人员弹窗
网络异常,图片无法展示
|
给关闭按钮添加事件:
网络异常,图片无法展示
|
2-2 显示人员详细信息弹窗
网络异常,图片无法展示
|
关闭按钮,同理可得:
网络异常,图片无法展示
|
三、实现代码
新建一个PersonControl.cs脚本:
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class PersonControl : MonoBehaviour { public PersonItem PersonItemParfabs;//人员预制体 public Transform PersonParent;//人员父节点 public GameObject PopupAddInfo;//弹窗 添加信息 public InputField InputName; public Dropdown DropSex; public InputField InputAge; public InputField InputPost; public InputField InputWorkExp; public Button BtnAddInfo;//弹窗 中添加信息的所有组件 public GameObject PopupShowInfol;//弹窗 显示信息 public Text Name; public Text Sex; public Text Age; public Text Post; public Text WorkExp;//弹窗中要显示的信息的所有组件 public Button AddPerson;//添加人员按钮 private int ID = 0; void Start() { //初始化关闭所有弹窗 PopupAddInfo.SetActive(false); PopupShowInfol.SetActive(false); //添加按钮事件 AddPerson.onClick.AddListener(() => { PopupAddInfo.SetActive(true); }); BtnAddInfo.onClick.AddListener(AddInfoEvent); } private void AddInfoEvent() { ID++; PersonItem item = Instantiate(PersonItemParfabs, Vector3.zero, Quaternion.identity, PersonParent); item.ID.text = ID.ToString(); item.Name.text = InputName.text; item.Sex.text = DropSex.captionText.text; item.Age.text = InputAge.text; item.Post.text = InputPost.text; item.Work.text = InputWorkExp.text; item.ViewInfo.onClick.AddListener(() => ShowInfo(item.Name.text, item.Sex.text, item.Age.text, item.Post.text, item.Work.text)); item.Backgroud.color = ID % 2 == 1 ? Color.blue : Color.red;//通过奇偶区分 背景演示是蓝色还是红色 用了一个三元表达式 PopupAddInfo.SetActive(false); } private void ShowInfo(string name, string sex, string age, string post, string work) { PopupShowInfol.SetActive(true); Name.text = name; Sex.text = sex; Age.text = age; Post.text = post; WorkExp.text = work; } } 复制代码
将脚本附到Canvas对象上,然后将对应对象拖入到对应的PersonControl脚本的卡槽中:
网络异常,图片无法展示
|
网络异常,图片无法展示
|
运行程序:
网络异常,图片无法展示
|
网络异常,图片无法展示
|
四、后言
整体界面比较丑,但是总体的功能是实现了
主要有三点: 1、预制体的制作,以及写脚本挂载在预制体身上用来用来预制体的信息 2、生成 预制体的时候,去设置预制体身上挂载的脚本的信息 3、显示信息,需要在生成预制体的时候,将预制体身上的按钮进行事件绑定,然后将参数传递给函数,进行显示