How do I arrange a list of buttons into rows of 4

Question

I am trying to display the same game object in a table form of 4 columns and 2 rows so it would look like this:

GO GO GO GO
GO GO GO GO

G0 - gameObject

My gameObject is a button that can be pressed and has a text element on it to display the name of the profile on the button.

I have a List of strings of the names that i need to display on these GO buttons in the table form but i am struggling to position them correctly.

At the moment i have gotten to the point where i can Instantiate them so they all appear on the screen when the game is running, now i just need some advice on how i can position them properly in the format mentioned above.

How do i do this?

This is my code that i used to get the names and add them to the List:

private void GetProfiles()
{
    List<string> profileNamesList = new List<string>(); 

    if (Directory.Exists(filePath))
    {
        string[] files = Directory.GetFiles(filePath);
        profileTileTemplate.SetActive(true);

        foreach (var file in files)
        {
            string name;
            name = file;
            int index = name.IndexOf(filePath + "/", System.StringComparison.OrdinalIgnoreCase);

            if (index >= 0)
            {
                int pathIndexEnd = index + filePath.Length + 1;
                int stringLength = name.Length - pathIndexEnd - 5;
                name = name.Substring(pathIndexEnd, stringLength);
            }

            profileNamesList.Add(name);
        }
    }
    DisplayProfiles(profileNamesList);
}

private void DisplayProfiles(List<string> names)
{
    
}

I have tried using a for loop with in another for loop but i just end up instantiating multiple of the same game object.

This is what i get now:

And this is what i want it to look like:

Answer 1

This is kind of two questions, and I just realized that Unity has a built in component that will do this automatically, so I'll leave the three answers below.

How do I arrange UI gameobjects in rows?

Since it seems like you want to do this for UI elements there's actually a very easy solution. Add an empty GameObject as a child of your Canvas and add a Vertical LayoutGroup component. Add two children to that with horizontal layoutgroups. Add four placeholder prefabs of your gameobject to each horizontal layout group. Arrange them and configure the settings to get them looking the way you want (and make note of what happens if you add fewer than four items!)

Once you have it all set up, delete the placeholders. Then you can add your gameobjects to the horizontal group using Instantiate(Object original, Transform parent) (link) to parent them to the layout group, which will keep them arranged neatly. You can keep a list of those groups and each time you add four, switch to the next parent.

A neater way that seems to fit your use case (assuming there can potentially be more than 8 profiles) is to make a Scroll View that holds horizontal layout groups, which will each be a row of entries. That way instead of tracking which parent you want to add gameobjects to, you can just instantiate a new row every time you pass four entries.

If you're sure there will only ever be eight or fewer, the easiest thing to do would just be arrange eight blank buttons in the UI however you want them to appear. Then keep a list of the eight buttons and edit the text/image on them, no instantiation or looping necessary.

How do I split up a list of gameobjects into rows?

The actual code to process the list is below. This is just an example and there are plenty of different ways to do it, but I thought this demonstrated the logic clearly without depending on what UI elements you choose. As a rules of thumb, make sure to figure out the layout elements you like in Unity first using placeholders (like scroll view etc) and then figure out the code to fill them in. In other words, instantiating and laying out UI elements at runtime is a great way to give yourself a headache so it's best to only do it when you need to.

    List<string> profileNamesList = new List<string>();
    
    public int entriesPerRow;  //only public so you can edit in the inspector. Otherwise, just use the number per row in your prefab.
    public GameObject profileRowPrefab;
    public GameObject scrollViewLayout;
    
    private void DisplayProfiles(List<string> names)
    {
        int i = 0;
        while( i < names.Count )  //"while the list has more names"
        {
            //create a new row as a child of the scroll view content area
            //and save a reference for later
            GameObject go = Instantiate(profileRowPrefab, scrollViewLayout);
            for(j = 0; j < entriesPerRow; j++)  //"add this many names"
            {
                if(i < names.Count)
                {
                    //instantiate a button, or edit one in the row prefab, etc.
                    //depending on how you're doing it, this is where you'd use the go variable above
                    YourProfileButtonCreationMethod(names[i]);
                    i++;
                }
                else
                {
                    //we've finished the list, so we're done
                    //you can add empty placeholders here if they aren't in the prefab
                    break;
                }
            }
        }
    }

YourProfileButtonCreationMethod will depend completely on how you want to implement the UI.

I wish I had thought of this an hour ago, but I've never used it myself. Unity has a built in layout feature that will do this for you (minus the scrolling, but you may be able to nest this in a scroll view).

How do I arrange UI elements in a grid?

Instead of making your own grid with horizontal and vertical layout groups, you can use the Grid Layout Group. Then just instantiate each item in the list as a button with the grid layout as their parent (see above). Here's a short video tutorial that shows what the result looks like.