In unity, use ugui to make an input drop-down box


Input drop-down box for ugui production in unity


We can often see such a UI control in search engines and some web pages. It looks like an input box. A list will pop up after input (or it will pop up without input, such as the history of search engines). You can select the contents in the list and then make some processing.
Obviously, there is no such type of control in ugui. Then you can only make one by yourself.

Component analysis

First, an input box is essential.
After input, there is a list that can display multiple contents, so there is a list.
Making a UI control from scratch is difficult and troublesome. We use the existing controls in ugui to make a composite control.
So we naturally think of inputfield and dropdown components, an input box and a drop-down list.
Well, it seems to meet our needs.
But there will be some pits here, mainly caused by dropdown. So I gave up using dropdown. There is a stepping pit below. If I don’t want to know, I can skip it.

In dropdown, you can use the public variable value to change the currently selected value in the drop-down list.
But there is a hidden hole: the default value of dropdown is the first one in the drop-down list
If you change the value with code and it is also the first index, that is, 0, the onvaluechanged event of dropdown will not be called. This means that if the index of the drop-down list option clicked is the same as the last time, the onvaluechanged event of the dropdown will not be called.
The solution to this problem can be rewritten dropdown.

In dropdown, if you want the code call to display the drop-down list, you can use the show method under dropdown.
While displaying the drop-down list, dropdown will create a blocker object (used to intercept events) on the scene, and change the current focus control to dropdown.
Of course, you can also use code to change the current focus control back to inputfield, but this brings another problem. When it becomes a focus control, inputfield will automatically select all the text in the input box, and the author has not found a solution after trying many methods.
For example, using the API of inputfield:

  1. Variable caretposition – current inputfield cursor position (and selection tail).
  2. Variable selectionanchorposition – the starting point of the selection.
  3. Variable selectionfocusposition – the end point of the selection.
  4. Public function forcelabelupdate – forces the label to be updated immediately. This recalculates the position of the cursor and visible text.
  5. Common function movetextend – moves the cursor index to the end of the text.
    The above API does not solve this problem, which may be caused by the problem of code execution sequence. The author has not studied its internal implementation, and those who are interested can study it by themselves.

So what else can we do? Let’s go back and see what we need, an input box and a list.
We have the input box. What about the list. So the author thought of using Scrollview to make.
Follow dropdown to customize the list we need.
Design a template of an item and achieve the desired effect through dynamic code creation and initialization.
Then let’s introduce the production process

Production process

Put the effect display and its structure at the beginning
In unity, use ugui to make an input drop-down boxIn unity, use ugui to make an input drop-down box

First, create an inputfield on the scene, find the sub object placeholder and the text component on the text, and change the alignment to left centered. There is no need to change other parameters. If there are other needs, change them by yourself.
In unity, use ugui to make an input drop-down box


Then create a Scrollview as a sub object of inputfield. Since the author does not need a slider, both scrollbars are deleted. The parameters of Scrollview are modified as follows: set the position of anchor and pivot, uncheck horizontal, and empty the scrollbars of horizontal and vertical.
Scrollsensitivity is changed to 5 to better respond to mouse scrolling events. This and other parameters change according to readers’ preferences.
In unity, use ugui to make an input drop-down box


Then create a button named item under Scrollview viewport content as our template
Adjust the recttransform parameter as follows:,The focus is on anchor and pivotThe purpose is to facilitate the layout of dynamically created items
In unity, use ugui to make an input drop-down box


The next step is to write logic to achieve our effect
What is mounted on inputfield is our main script this timeInputTip
Set up a publicGameObjectTo set the template, and then under the display input boxTipViewDynamically create or update the item content when creating an item, and mount the object when creating an itemInputTipItemScript to control subsequent processing.
Then there is the logic of processing input and display. When the text of inputfield input box changes, we need to check the text content to decide whether to display itTipView
Before displaying, first notify other scripts that have added monitoring to set the text to be displayed, and then display it.
When an entry is clicked, the script of the entry is mountedInputTipItemInform inputtip to listen to it to let us know which one is clicked, and then change the value on inputfield and hide itTipView
At the end of the paper, the examples of members and functions written by the author are given.

Note: This article does not achieve more effects on Scrollview, such as automatic setting of display position and size, arrangement of items, etc
The demonstration is to mount vertical layout group and content size fitter components on the content under Scrollview to achieve automatic layout. If you want more and better effects, it will be much better to control it yourself.


Although not all UI controls that we may use are given in ugui, we can expand and customize them with those already provided to us, which can better meet our needs.
Finally, this is the author’s first tutorial. I also hope that all watchers will forgive me and point out any mistakes!

Click to view the code

Text m_text;
Button m_button;
private class InputTipItemEvent : UnityEvent{}
//The entry click event passes itself to inputtip for processing
private InputTipItemEvent m_onClick;
//The index of the entry in the list
int m_index;
//The value represented by this entry
string Value;
//The initialization function is used to initialize the index and the displayed text. It must be called to initialize before using the script
public void Initialized(int index, string text);
//Set the displayed text, which is mainly used to reset the displayed text externally
public void SetValue(string text);
//Internal setting index and displayed text
private void SetValue(int index, string text);
//Add click listening
public void AddListener(UnityAction call);
//The corresponding click event is added to its own button component
private void OnClick();
Click to view the code

InputField m_inputField;
GameObject m_scrollView;
public class InputTipEvent : UnityEvent { }
//All current entries
List m_tipItems;
//Text entry to display
List m_itemTexts;
//Show tipview
bool m_isShowing;
//Item template
public GameObject itemTemplate;
//Callback function when the input text changes
public InputTipEvent onValueChanged;
//The text of the current input box
public string Value;
//An entry object is created from the template and is the child of the parent object of the template object
protected virtual GameObject CreateTipItem(GameObject template);
//Create item list view
protected virtual bool CreateTipView();
//Add an entry
protected virtual InputTipItem AddTipItem(int index, string text);
//Destroy an entry
protected virtual void DestroyItem(InputTipItem item);
//Destroy all entries
public void DestroyItemView();
//When an entry is clicked
protected virtual void OnItemClick(InputTipItem item);
//Show item view
public void ShowTipView();
//Hide item view
public void HideTipView();
//Update entry display
private void UpdateTipViewShow();
//Callback function when the input text changes
protected virtual void OnInputValueChanged(string text);
//Create displayed entry information
public void CreateTipViewTexts(params string[] texts);