Scrmizu by ToshikiImagawa - 4

GUI

Variable infinite scroll in Unity UI

Unity 2018.4.17f1MIT LicenseUpdated 104 days agoCreated on August 26th, 2017
Go to source

license release

What is Scrmizu

Scrmizu is variable infinite scroll and extended UnityEngine.UI.ScrollRect for Unity UGUI.

Required

  • Unity 2018.x or later.
  • Scripting Runtime Version 4.6 Eq.

Install

  1. Download Scrmizu.unitypackage here.
  2. Import the contents of the Scrmizu folder to the Packages or Assets folder.
  3. Optionally import Scrmizu.Sample.unitypackage.

Quick start

Infinite Scroll View

To create a Infinite Scroll View in the Unity Editor, go to GameObject → UI → Infinite Scroll View.

Prepare ScrollItem prefab to be repeatedly displayed by infinite scroll.

public class SimpleInfiniteScrollItem : MonoBehaviour, IInfiniteScrollItem
{
    /// <summary>
    /// ScrollItem enters display area and updates display item data.
    /// </summary>
    /// <param name="data"></param>
    public void UpdateItemData(object data)
    {
        if (!(data is float width)) return;
        gameObject.SetActive(true);
        if (!(gameObject.transform is RectTransform rectTransform)) return;
        rectTransform.sizeDelta = new Vector2(width, rectTransform.sizeDelta.y);
    }

    /// <summary>
    /// Hide ScrollItem because it has left the display area.
    /// </summary>
    public void Hide()
    {
        gameObject.SetActive(false);
    }
}

Call InfiniteScrollRect.SetItemData to set the item data.

[RequireComponent(typeof(InfiniteScrollRect))]
public class SimpleInfiniteScrollController : MonoBehaviour
{
    private InfiniteScrollRect _infiniteScrollRect;

    private InfiniteScrollRect InfiniteScrollRect => _infiniteScrollRect != null
        ? _infiniteScrollRect : _infiniteScrollRect = GetComponent<InfiniteScrollRect>();

    private void Awake()
    {
        InfiniteScrollRect.SetItemData(new object[]
        {
            200f, 
            300f, 
            400f, 
            500f, 
            600f, 
            700f, 
            800f, 
            900f, 
            1000f
        });
    }
}

By scrolling, you can confirm that the width of the scroll item is updated for each set data (width).

Nested Scroll View

To create a Nested Scroll View in the Unity Editor, go to GameObject → UI → Nested Scroll View. Put it under the Scroll View container.

When scrolling in the non-scroll direction of NestedScrollView, scroll event is sent to the parent ScrollView.

Paged Scroll View

To create a Paged Scroll View in the Unity Editor, go to GameObject → UI → Paged Scroll View. Create multiple page content items under content.

One item is displayed in the scroll direction in the view area. Pauses the page each time scroll.

Show all projects by ToshikiImagawa