只知道预制体是用来生成物体的?看我如何使用Unity生成UI预制体

简介: 本篇就介绍一下,如何使用UI的预制体,实例化预制体,以及在生成预制体的时候给预制体身上的UI属性就行设置。

一、前言

本篇就介绍一下,如何使用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、显示信息,需要在生成预制体的时候,将预制体身上的按钮进行事件绑定,然后将参数传递给函数,进行显示



相关文章
|
3月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
141 3
|
4月前
|
前端开发 开发工具 图形学
PicoVR Unity SDK⭐️三、详解与UI的交互方式
PicoVR Unity SDK⭐️三、详解与UI的交互方式
|
4月前
|
前端开发 图形学
Unity精华☀️UI和物体可见性的判断方法
Unity精华☀️UI和物体可见性的判断方法
|
4月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
103 0
|
4月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
4月前
|
图形学
小功能⭐️Unity判断是否单击到了UI
小功能⭐️Unity判断是否单击到了UI
|
4月前
|
图形学
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
|
4月前
|
图形学
小功能⭐️解决Unity 3D UI遮挡穿透问题
小功能⭐️解决Unity 3D UI遮挡穿透问题
|
6月前
|
图形学
【unity小技巧】手戳代码程序化绘制地形Terrain树和预制体物品、动物
【unity小技巧】手戳代码程序化绘制地形Terrain树和预制体物品、动物
52 0
|
6月前
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
385 0
下一篇
无影云桌面