Unity-UI-Extensions.GitHub.io

Fancy Scroll View

A very fancy Scroll view component, with an extensible event system

Fancy Scroll View Example


Contents

1 Overview

2 Properties

3 Usage

4 Video Demo

5 See also

6 Credits and Donation

7 External links


Overview

Fancy Scroll View is a programmatic way to build a scroll view component with several extensible features.

The control is made up of several Key Components:

Implementation of this control is almost entirely programmatic, with several examples provided in the Examples folder:


Properties

The properties of the Scroll Position Controller are as follows:

Property | Description |-|-| ViewPort|Restricted bounds of the Scroll View Position controller Direction of Recognize|Direction of movement, Horizontal or Vertical Movement Type|Complexity of the underlying mesh, increases draw complexity for quality Elasticity|Graphic element being altered with the curve Scroll Sensitivity|tbc Inertia|Collection of CUI Bezier curves to apply to the graphic Deceleration Rate|Bezier control points for each reference curve (Ref Curves) Snap Section Enable|Reset Bezier points to native Rect Transform positions Velocity Threshold|Reset Bezier points to “Ref CUI Graphic” Rect Transform positions Duration|Bezier offset for the curve corners Data Count|Reset corner ratio to native Rect Transform positions On Value Changed (event) |The Event fired when the handle within the box slider is changed

The properties of the ScrollView template (FancyScrollView class) are as follows:

Property Description
Cell Interval Apply the curve affect to the attached element
Cell Offset Lock curves to the native object ratios
Loop Complexity of the underlying mesh, increases draw complexity for quality
Cell Base Graphic element being altered with the curve

Usage

To use this control you will need to programmatically build and tailor it for your own use. The examples provided in the “Examples\FancyScrollView” folder will help.

As described earlier, you will need to create:

For example

    public class Example01CellDto
    {
        public string Message;
    }

For example

    public class Example01ScrollViewCell : FancyScrollViewCell<Example01CellDto>
    {
        [SerializeField]
        Animator animator;  //Example to attach an animator
        [SerializeField]
        Text message; // Example field to bind a cell text field value to

        readonly int scrollTriggerHash = Animator.StringToHash("scroll"); //Animation in the animator to use as the system uses Hashes not text

        //initialization to setup Cell Rect Transform
        void Start()
        {
            var rectTransform = transform as RectTransform;
            rectTransform.anchorMax = Vector2.one;
            rectTransform.anchorMin = Vector2.zero;
            rectTransform.anchoredPosition3D = Vector3.zero;
            UpdatePosition(0);
        }

        //UpdateContent method from the base FancyScrollViewCell class to apply changes on update
        public override void UpdateContent(Example01CellDto itemData)
        {
            message.text = itemData.Message;
        }

        //UpdatePosition method from the base FancyScrollViewCell class to react or alter what happens when the cell position moves
        public override void UpdatePosition(float position)
        {
            animator.Play(scrollTriggerHash, -1, position);
            animator.speed = 0;
        }
    }

For example

    public class Example01ScrollView : FancyScrollView<Example01CellDto>
    {
        [SerializeField]
        ScrollPositionController scrollPositionController;

        new void Awake()
        {
            base.Awake();
            scrollPositionController.OnUpdatePosition.AddListener(UpdatePosition);
        }

        public void UpdateData(List<Example01CellDto> data)
        {
            cellData = data;
            scrollPositionController.SetDataCount(cellData.Count);
            UpdateContents();
        }
    }

All that is left then is to intialise the ScrollView with your data and let it run.

For additional help See the documentation provided by the Developer in the original repository. Note however, it is not in English currently and needs translating.


Video Demo

Click to play


See also


Credits and Donation

Credit setchi


Sourced from - https://github.com/setchi/FancyScrollView