Expandable List UI button navigation

Question

I'm creating an item inventory UI for an RPG game I'm making. The lists are expandable using instantiated prefab slots parented to an empty gameobject with a vertical gridlayout. Each slot has a button, so the player can navigate through the list. The navigation is controlled using a game controller.

     void LoadSlots()
     {
         if (inventory == null) return;
         if (consumables.Count != 0)
         {
             ClearList(consumablesList.transform);
             for (int i = 0; i < consumables.Count; i++)
             {
                 var newSlot = Instantiate(Resources.Load<Transform>("ItemSlot"));
                 newSlot.Find("Icon").GetComponent<Image>().sprite = consumables[i].icon;
                 newSlot.Find("Name").GetComponent<Text>().text = consumables[i].name;
                 newSlot.transform.SetParent(consumablesList.transform, false);
             }
         }
     }

Each list is opened using toggles on the top, when toggled on. The event system sets the first c$$anonymous$$ld object as the navigation start point.

     public void OpenConsumables()
     {
         consumablesList.SetActive(true);
         Transform[] c$$anonymous$$ldren = consumablesList.GetComponentsInC$$anonymous$$ldren<Transform>();
         Debug.Log(c$$anonymous$$ldren[1].name);
         EventSystem.current.SetSelectedGameObject(c$$anonymous$$ldren[1].gameObject);
     }

The navigation starts from the top and to the bottom. When the bottom is $$anonymous$$ghlighted, it won't go any further, same for the top.

However, I'm having issues setting up a dynamic button navigation for the lists. The automatic navigation setup just isn't working. Is there a better way to create a navigation for an expandable list.

Visual representation of the UI: alt text

Answer 1

I wrote a code that is stored inside the prefabs. It uses get c$$anonymous$$ld index to find all adjacent game object in the $$anonymous$$erachy and sets up the navigation.

 using UnityEngine;
 using UnityEngine.UI;
 
 public class ButtonNavigation : MonoBehaviour
 {
     Button button;
     void Start()
     {
         button= GetComponent<Button>();
     }
     void Update()
     {
         Top();
         Bottom();
     }
     void Top()
     { 
         int index = gameObject.transform.GetSiblingIndex();
         if (index == 0)
         {
             Navigation navB = button.navigation;
             navB.selectOnUp = transform.parent.GetC$$anonymous$$ld(transform.parent.c$$anonymous$$ldCount - 1).GetComponent<Button>();
             button.navigation = navB;
             return;
         }
         if (transform.parent == null) return;
         if (transform.parent.c$$anonymous$$ldCount <= index - 1) return;
         Navigation nav = button.navigation;
         nav.selectOnUp = transform.parent.GetC$$anonymous$$ld(index - 1).GetComponent<Button>();
         button.navigation = nav;
     }
     void Bottom()
     { 
         int index = gameObject.transform.GetSiblingIndex();
         if (transform.parent == null) return;
         if (transform.parent.c$$anonymous$$ldCount <= index + 1)
         {
             Navigation navT = button.navigation;
             navT.selectOnDown = transform.parent.GetC$$anonymous$$ld(0).GetComponent<Button>();
             button.navigation = navT;
             return;
         }
         Navigation nav = button.navigation;
         nav.selectOnDown = transform.parent.GetC$$anonymous$$ld(index + 1).GetComponent<Button>();
         button.navigation = nav;
     }
 }

Expandable List UI button navigation

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions