Making a scrolling view (ScrollView)

How to determine if scrolling views should be used

The so-called scrolling view, refers to a sliding window, the size and position of the window is fixed, the content of the window users can swipe or drag the scrolling day to scroll through.

The purpose of scrolling the view is to solve the situation where the same content is too large for a UI layout to display. If the same kind of content too much, you can generally take a set of multiple pages, and then browse through the page to browse, but it is clear that scrolling view is more convenient than the page, because on the move can easily scroll the vase, on the PC can scroll through the mouse scrolling.

When you need to decide whether you should use the scrolling view to make the UI, you can follow these rules:

(1) There are a lot of similar content a page display, but it must be easy for users to browse;

(2) Its core purpose is to facilitate the browsing;

Create a scrolling view

1. First method: Create directly using presets

2. The second method: Assemble yourself

Click the Unity top Ngui menu and select Create->scrollview.

Scrolling View core Components UIPanel

(1) When ScrollView is generated, in order for it to be displayed in the upper layer, it automatically sets a depth for the panel, which is exactly the depth of the topmost level in the current case, that is, the depth +1 of the panel that is the largest in the current Uiroot UI tree.

(2) Its clipping is automatically set to Softclip.

The clipping provides the following modes:

1.None

No clip mode, this mode, the scrolling view of the object can be dragged, but the window because there is no clip, so there is no boundary! This may cause content to be dragged out of the screen and can no longer be dragged back.

2.SoftClip

Soft clipping mode, which is typically used to make scrollview.

In this mode, the panel will clip a piece but the area is displayed, and the part outside of the clip will be clipped out and cannot be displayed.

In soft clipping mode, you can see the following settings.

Offset

The offset of the window, in pixels, setting this parameter will cause the window to be offset by the center point of the panel.

Center

Adjusts the center point of the window to the same effect as offset.

Size

The size of the window, in general, needs to adjust the size of the window's clip windows to match the size of the background backplane. If the window size is larger than the base plate, it will cause the window content to slide out of the bottom of the backplane, and if it is smaller than the base plate, it will cause the window content to slide before the edge of the backplane has been clipped away.

Softness

The softness of the edge of the clip, in the window, when the content is dragged to the edge section, there is a fade effect. If the value of this softness is set to 0, the content is dragged to the edge and clipped as the knife is cut off.

3.Constrain but don ' t Clip

This mode refers to the window will try to contain all the content but do not clip them, the effect is equal to have boundaries but the boundary is full screen, unable to completely drag the content outside the screen, as long as the screen within the scope of the content can be seen, the content will not be edited out.

Scrolling View core Components Uiscrollview

UIPanel is the core component that controls the size of the window in a scrolling view, while Uiscrollview is the core component of the scrolling view that controls the scrolling function without the windows of the Uiscrollview component being scrolled.

1.ContentOrigin

This is the starting point for what the scrolling view contains, and the default setting is the upper-left corner.

2.Movement

The scrolling direction of the scrolling view, which is the direction in which the content is moved. Altogether there are 4 different ways.

Horizontal

Drag horizontally, i.e. around.

Vertical

Drag in the vertical direction, that is, up and down.

Unrestricted

Drag freely.

Custom

Customizing the orientation, the new X and Y settings boxes are displayed, and you can define a special direction by setting the X and Y settings.

3.Drag Effect

Drag the effect. There are 3 effects available.

None

No effect, drag to where to count. The moment the finger stops or leaves the screen, the contents of the view stop.

Momentum

Drive can drag, that is, there is a inertia, when our fingers loosen, the window content will continue to slide in the direction of the previous, midway if the boundary will stop immediately, otherwise the inertia will not automatically stop. The main purpose of this effect is to allow the user to slide the view content with minimal action.

Momentumandspring

A way of both kinetic energy and elasticity, which is similar to the previous kinetic approach, except that, in this way, when the sliding content is dragged to the window boundary, it can be dragged "out of bounds", bouncing back and back into the normal window as soon as the finger is released.

4.Scroll Wheel Factor

Wheel factor setting, the greater the value of the mouse wheel scrolling will be more sensitive.

5.Momentum Amount

The kinetic energy factor is set, the larger the value, the greater the inertia when sliding (if the drag effect has kinetic energy effect).

6.Restrict within Panel

Selecting and dragging will be restricted to the panel, which is checked by default. If you do not check this option, it will cause the content to be dragged beyond the clip portion of the view and cannot be returned.

7.Cancel Drag If Fits

When it fits exactly within the window, it automatically exits the drag.

8.Smooth Drag Start

At the beginning of the drag smooth, tick on, drag when the content has a speed change from 0 to drag the speed of a smooth natural effect. If unchecked, when you start sliding, the content will be instantly as fast as your finger, just like sticking to your finger, and the experience is rather poor.

9.IOS Drag Emulation

Simulates the drag effect of an iOS system. This is also an option to enhance the drag experience.

10.ScrollBars

Specifies the drag bar for the scrolling window. This setting is optional, can be set or not set, do not set the same scrolling window can work, because on the mobile device, we can use the finger swipe, on the PC can be held down by the mouse button to drag, and drag bar, can be understood as a drag progress bar.

The drag bar can specify two, one horizontal, one vertical.

Set the rules for the drag bar to appear in show condition, with the following 3 rules optional.

Always

In any case, the slider bar always appears.

Onlyifneed

appear only when needed. That is, when the content is displayed in the scrolling window, it will appear, if you do not need to drag in the window to see the entire content, you do not need to appear.

Whendragging

Occurs when dragging. As long as you drag the content, it will definitely appear.

Create a drag Bar

1. Create via Widgetwizard (Legacy)

On the Unity top Ngui menu, choose the Open option to open Widgetwizard (Legacy).

In this interface, set up the atlas and the font (if no need to set), select ScrollBar in the template, and then in the background whose base of the sprite, in foreground set the drag block of the Sprite, Set its slide direction in the direction.

2. Create with Prefabtoolbar

3. Assemble a drag bar yourself

The drag bar has the following characteristics:

(1) There is a backplane slot to display the range that can be dragged;

(2) There is a sliding block that can slide within the range;

By contrast, you can see the difference between a drag bar and a progress bar: A drag bar is a draggable progress bar that lacks a surface progress bar.

Drag Bar Description

(1) The sliders created by ScrollBar and UISlider essentially work exactly the same way.

(2) We recommend the use of UISlider, that is, the way to make a progress bar to make the slider bar.

(3) The slide bar is a uislider without foreground.

Allow content within the view to be dragged

Attach a Boxcollider for the contents of the view because, since you need to drag the contents of the view to view it, you must have a drag event within the view, so there must be a boxcollider.

Attach a core component to the content in the view: Drag ScrollView, additional ways you can click Addcomponent->ngui->interaction->drag ScrollView in the Inspector panel. No setup is required after the component is added, and it automatically reads the ScrollView in the parent when running the game.

Running the game, you can already drag the contents within the window.

Considerations when making a scrolling view

(1) In general, scrolling views must have a uipanel for window editing. This UIPanel component is automatically generated when the ScrollView is created.

(2) The drag bar is optional for scrolling views, and scrolling with the mobile device's touch screen and the mouse cursor of the PC device is also possible without its scrolling view.

(3) Scroll the content contained in the view, must have a boxcollider, otherwise unacceptable events.

(4) Scroll the content contained in the view, must have a Dragscrollview component, this component will interact with the ScrollView, at run time, it will automatically find the parent object in the ScrollView, and then interact with it, so that the contents of the view can be scrolled up.

(5) scrolling the contents of the view, preferably placed under the creation of the ScrollView node as a sub-object exists, this can eliminate a lot of trouble and hidden trouble.

(6) Scrolling direction of scroll view don't get it wrong.

(7) The size of the clip window of the scrolling view must be adjusted in place, try not to adjust the clip's center.

Making a scrolling view (ScrollView)