This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Today we will continue to introduce the dynamic listening of the remaining three UI interaction components. If you have not seen the code dynamic listening UI interaction components (1), you can take a look at them. Although they are independent, it will help you understand.

One, Scrollbar component

Scrollbar component: Allows the user to scroll through images or other views that are too large to see fully.

1.1 Component Introduction

attribute

  • Interactable: Whether this component accepts input
  • Transition: Property that determines how a control visually responds to user actions. 1
  • Navigation: Properties that determine the order of controls. 1
  • Fill Rect: A graphic for the background area of the control.
  • Handle Rect: Graphics used to slide the Handle part of the control
  • Direction: Indicates the Direction in which the value of the scroll bar increases when you drag the handle. Options include Left To Right, Right To Left, Bottom To Top, and Top To Bottom.
  • Value: the initial position Value of the scroll bar, ranging from 0.0 to 1.0.
  • Size: the proportional Size of the handle in the scroll bar, ranging from 0.0 to 1.0.
  • Number Of Steps: The Number Of different scrolling positions allowed on the scroll bar. (When the current value is less than 1, the slider can slide to any position; NumberOfSteps = 3, then the slider moves 1/3 at a time;)

1.2 Code Listening

Default listener: The Value of the Scrollbar is automatically passed as a property.

Extended listening: Use a Lambda expression to pass multiple arguments

public Scrollbar m_Scrollbar;

void Start()
{
    // Listen --> will automatically pass value as an argument
    m_Scrollbar.onValueChanged.AddListener(OnValueChanged_Scrollbar);
    
    // Or --> There are other arguments that can be written like this
    m_Scrollbar.onValueChanged.AddListener((float v) => { OnValueChanged_Scrollbar(v, m_Scrollbar.gameObject); });
}

void OnValueChanged_Scrollbar(float value)
{
    Debug.Log("Slider value changes response method, current Slider value :" + value);
}
void OnValueChanged_Scrollbar(float value, GameObject go)
{
    Debug.Log("Slider value change response method, current Slider name and value :" + go.name + value);
}

Copy the code

This should be easy to understand from the previous post, because the default listening mode is exactly the same as the Slider module, and the extended listening mode was explained in the Button module.

Second, the DropDown component

Dropdown option component: Can be used to let the user select a single option from a list of options.

2.1 Component Introduction

attribute

  • Interactable: Whether this component accepts input
  • Transition: Property that determines how a control visually responds to user actions.
  • Navigation: : properties that determine the order of controls.
  • Template: Rectangle transformation for the drop-down list Template.
  • Caption Text: A Text component that holds the Text of the currently selected option.
  • Caption Image: Image component that holds the Image of the currently selected option.
  • Item Text: The Text component used to hold the Text of a list Item.
  • Item Image: The Image component used to hold the Image of the list Item.
  • Value: index of the currently selected option. 0 for the first option, 1 for the second, and so on.
  • Options: A list of possible Options. You can specify a text string and an image for each option.

2.2 Code Listening

The listening method is basically the same as above, but the meaning of the parameters is different. One is the Value of the progress Value, and the other is the index Value of the drop-down list


public Dropdown m_DropDown;

void Start()
{
    m_DropDown.onValueChanged.AddListener(OnDropValueChange);
}

void OnDropValueChange(int v)
{
    // Handle other logic when switching options...
    Debug.Log("The index of the click down control is..." + v);
}
Copy the code

The Input Field component

Input component: a method for making the Text of a Text control editable.

3.1 Component Introduction

attribute

  • Interactable: Whether this component accepts input
  • Transition: Property that determines how a control visually responds to user actions.
  • Navigation: Properties that determine the order of controls.
  • TextComponent: A reference to the text element used as the content of the input field
  • Text: indicates the start value. The initial text placed in the field before editing begins.
  • Character Limit: specifies the maximum number of characters that can be entered in the input field.
  • Content Type: Defines the Type of characters accepted by the input field.
  • Line Type: Line feed Type
  • Placeholder: Placeholder, default value, initial value: “Enter text…”
  • Caret Blink Rate: cursor blinking Rate, which defines the blinking Rate of the flag on the line.
  • Caret Width: Cursor Width, which defines the Width of the flag on the line.
  • Custom Caret Color: Whether to start cursor Color setting
  • Caret Color: cursor Color
  • Selection Color: The background Color of the selected text section.
  • Hide Mobile Input: Hides native Input fields attached to the on-screen keyboard of a Mobile device. (IOS only)

3.2 Code Listening

Input component: There are two operations that can be listened on, one when the content is changed, and the other when the edit is finished. The listening is similar, except that the argument is the user input in the component that is returned as a string

public InputField m_InputField;

void Start()
{
    // Call back when the content is changed
    m_InputField.onValueChanged.AddListener(OnInputValueChanged);
    // Callback at the end of content editing
    m_InputField.onEndEdit.AddListener(OnInputEndEdit);
}

void OnInputValueChanged(string context)
{
    Debug.Log("Input box content changed to :" + context);
}

void OnInputEndEdit(string context)
{
    Debug.Log("The content of the input box is edited, and the final content is :" + context);
}
Copy the code