Luna UI Documentation

Pagination

Example Usage

As always, you can find this example in the Components sample.

LabelWithBinding

Create an UI controller class named LabelWithBinding. This allows us to reuse existing elements, instead of deleting and recreating elements at runtime.

This approach improves performance by reducing garbage collection overhead and ensures smoother UI updates.

csharp

using UnityEngine.UIElements;

namespace CupkekGames.UITK.Demo.Components
{
    public class LabelWithBinding
    {
        private Label _label;

        public LabelWithBinding(Label label)
        {
            _label = label;
        }

        public void Bind(string data)
        {
            _label.text = data;
        }

        public void Unbind()
        {
            _label.text = "";
        }
    }
}

PaginationDemo

csharp

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

namespace CupkekGames.UITK.Demo.Components
{
    public class PaginationDemo : UIViewComponent
    {
        // Settings
        [Header("Pagination Settings")]
        [SerializeField] private int _itemPerPage = 3;
        [SerializeField] private int _maxButtonAmount = 5;
        [SerializeField] private UIColorName _baseButtonColor = UIColorName.BASE;
        [SerializeField] private UIColorName _activeButtonColor = UIColorName.PRIMARY;
        [Header("Pagination Data")]
        [SerializeField] private int _dataAmount = 200;
        // Pagination
        private PaginationController<string> _pagination;

        // Source List
        private List<string> _sourceList = new();
        // UI Controller for page elements
        private List<LabelWithBinding> _uiController = new();

        // Container
        private VisualElement _container;

        protected override void Awake()
        {
            base.Awake();

            // Mock up data
            for (int i = 0; i < _dataAmount; i++)
            {
                _sourceList.Add("Element-" + i);
            }

            // Create page element controllers  
            // In this example, our controller class is LabelWithBinding.  
            // Using controllers allows us to reuse VisualElements instead of destroying  
            // and recreating them whenever the page changes.  
            // This approach improves performance and reduces unnecessary UI rebuilds.  
            _container = ParentElement.Q<VisualElement>("PaginationElementsContainer");
            for (int i = 0; i < _itemPerPage; i++)
            {
                Label label = new Label();
                _container.Add(label);
                LabelWithBinding uiController = new LabelWithBinding(label);
                _uiController.Add(uiController);
            }

            // Create pagination
            VisualElement paginationElement = ParentElement.Q<VisualElement>("Pagination");
            _pagination = new(
                _sourceList,
                _itemPerPage,
                paginationElement,
                _baseButtonColor,
                _activeButtonColor,
                _maxButtonAmount
            );
        }

        private void OnEnable()
        {
            _pagination.OnPageChange += OnPageChange;
        }

        private void OnDisable()
        {
            _pagination.OnPageChange -= OnPageChange;
        }

        protected virtual void Start()
        {
            // Render first page
            _pagination.GoToPage(0);
        }

        private void OnPageChange(int page)
        {
            List<string> currentPage = _pagination.GetCurrentPageElements(); // get data for current page

            // int start = _pagination.GetStartIndex(page); // get start index of current page if needed

            // Why binding?
            // Instead of deleting and recreating elements at runtime, 
            // we are reusing existing elements and updating their content dynamically.
            // This approach improves performance by reducing garbage collection overhead 
            // and ensures smoother UI updates.

            for (int i = 0; i < _pagination.ItemsPerPage; i++)
            {
                LabelWithBinding controller = _uiController[i];
                controller.Unbind();

                if (i >= currentPage.Count)
                {
                    continue;
                }

                // Alternative way to get data
                // int index = start + i;
                // string data = _sourceList[index];

                // Easier way to get data
                string data = currentPage[i];

                controller.Bind(data);
            }
        }
    }
}

Pagination

Pagination is the base class for controlling data, without any relation to UI.

Contructors

csharp

public Pagination(List<T> data, int itemsPerPage)

Public Methods

csharp

// Returns true if page changed
public bool NextPage()

csharp

// Returns true if page changed
public bool PreviousPage()

GoToPage

csharp

// Returns true if page changed
public bool GoToPage(int pageIndex)

GetCurrentPageElements

csharp

// Returns list of elements that belongs to current page
public List<T> GetCurrentPageElements()

GetStartIndex

csharp

// Returns start index of curent page
public int GetStartIndex(int page)

Events

OnPageChange

csharp

public event Action<int> OnPageChange; // int parameter is the new page index

PaginationController

PaginationController is the UI controller class that makes use of Pagination.

Contructors

csharp

// Creates pagination without setting up the UI.
// You can later use SetUI function to setup the UI.
public PaginationController(List<T> data, int itemsPerPage)

// Creates pagination and setups the UI.
public PaginationController(
	List<T> data, // data source
	int itemsPerPage, // how many items to show in one page
	VisualElement parent, // Parent element, usually the UXML of pagination component
	UIColorName normal, // Default color of buttons
	UIColorName active, // Color of active page's button
	int maxButtonAmount // maximum amount of pagination buttons
)

Public Methods

SetUI

csharp

public void SetUI(VisualElement parent, UIColorName normal, UIColorName active, int maxButtonAmount)

UpdateUI

csharp

// Updates pagination elements by re-creating them
public void UpdateUI()

Show

csharp

public void Show()

Hide

csharp

public void Hide()