Ngui Study Notes (vi): ScrollView, grid, and table

Let's look at the core development of the game UI development, I call list development, such as backpacks and various forms of the list, and then we look at a few specific examples:

Basically, there are some repetitive, well-crafted UI controls that can be arranged in a way that supports scrolling and, of course, high-level words that might require support for drag-and-drop operations.

Let's take a look at how these features are implemented using the Ngui, and then give a concrete example.

Base controls

Ngui has helped us to design the relevant components, so we do not need to start from scratch to achieve the above effect, just learn to use the relevant script provided by Ngui, it is very simple.

ScrollView

That is, a scrolling viewport component that can be used when we need to scroll through one or more objects within a specified area.

We can add a scrollview under any UI, add a good scrollview we found that it was bound to 2 scripts, respectively, as follows:

UIPanel

The UIPanel component is mainly able to implement the content of the clip out of the viewport, let's look at the main use of the parameters of the meaning:

Clipping: Clip Type

1. None: Do not clip, move out of the viewable area of the image is still visible.
2. Texture Mask: You can select a decal as a mask.
3. Soft clip: Soft clip, the default selection of this mode, we will collectively say it.
4. Constrain but don ' t clip: The constraint cannot be dragged out of the viewport but not clipped.

If soft clip is selected, there are some options, as follows:

1. Offset: Viewport offset.
2. Center: Same as offset effect.
3. Size: Viewport size.
4. Softness: Clip edge softness.

UIScroll View

This script is used to control the viewport scrolling function, and we look at the core properties in detail:

1. Content Origin: Scrolling start, default to upper left corner.
2. Movement: Scroll Direction: Horizontal horizontal direction, vertical vertical direction, unrestrained free drag, custom customize direction.
3. Drag Effect: Drag Effect: None no effect, momentum with inertia drag, momentumandspring inertia and elastic drag (drag out of bounds will automatically bounce back to normal position).
4. Scorll Wheel Factor: Wheel factor, the larger the value, the faster the scroll.
5. Momentun Amount: Inertia factor, the greater the value when scrolling, the greater the inertia.
6. Restrict within Panel: Drag-and-drop is limited to the viewport and is selected by default.
7. Cancel Drag if Fits: But just when the viewport is right, exit drag.
8. Smooth Drag Start: When checked, the drag starts to have a feeling of buffering, do not tick to start the drag is the speed of the mouse movement.
9. iOS Drag Emulation: Simulates the drag-and-drop effect of iOS to enhance the drag-and-drop experience.
10. Scroll Bars: The ScrollBar property allows us to set the scroll bar ourselves, leaving the scroll bar blank to indicate that it is not used.

We're looking at scroll bars's show condition properties alone:

1. Always: scroll bars appear.
2. Only if need: Occurs when a display is required.
3. When dragging: appears when dragging.

Grid

Let's look at the grid component, which needs to be used when we need to arrange multiple UIs.

Generally we do not add a grid object directly (because the grid object depends on the parent object to determine the size, itself cannot be set size), we can first create a invisible widget component, and then create a grid component under the object, Finally, drag the components that need to be sorted into the grid .

When we need to arrange the sub-objects in the editing interface, we can click the Settings menu, as follows:

Let's take a look at the properties provided by the grid:

1. Arrangement: Grid orientation, horizontal horizontal, vertical vertical, Cell snap to subassembly items by the current position of the child.
2. Cell width: The width of the child grid.
3. Cell Height: The height of the child grid.
4. Column Limit: The maximum number of children.
5. Sorting: Sort by: None sorted by index, alphabetic by name, horizontal and vertical sorted by localposition, custom-implemented.
6. Pivot: The anchor point of the grid starting point.

Other items generally use the default values.

Table

A grid is a horizontal or vertical sort of a pair of items, whereas a table is a line-wrapping sort of a child item.

Let's look at the properties of table:

1. Columns: The number of columns that exceeds that number adds a row.
2. Direction: Line Add direction, down Add, up Add.
3. Sorting: Sort by: None sorted by index, alphabetic by name, horizontal and vertical sorted by localposition, custom-implemented.
4. Pivot: The anchor point of the grid starting point.
5. Cell Alignment: Grid alignment point.
6. Padding: Interval.

Other items generally use the default values.

A simple list (DEMO1)

Here we go through it quickly, and the sample project files are given at the end of this series.

Let's implement a simple list based on the components we learned above:

1. We create a scrollview in the UI and resize it, setting the scrolling direction to vertical;
2. Add a grid component to ScrollView, set its sort direction to vertical, and set its pivot to top;
3. Add a sprite component to the grid component named item, adding some lists and a button to the sprite component;
4. Create multiple item into the grid component by copying;

Implementing scrolling effects

Add the Box collider and drag Scroll view components to each item component;

Add a custom scroll bar

Ngui provides us with some pre-fabricated parts, such as horizontal and vertical scrollbars, which we can use directly;

1. Click on the menu bar "NGUI", "Open", "Prefab Toolbar";
2. Select "Simple Vertical Scroll Bar" in the open window and drag it to position in the scene;
3. Select the scroll view object that we created earlier, set its scroll bar property vertical to be associated with the scroll bar we just created;

Run, our simple list is complete, although there is no function.

Ngui Study Notes (vi): ScrollView, grid, and table