Ngui official website Example 7-scrollview (2)

Step 2: create and implement the icon scroll Effect

First, create a drag icon for this window. Choose ngui> Create a panel from the menu, create a new panel under windowroot, and name it panel.
Clipview. :

Description: enter a description.

Image: 1.png

Create an empty game object named uigrid, which is used to automatically adjust the arrangement of its sub-objects. Use the game object as the sub-object of the Panel clipview and reset it. :

Description: enter a description.

Image: 2.png

Create an empty game object named item 1. As the uigrid sub-object and reset it. :

Description: enter a description.

Image: 3.png

Next, use the previously learned method of creating widgets to create the icon appearance for it (I will not describe it here). The final effect is as follows:

Description: enter a description.

Image: 4.png

Use Ctrl + D to copy the nine items. It doesn't matter if the positions overlap. After adding a component to uigrid, it will have a magical effect. :

Description: enter a description.

Image: 5.png

Now select uigrid and add a grid component (component-> ngui-> interaction-> grid) to it. At this time, the magic effect is displayed. I really admire the ngui function, it automatically arranges its components, and the final result is:

Description: enter a description.

Image: 6.png

Because ngui event response is implemented through trigger, select all items (select item in Hierarchy
1. Press the Shift key and then click Item 9 so that all item components are selected.) Add a trigger for them (ngui-> attach
A collider ). Add a drag panel content component (component-> ngui-> interaction-> drag panel contents) to them. After adding this component, it indicates that these items are drag
Part of the panel (required ). :

Description: enter a description.

Image: 7.png

(This step is the key) Select panel clipview and add a draggable
Panel component (component-> ngui-> interatcion-> draggable panel ). Click play. You can see that these items are finally moved with the mouse. :

Description: enter a description.

Image: 8.png

Now there is a problem here. If you move the mouse right or right without any problems, but when you move up or down, these items also move up and down ,,

Description: enter a description.

Image: 9.png

Select the draggablepanel component in panel clipview, open the scale parameter, and set the values of Y and Z axes to 0. In this way, you can restrict the drag direction to the X axis. :

Description: enter a description.

Image: 10.png

Finally, we can remember that we have made a scroll bar at the bottom. We can use it to control the scrolling of items. It is very easy to assign this element to the Panel.
The horizontal scroll bar under the draggablepanel component of clipview, as shown in. Click play. Now you can use the scroll bar to scroll the item! In this way, the icon is rolled. There are three steps. The first step is to use the grid component to arrange items. The second step is to add the draggablepanel component for the Panel. The third step is to add the trigger and drag for each item.
Panel content.