# UIScrollView sliding component
# Overview
UIScrollView is a control component with a scrolling function, which realizes the effect of controlling the sliding of the content area according to the information of itself and the content area.
# Static attribute description
Movement: The enumeration value of the sliding direction type of UIScrollView
// engine.UIScrollView.Movement
enum Movement {
Horizontal,
Vertical
}
# Property description
| Property name | Type | Default value | Description |
|---|---|---|---|
| movement | Movement | Movement.Vertical | The sliding direction of UIScrollView. |
| minContextMove | number | 0 | The minimum sliding distance relative to the starting point of the sliding. If set, UIScrollView automatically calculates the minimum sliding distance logic to fail, and the minimum value is fixed at this value. |
| maxContextMove | number | 0 | The maximum sliding distance relative to the starting point of the sliding. If set, UIScrollView automatically calculates the maximum sliding distance logic invalid, and the maximum value is fixed at this value. |
| moveDistance | number | 0 | Read-only attribute, relative to the starting point of the sliding, the distance that has been slid in the positive direction. |
| disableDragIfFits | boolean | true | When the size of the content area is smaller than the sliding area (corresponding to the size of Transform2D), whether to disable sliding. |
| snapToStart | boolean | false | After sliding to the top (less than minContentMove), whether to allow sliding |
| snapToEnd | boolean | false | After sliding to the end (greater than maxContentMove), whether to allow sliding |
| autoFix | boolean | false | Whether to enable the component According to the size of the content area and the size of the sliding area (corresponding to the Transform2D size), move the content area to the aligned position relative to the current component, and the content area will only be based on the first layer of UIScrollView The size of the element is adapted to the position. |
| cellAlignmentX | number | 0 | In the case of autoFix, the content area is located in the horizontal relative position of the sliding area (corresponding to the size of Transform2D), and the value range is (0-1). |
| cellAlignmentY | number | 1 | In the case of autoFix, the content area is located in the relative vertical direction of the sliding area (corresponding to the size of Transform2D), and the value range is (0-1). |
# Method description
| Method | Parameters | Return Value | Function |
|---|---|---|---|
| onReachStart | Delegate<this, TouchInputEvent> | Return the Delegate of the UIScrollView to the top behavior, and add events through the add method. | |
| onReachEnd | Delegate<this, TouchInputEvent> | Return to the Delegate of the UIScrollView's bottom behavior, and add events through the add method. | |
| setMinMax | <min: number, max: number> | Set the set maximum and minimum sliding distance, if set, these two values will be used first. | |
| clearMinMax | Clear the set maximum and minimum, after canceling, it will resume to use the automatically generated maximum and minimum distance logic. | ||
| scrollTo | <pos: number> | The sliding distance of the component to which pos corresponds | |
| refreshMove | Clear the current sliding distance and reinitialize | ||
| enableScroll | Turn on UIScrollView sliding | ||
| disableScroll | Pause UIScrollView sliding |
# Sliding distance calculation
By default, the sliding distance is derived from the difference between the size of the content area (the maximum node size of the first-level child node) and the size of the sliding area (corresponding to the Transform2D size). The result of the sliding distance will be saved in minContextMove and maxContextMove.
If the user sets minContextMove and minContextMove, the sliding distance will be judged according to the value set by the user. If you need to restore the logic of automatically judging the sliding distance, call the component clearMinMax method.
# Content area targeting
The content area positioning is divided into: user positioning mode and automatic positioning mode.
By default, it is user positioning mode, and the component will use the initial state of the child node as the initial sliding state.
autoFix is ture, is automatic positioning mode, the component will be based on content area information (maximum child node size, anchor point) and sliding area information (corresponding to Transform2D size, anchor point) and configuration information(cellAlignmentX, cellAlignmentY), adjust the position of the content area to alignment position relative to the sliding area.
# Notice
UIScrollView is only a control component. Generally, it needs to be combined in the same node: click control component TouchInputComponent, masking component UIMask and graphics component UIGraphic of the corresponding rendering area of the masking component to be used together.
# Instructions
# Code usage
// Standard UIScrollView component
const scrollViewEntity = game.createEntity2D('UIScrollView');
// Add ScrollView control component
const scrollView = scrollViewEntity.addComponent(engine.UIScrollView);
// Sliding control in the vertical direction
scrollView.movement = engine.UIScrollView.MovementType.Vertical;
// Add touch component
const scrollViewTouch = scrollViewEntity.addComponent(engine.TouchInputComponent);
// Add masking component
const scrollViewMask = scrollViewEntity.addComponent(engine.UIMask);
// Add the rendering area required by the mask component
const scrollViewGraphic = scrollViewEntity.addComponent(engine.UIGraphic);
uiRoot.addChild(scrollViewEntity.transform2D);
# Editor use
Right click-UI-New ScrillView