UIS aka Unity Infinite Scroller

Этот скрипт позволяет использовать компонент ScrollRect как бесконечный скроллер. Это быстрый, простой и удобный для мобильных UI, способ создания прокручивающихся списков с сотнями элементов, без задержек и рывков.

Проблема

В Unity вы можете использовать компонент ScrollRect для прокрутки множества объектов UI. Но когда внутри списка прокрутки содержится много объектов, он начинает работать с рывками, анимация прокрутки становится не плавная. Это происходит потому что Unity, при изменений какой-либо позиции или размера на Canvas, перерисовывает всё.

Решение

Этот скрипт использует data-driven подход для прокрутки и отображения элементов списка. Это означает что данные для отображения, а также ширина/высота элементов, хранятся отдельно от отображаемых объектов. Скрипт создаёт и показывает только те элементы которые помещаются на экране. Когда вы прокручиваете такой список, то элемент который пропадает с экрана, перемещается и появляется с другой стороны.

Особенности

  • быстрый, простой и удобный для мобильных UI
  • элементы списка полностью настраиваемые
  • динамические, data-driven списки
  • эффективное повторное использование элементов списка
  • функция pull-to-refresh
  • функция scroll-to
  • поддержка элементов с разной высотой/шириной

Для разработчиков под Android или iOS, все эти «особенности» наверняка знакомы, потому что «родные» компоненты для отображения и прокрутки списков всё это умеют. Но Unity UI такой широты настроек не предлагает, поэтому остаётся использовать ассеты из стора или гитхаба, которых к слову, достаточно много. Так что если по каким-то причинам мой скрипт вам не подходит, можно погуглить unity infinite scroll github и найдётся много аналогов.

Установить можно как пакет, через Package Manager или скачать со страницы релизов и добавить в проект.

Демо

На Github есть демо. Оно содержит 6 сцен с разными вариантами использования скроллера. Демо подскажет как инициализировать и использовать UIS в своём проекте, как использовать функцию pull-to-refresh, как работать со списками где элементы разной высоты или ширины.

Инициализация

Вот просто пример инициализации списка. В данном случае есть два обработчика, для получения высоты каждого элемента и второй для добавления данных в конкертный элемент списка, по индексу.

using UIS;
using UnityEngine;

public class Demo : MonoBehaviour {

    [SerializeField]
    Scroller List = null;

    /// <summary>
    /// Инициализация и подписка на события
    /// </summary>
    void Start() {
        List.OnFill += OnFillItem;
        List.OnHeight += OnHeightItem;
        List.InitData(100);
    }

    /// <summary>
    /// Метод для применения данных к конкретному элементу
    /// Тут есть доступ к объекту и индекс в списке
    /// </summary>
    void OnFillItem(int index, GameObject item) {
        // возьмите данные для конкретного элемента
        // из вашей БД, JSON, и т.п.
        //
        // var data = jsonArray[index]; например
        //
        // примените данные к элементу списка
        //
        // item.GetComponent<ItemController>().Set(data);
    }

    /// <summary>
    /// Метод для получения высоты элемента
    /// </summary>
    int OnHeightItem(int index) {
        // возьмите данные о высоте/ширине конкретного элемента
        // из вашей БД, JSON, и т.п.
        //
        // вычислите динамически
        // или используйте константу, если все элементы одного размера
        //
        return 100;
    }
}

Все исходники доступны на Github