GUIs: Layouts

Overview

Layouts are used for automatically ordering windows next to each other.

It is often for ordering check boxes and text in the game settings and admin system, ordering center print text vertically on the HUD, etc.

If a group of windows should be ordered after each other vertically or horizontally then a parent window of type vertical or horizontal should be used:

windowDef lytVertical {
	type layoutVertical;
}

windowDef lytHorizontal {
	type layoutHorizontal;
}

A window of type layoutStatic should be used if there is a group of windows that does not fit in a vertical/horizontal layout, but the window around them should be:

windowDef lytVertical {
	type layoutVertical;
	properties {
		rect rect = 0, 0, 320, SCREEN_HEIGHT;
	}
	// Absolute window position will be 0, 100.
	windowDef {
		properties {
			rect rect = 0, 100, 320, 30;
		}
	}
	// Absolute window position will be 0, 150.
	windowDef {
		type layoutStatic;
		properties {
			rect rect = 0, 50, 320, 50;
		}
		// Additional windows here
	}
	// Absolute window position will be 0, 200.
	windowDef {
		properties {
			rect rect = 0, 0, 320, 30;
		}
	}
}

Margin and Spaces

A layout may automatically create a margin around the edge of its window or a spacing between child windows.

windowDef lytVertical {
	type layoutVertical;
	properties {
		rect rect = 0, 0, 320, SCREEN_HEIGHT;
		float margins = 2, 2, 2, 2;
		float spacing = 5, 0;
	}
	// Absolute window position will be 2, 102.
	windowDef {
		properties {
			rect rect = 0, 100, 320, 30;
		}
	}
	// Absolute window position will be 2, 137 (margin + 102 + spacing).
	windowDef {
		properties {
			rect rect = 0, 0, 320, 30;
		}
	}
}

Example

Here's an example from the end game scoreboard (guis/game/scoreboard/scoreboard.gui) which displays the players with the most XP in the different proficiencies:

windowDef lytLeft {
	type layoutVertical;
	properties {
		rect rect = PADDING, _top( awards ), _client_dimension( awards, width ) * 0.5f, _fill_to_bottom_of( awards );
		vec4 margins = 0, 0, 0, 0;
	}
	_rating_button( Soldier, "best_soldier", localize( "guis/mainmenu/bestsoldier" ), PR_BEST_SOLDIER, 0, 0 )
	_rating_button( Medic, "best_medic", localize( "guis/mainmenu/bestmedic" ), PR_BEST_MEDIC, 0, 0 )
	_rating_button( Engineer, "best_engineer", localize( "guis/mainmenu/bestengineer" ), PR_BEST_ENGINEER, 0, 0 )
	_rating_button( FieldOps, "best_fieldops", localize( "guis/mainmenu/bestfieldops" ), PR_BEST_FIELDOPS, 0, 0 )
	_rating_button( CovertOps, "best_covertops", localize( "guis/mainmenu/bestcovertops" ), PR_BEST_COVERTOPS, 0, 0 )
	_rating_button( BattleSense, "best_battlesense", localize( "guis/mainmenu/bestbattlesense" ),PR_BEST_BATTLESENSE, 0, 0 )
	_rating_button( Weapons, "best_weapons", localize( "guis/mainmenu/bestweapons" ), PR_BEST_LIGHTWEAPONS, 0, 0 )
	_rating_button( Vehicles, "best_vehicles", localize( "guis/mainmenu/bestvehicles" ), PR_BEST_VEHICLE, 0, 0 )
}