The use and expansion of Toggle and ToggleContainer check boxes in cocosCreator

Version: 3.4.0

Language: TypeScript

Environment: Mac

Introduction

For the use of check boxes, there are two main components in cocosCreator:

• Toggle is used to implement CheckBox
• ToggleContainer is invisible and generally not used alone. It is mostly used with multiple Toggle to implement RadioButton

The inheritance structure is as follows:

Toggle

Button

Component

ToggleContainer

The implementation of Toggle inherits from Button, so there are many similarities between using Toggle and Button, such as:

Both support:

• Interactable is used to set whether it can be interacted with. If it is unchecked it means it is disabled.
• Transition is used to change the button click state, supporting NONE, COLOR, SPRITE and SCALE types.
• ClickEvents is used to set button event callback related

For event callbacks, pay attention to the distinction:

• CheckEvents is mainly used for click callback event processing of check boxes. It accepts two parameters: Toggle itself and custom data
• ClickEvents is mainly used for button click callback processing and accepts two parameters: Event object and custom data

At the same time, please note: The compiler supports two parameters, but the script only supports one parameter, that is, no custom data is passed.

Toggle

There are two ways to set event callbacks:

1. Through the compiler’s CheckEvents setting
2. Set via script code

@property(Toggle) toggle: Toggle = null;

protected onEnable(): void {<!-- -->
  this.toggle.node.on(Toggle.EventType.TOGGLE, this.checkToggleEvent, this);
}

protected onDisable(): void {<!-- -->
  this.toggle.node.off(Toggle.EventType.TOGGLE, this.checkToggleEvent, this);
}

// Compiler settings support two parameters: toggle itself and custom parameters
// Script setting supports only one parameter: toggle itself
public checkToggleEvent(toggle: Toggle, customData: string) {<!-- -->
  // Whether to select
  const isCheck = toggle.isChecked;
  if (customData) {<!-- -->
    console.log(`Compiler settings, custom parameters: ${<!-- -->customData}, whether ${<!-- -->isCheck}` is selected);
  } else {<!-- -->
    console.log(`Script callback settings, whether ${<!-- -->isCheck}` is selected);
  }
}

There is only one type of Toggle event callback:

export enum cocos_ui_toggle_EventType {<!-- -->
TOGGLE = "toggle"
}

Expand

In cocosCreator, the event callback touch is determined by the area size of UITransform.
When using Toggle, you may have the following problems:

• The touch area is small, so it is difficult to accurately click on the check mark area.
• The user clicks on the text area and there is no click event

If optimized, there are several ways:

1. For checkmarks and background images, add more transparent areas to ensure the images are larger.
2. Add touch click events to nodes in the text area
3. Assemble Toggle through nodes

This article adopts the third method:

Set the size related through the node, and then add the event callback in the script

@property(Node) toggleNode: Node = null;

private _isClick: boolean = false; // Whether Button is selected

protected onLoad(): void {<!-- -->
  // initialization tag
  this._btnMark = this.toggleNode.getChildByName("mark");
this._btnMark.active = this._isClickBtn;
}
protected onEnable(): void {<!-- -->
this.toggleNode.on(Node.EventType.TOUCH_END, this.clickNodeEvent, this);
}

protected onDisable(): void {<!-- -->
this.toggleNode.off(Node.EventType.TOUCH_END, this.clickNodeEvent, this);
}

// Use simulated touch to implement Toggle. The main purpose is to increase the touch area.
private clickNodeEvent() {<!-- -->
  this._isClick = !this._isClick;
  console.log(`The third Toggle clicked, whether ${<!-- -->this._isClickBtn}` is selected);
  this._btnMark.active = this._isClickBtn;
}

This method can be used to encapsulate Toggle.

ToggleContainer

The ToggleContainer component is generally not used alone, but is mostly used with multiple Toggle to implement RadioButton.

Therefore, we can add the Layout component under this component for typesetting.

Notice:

• Event callbacks are only CheckEvents
• The event callback is written in the same way as Toggle. Just refer to Toggle’s event callback. Everything is the same.

However, in the development of the project, if there are multiple Toggles, we may need to clarify which Toggle was clicked. We can write it like this:

public singleGroupEvent(toggle: Toggle, index: string) {<!-- -->
  // Get the toggle array reference managed by toggleContainer
  const toggleItems = this.toggleContainer.toggleItems;
  // Get the index of the current toggle
  const index = toggleItems.indexOf(toggle);
  console.log(`toggleContainer selection index: ${<!-- -->index}, whether selected: ${<!-- -->toggle.isChecked}`);
}

The main parameters used are toggleItems

Expand

Things to note when using ToggleContainer:

• The provided AllowSwitchOff parameter is only used for a single Toggle button to achieve repeated selection and deselection.
• Only one of multiple Toggles is supported in the selected state.

If you want to implement multi-select button selection, do not use this component. We can do this:

• Create a node and add Layout layout component
• Add Toglge and set the callback of CheckEvents through the compiler, assuming the method is multipleSelectEvent
• Create multiple Toggle, and then write the method in the script as follows:

public multipleSelectEvent(toggle: Toggle, data:string) {<!-- -->
  let indexes = [];
  // Get all children under the node
  const toggleNodes = this.containerNode.children;
  // Detect whether toggle is selected by traversing
  for (let i = 0; i < toggleNodes.length; + + i) {<!-- -->
    const toggle = toggleItems[i].getComponent(Toggle);
    if (toggle.isChecked) {<!-- -->
      indexes.push(i + 1);
    }
  }
  console.log("Multi-select button group, the selected index is: ", indexes.toString());
}

The main principle is to obtain which one is selected through traversal of child nodes.

Finally, I wish you all a happy study and life!