GUI wont distribute evenly

I have a GUILayout of 4 buttons to pick the profile my user wants to play on. When it loads it grabs the stats from playerprefs and fills the non-empty profiles but the problem is it makes the grid of 2x2 uneven and look messy. Is there a way to force it to be even

This is how it looks:

13522-dsfd.png

Thanks!

Edit*: Here is my code:

if(isProfile){	
		GUILayout.BeginArea( new Rect(Screen.width / 2 - 250, Screen.height / 2 - 300, 500, 840) );
		GUILayout.BeginVertical();
		GUILayout.FlexibleSpace();
		GUILayout.BeginHorizontal();
		if(GUILayout.Button(p1String)){
				PlayerPrefs.SetString("currentProfile", "1");
				Application.LoadLevel("gameStage");
		}
		if(GUILayout.Button(p2String)){
				PlayerPrefs.SetString("currentProfile", "2");
				Application.LoadLevel("gameStage");
			}
		GUILayout.EndHorizontal();
		GUILayout.EndVertical();
		GUILayout.BeginVertical();
		GUILayout.BeginHorizontal();
		if(GUILayout.Button(p3String)){
				PlayerPrefs.SetString("currentProfile", "3");
				Application.LoadLevel("gameStage");
			}
		if(GUILayout.Button(p4String)){
				PlayerPrefs.SetString("currentProfile", "4");
				Application.LoadLevel("gameStage");
			}
		GUILayout.EndHorizontal();
		GUILayout.EndVertical();
		GUILayout.FlexibleSpace();
		GUILayout.EndArea();
		//back to menu
		if(GUI.Button(new Rect(20, 20, ButtonSize.width, ButtonSize.height), "Back")){
				isProfile=false;
			}
	}

While both of the above answers will solve your problem, they’re not what you want. For a bunch of buttons laid out in a grid, the selection grid will work, but suppose you wanted to have the fourth box (of the same size) to be a different GUI element, the selection grid would not work.

Similarly, hardcoding the button button sizes and positions works fine, but opens up a whole different can of worms. If your GUI is designed in photoshop beforehand or you have a fixed display size and resolution, then a hard positioned GUI isn’t terrible to build. On the other hand, if you want to be flexible, it takes a lot more work with setting the sizes and positions.

With all that said, here’s how to do it with GUILayout:

**Vector2 boxSize = GUI.skin.button.CalcSize(new GUIContent(p3String));**
        
        GUILayout.BeginArea(new Rect(Screen.width / 4, Screen.height /4, Screen.width/2, Screen.height/2));
        GUILayout.BeginVertical();
            GUILayout.BeginHorizontal();
                **if (GUILayout.Button(p1String,GUILayout.MinWidth(boxSize.x)))**
                {
                    PlayerPrefs.SetString("currentProfile", "1");
                    Application.LoadLevel("gameStage");
                }
                
                **if (GUILayout.Button(p2String, GUILayout.ExpandHeight(true)))**
                {
                    PlayerPrefs.SetString("currentProfile", "2");
                    Application.LoadLevel("gameStage");
                }
                
           GUILayout.EndHorizontal();
        GUILayout.EndVertical();

        GUILayout.BeginVertical();
        GUILayout.BeginHorizontal();
            if (GUILayout.Button(p3String))
            {
                PlayerPrefs.SetString("currentProfile", "3");
                Application.LoadLevel("gameStage");
            }
            if (GUILayout.Button(p4String))
            {
                PlayerPrefs.SetString("currentProfile", "4");
                Application.LoadLevel("gameStage");
            }
            GUILayout.EndHorizontal();
        GUILayout.EndVertical();
        GUILayout.FlexibleSpace();
        GUILayout.EndArea();

I starred the relevant lines. Basically you can use GUIStyle.CalcSize to get the amount of space that would be taken up by the guiContent of that style. (In this case, since you are drawing buttons, I used the GUIStyle for the default button). Then you can use a GUILayout option to set the minimum width of the first box to the width of the bigger buttons. I also made the second profile box expand height to match.

To make this more generic, you could loop over every button and find the max width and height, and set each button to use that width and height.

You could use a SelectionGrid. It would handle the layouting itself. You could also override the precalculated button width and height by using GUILayoutOptions.

EDIT: You see a working example of SelectionGrid in the GUI Scripting Guide under Controls.

I’m not sure which comment you are refering to mine or Jamora’s :smiley:
If it’s Jamora’s then you’ll have to do some research yourself as I have no idea about selection grid yet.

As for mine.I took a look at your code and in it everything is fine until you pass information into the buttons.They simply deform.But if the second button contains information then everything seems to even out.Not sure why though.

Also what I did with your code was simply change

if(GUILayout.Button(p1String))
{
  //What is inside here is unaltered.
}

to

if(GUI.Button(new Rect(100,100,100,100),p1String))
{
  //your logic
}

Still does the same thing but you can control the size and position of the button.

I strongly suggest you take a look at Jamora’s links as they are helpful :slight_smile: