Unity Tab System

Unity має величезну кількість корисних та крутих UI-фіч. Але не вистачає однієї, яка допомогає зручно та логічно організовувати елементи у вкладинки.

Сьогодні ми створимо базову систему табів для Unity, яку кожен з вас потім зможе розширити під свої потреби. Починаємо)

*Традиційний дизклеймер: рішення та код можуть бути не найкращими, тож для когось це буде гайд, а для когось план «як робити не треба». Також головна ціль статті — показати, що і як просто можна створити засобами юніті. Тож не судіть строго)*

Перш за все визначимося з необхідними елементами. Нам треба:

1)      Кнопки(кастомні, чи дефолтні), щоб перемикати вкладинки

2)      GameObject-контейнер, фактично сам таб

3)      Менеджер, який контролюватиме що треба вмикати/вимикати

Отже нам треба 2 чи 3 скрипти, залежно від реалізації кнопок. Особисто я обрав дефолтні юнітівські Button, щоб швидко все накидати.

Почнемо зі скрипту TabGroup. В ньому ми повинні мати всі таби(лист _tabs), які належать до цієї групи, і метод, щоб перемикати вкладинки(OnTabEnter()):

public class TabGroup : MonoBehaviour
{
    [SerializeField] private List<Tab> _tabs;
    
    private void OnEnable()
    {
        foreach (Tab tab in _tabs)
        {
            tab.Initialize();
            tab.OnTabInteracted += OnTabEnter;
        }
    }

    private void OnDisable()
    {
        foreach (Tab tab in _tabs)
        {
            tab.Uninitialize();
            tab.OnTabInteracted -= OnTabEnter;
        }
    }

    private void OnTabEnter(Tab tab)
    {
        ResetAllTabs();
        
        tab.gameObject.SetActive(true);
    }

    private void ResetAllTabs(bool state = false)
    {
        foreach (Tab tab in _tabs)
            tab.gameObject.SetActive(state);
    }
}

В OnEnable() я ініціалізую таби та підписуюсь на їх івент, щоб менеджер знав коли користувач перемикається та світчив таби. Відповідно OnDisable робить протилежне, щоб ніде випадково не отримати null ref.

OnTabEnter перш за все вимикає всі наявні вкладинки групи, потім вмикає необхідну.

От і вся структура менеджеру, погнали далі!

В самому класі Tab нам треба небагато: івент, який передаватиме клікнуту вкладинку в менеджер, та кнопку, яка прив’язана до цієї вкладинки.

public class Tab : MonoBehaviour
{
    public event Action<Tab> OnTabInteracted;
    
    [SerializeField] private Button _connectedButton;

    public void Initialize()
    {
        _connectedButton.onClick.AddListener(TabInteracted);
    }

    public void Uninitialize()
    {
        _connectedButton.onClick.RemoveListener(TabInteracted);
    }

    private void TabInteracted()
    {
        OnTabInteracted?.Invoke(this);
    }
}

Методи Initialize та Uninitialize просто підписуються на події від Button, щоб клік на кнопку інвокав івент через метод TabInteracted.

От і вся магія коду)

Далі я накидав простенький UI, та прив'язав компоненти одне до одного. Сцена виглядає приблизно так:

Самостійно ви все можете пощупати з мого гітхабу: https://github.com/DaniilCoolUkraine/TabSystemUnity/tree/develop

Ну а за ідею хочу подякувати Game Dev Guide (посилання на відос)

Дякую за прочитання і най з вами буде сила чистого коду) Зустрінемось в рекомендаціях!