Distribute evenly in 2D

Question

So i'm trying to distribute 2D items evenly accros the screen. Right now I have it working in a way where i select all items and it calculates the size of the canvas, than calculates all widths of objects together to see how much whitespace it has. Than i distribute them evenly with the right amount of whitespace between the objects. Works great. However, as soon as I get more than 4 items or i don't have enough whitespace (objects are to big for example) I want to create a second row and move the first row up.

Below is my code.

public static void DistEvenly(PageObjectBase pageObject)
    {
        //List for objects
        List<PageObjectBase> objectList = new List<PageObjectBase>();
        float combinedWidth = 0;
        PageObjectGroup group = (PageObjectGroup) pageObject;

        //Start position is the left side of workField
        float leftStartPosition = -Config.DefaultWorkfieldSize.x / 2;
        int objectCount =0;

        //For every object add it to list and calculate width and add it to combinedWidth
        foreach (PageObjectBase objectBase in group.Children)
        {
            objectList.Add(objectBase);
            float imageWidth = objectBase.BoxCollider.size.x * objectBase.transform.localScale.x;
            combinedWidth = combinedWidth + imageWidth;
        }

        //whiteSpace is the remaining white space on the screen
        float whiteSpace = Config.DefaultWorkfieldSize.x - combinedWidth;

        //For each object place it at left start position and calculate the space between each image.
        foreach (PageObjectBase objectBase in group.Children)
        {
            if (whiteSpace > 20 && objectList.Count <= 4)
            {
                objectCount = objectList.Count + 1;
                objectBase.Move(leftStartPosition + whiteSpace / objectCount + objectBase.GetBoundsSize().x / 2, 0);
                Debug.Log("I should now distribute them evenly!");
                leftStartPosition = GetRightEdge(objectBase);
            }
        }
        }
    }

So as you can see it gets the amount of images in the list, calculates remaining whitespace and if there are a max of 4 items or less, and more than 20pixels of whitespace than i can distribute them. If this is false however (so more than 4 images or less than 20pixels of whitespace) i want to create a second row and move the first row up (right now it's on the 0 point of Y axis).

I tried a lot but I just cant seem to figure it out.

EDIT: Added an image of what it currently does.

Answer 1

You should use a GridLayoutGroup along with a prefab that has a LayoutElement and the PageObjectBase components.

You would have to instantiate the prefab and make it a child of the GameObject which has the GridLayoutGroup component.

This way you can set the desired image for every object by accessing the PageObjectBase and the GridLayoutGroup will take care of the layout of images.