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.

It sounds to me like you are trying to re-invent `GridLayoutGroup`. You do know that already exist in Unity and it works well? — Programmer, Sep 17 '18 at 12:52
I saw it passing by, but couldn't get it to work. My objects get instantiated during runtime, and so are their parents. There are 4 parent's above my child objects and they all get instantiated during runtime. I couldn't find a way to get GridLayoutGroup to work. I tried, but no luck — Patrick, Sep 17 '18 at 13:02
What? It's so easy to use. Please explain how you tried to use it and I will tell you what you did wrong. What issues where you having and how did you try to use it? — Programmer, Sep 17 '18 at 13:04

score 1 · Answer 1 · answered Sep 21 '18 at 11:04

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.

Distribute evenly in 2D

1 Answers1