Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

One, foreword

This article will show you how to use the UI preform, instantiate the preform, and set the UI properties on the preform when it is generated.

Second, set up the scene

2-1 Prefabrication system

For example, we want to make a human resource management software and set up a scene:

Make information display for each person:

Note: Added a GirdLayoutGroup component to the Content to control the location of child nodes and a ContentSizeFitter component to automatically increase the size of the Content component

Create a new script personitem. cs script and edit the code:

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;
}
Copy the code

This script is mounted on the preform and is mainly used to control information about the preform:

Then drag the prefab from the scene into the Resources folder of the project area to make a prefab:

2-2 New personnel popup window

Add an event to the close button:This hides the panel when you click the close button

2-2 Display personnel details pop-up window

Close button, similarly:

Three, implementation code

Create a new personControl.cs script:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PersonControl : MonoBehaviour
{
    public PersonItem PersonItemParfabs;// Personnel prefab
    public Transform PersonParent;// Staff parent node

    public GameObject PopupAddInfo;// Popup to add information
    public InputField InputName;
    public Dropdown DropSex;
    public InputField InputAge;
    public InputField InputPost;
    public InputField InputWorkExp;
    public Button BtnAddInfo;// Add information to all components in the popover

    public GameObject PopupShowInfol;// Popup displays information
    public Text Name;
    public Text Sex;
    public Text Age;
    public Text Post;
    public Text WorkExp;// All components of the information to be displayed in the popup

    public Button AddPerson;// Add people button
    private int ID = 0;

    void Start()
    {
        // Initializes close all popovers
        PopupAddInfo.SetActive(false);
        PopupShowInfol.SetActive(false);

        // Add button events
        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;// Use a ternary expression to differentiate between blue and red in the background demo
        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; }}Copy the code

Attach the script to the Canvas and drag the corresponding object into the slot of the corresponding PersonControl script:

Run the program:

Four, after the speech

The overall interface is ugly, but the overall functionality is achieved

There are mainly three points: 1, the production of precast body, as well as writing scripts mount on precast body used to used to precast body information, generate 2 precast body, to set up the prefabricated body body mount script of 3, according to information, the need to generate the precast body, the button will be prefabricated body for event, then the parameter passed to a function, for display