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

One, the Button component

Button component: Responds to a user click and is used to initiate or confirm an action.

1.1 Component Introduction

Properties:

• Interactible: This property determines whether the component accepts input. When this property is set to false, the interaction is disabled and the transition state is also set to disabled.
• Transition: Within the optional component, there are several Transition options, depending on the current state of the optional component. The different states include normal, Highlight, Press, and Disabled.
• Navigation: There are also many Navigation options available to control how the keyboard Navigation of the control is implemented.

Transition mode :(color as an example)

• Target Graphic: A Graphic used to interact with a component.
• Normal Color: The Normal Color of the control
• Highlighted Color: Color when the control is Highlighted
• Pressed: Pressed Color of the control
• Disabled Color: Indicates the Color when the control is Disabled
• Color Multiplier: This multiplies the Color of each transition by its value. This enables the creation of colors greater than 1, thus lightening the color (or Alpha channel) on graphic elements whose base color is less than white (or less than full Alpha).
• Fade Duration: The time (in seconds) required to Fade from one state to another

1.2 Code Listening

• The listener has no parameter form

public Button m_Btn;
void Start()
{
	  // Listen for no-argument functions
    m_Btn.onClick.AddListener(OnClickBtn);
}

public void OnClickBtn(int i)
{
    Debug.Log("Function response with parameters, the parameters are :" + i);
}
Copy the code

• Entrusted listening

public Button m_Btn;
void Start()
{
	  // Authorize listening
    m_Btn.onClick.AddListener(delegate () {
            OnClickBtn(111);
        });
}

public void OnClickBtn(int index)
{
    Debug.Log("Delegate listen, parameter is:" + index);
}
Copy the code

• Lambda simplification

public Button m_Btn;
void Start()
{
	  / / Lambda listening in
    m_Btn.onClick.AddListener(() => {
            OnClickBtn(111);
        });
}

public void OnClickBtn(int index)
{
    Debug.Log("Delegate listen, parameter is:" + index);
}
Copy the code

Two, Toggle component

Switch component: A check box that allows the user to turn on or off an option.

2.1 Component Introduction

attribute

• Interactable: whether to receive clicks
• Transition: Property that determines how a control visually responds to user actions. 1
• Navigation: Properties that determine the order of controls. 1
• Is On: Whether the switch Is On at the beginning
• Toggle Transition: Graphically reacts to changes in the value of a switch. The options provided are None_, where the check mark appears or disappears directly, and Fade_, where the check mark fades in or out.
• Graphic: The image used for the check mark (the check sign √).
• Group: indicates the switch Group to which the switch belongs.

2.2 Code Listening

By default, the listener of Toggle passes the bool value of whether it is currently checked, so that users can use it directly. If you need to add other parameters, you can also use the example of Button delegate or Lambda.

public Toggle m_Toggle;

void Start()
{
    m_Toggle.onValueChanged.AddListener(OnClickToggle);
}

void OnClickToggle(bool isOn)
{
    if (m_Toggle.isOn)
    {
        Debug.Log("This Toggle is checked");
    }
    else
    {
        Debug.Log("This Toggle is unchecked"); }}Copy the code

Third, Slider component

Slider component: Allows the user to drag the mouse to select values from a predetermined range.

3.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 Rec: A graph used to Fill the area of the control.
• Handle Rect: Graphics used to slide the Handle part of the control
• Direction: indicates the Direction in which the slider value increases when you drag the handle. Options include Left To Right, Right To Left, Bottom To Top, and Top To Bottom.
• Min Value: The slider Value when the handle is at the very bottom (as determined by the Direction attribute).
• Max Value: The slider Value when the handle is at the top of the pole (as determined by the Direction attribute).
• Whole Numbers: Should I restrict the slider to integer values?
• Value: the current Value of the slider. If the value is set in the Inspector, it will be used as the initial value, but when the value changes, the runtime value will also change.

3.2 Code Listening

public Slider m_Slider;

void Start()
{
    // Listen --> will automatically pass value as an argument
    m_Slider.onValueChanged.AddListener(OnValueChanged_Slider);
}

void OnValueChanged_Slider(float value)
{
    Debug.Log("Slider value changes response method, current Slider value :" + value);
}
Copy the code

Ok, that’s enough for today, we’ve already learned three UI interactive components dynamic listening, and we’ll see you in the next section.