Layout Modes

Fixed Layout vs Automatic Layout

사용자가 GUIs를 정렬하고 구성하기 위해서 사용할 수 있는 두 가지의 모드가 있습니다: 고정 모드 그리고 자동 모드. 이제까지 이 가이드에서 제공된 모든 UnityGUI 예제는 고정된 레이아웃을 사용했습니다. 자동 레이아웃을 사용하기 위해서 컨트롤 함수를 부를 때 GUI 대신에 GUILayout을 씁니다. 사용자는 다른 것에 대해 하나의 레이아웃 모드를 사용할 필요는 없습니다. 그리고 사용자는 같은 OnGUI() 함수에서 한 번에 모두의 모드를 사용할 수 있습니다.

고정된 레이아웃은 사용자가 작업하는 것으로 부터 미리 디자인된 인터페이스를 가질 때 사용하기 좋습니다. 자동 레이아웃은 사용자가 얼마나 많은 요소들을 필요로 하는지를 모르거나 각 컨트롤을 손으로 위치시키는 것에 대해서 걱정하고 싶지 않을 때 사용하기 적합합니다. 예를 들어 사용자가 Save Game 파일들에 기반을 둔 많은 수의 다른 버튼들을 생성하고 있다면 사용자는 정확하게 얼마나 많은 버튼이 그려질 지 모릅니다. 이런 경우에 자동 레이아웃이 더욱 적합합니다. 그것은 사용자의 디자인과 매우 관련이 있고 또한 사용자가 사용자의 인터페이스를 어떻게 보여주고 싶은지에도 관련이 있습니다.

자동 레이아웃을 사용할 때 두 개의 중요한 차이가 있습니다:

GUILayout가 GUI 대신에 사용됩니다.
Rect() 함수는 자동 레이아웃 컨트롤을 위해서 필요로 되어지지 않습니다.

/* Two key differences when using Automatic Layout */
 
 
// JavaScript
function OnGUI () {
	// Fixed Layout
	GUI.Button (Rect (25,25,100,30), "I am a Fixed Layout Button");
 
	// Automatic Layout
	GUILayout.Button ("I am an Automatic Layout Button");
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	void OnGUI () {
		// Fixed Layout
		GUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");
 
		// Automatic Layout
		GUILayout.Button ("I am an Automatic Layout Button");
	}
 
}

Arranging Controls

어떠한 레이아웃 모드를 사용자가 사용하고 있는지에 따라서 사용자의 컨트롤이 어디에 위치해 있고 그들이 어떻게 함께 그룹되어 지는지를 조정하기 위한 다른 방법이 있습니다. 고정 레이아웃에서는 사용자는 Groups으로 다른 컨트롤들을 넣을 수 있습니다. 자동 레이아웃에서 사용자는 Areas, Horizontal Groups, 그리고 Vertical Groups으로 다른 컨트롤을 넣을 수 있습니다.

Fixed Layout - Groups

그룹은 고정 레이아웃 모드에서 가능한 관례입니다. 그들은 사용자가 다수의 컨트롤을 포함하는 스크린의 영역을 정의하게 합니다. 사용자는 GUI.BeginGroup()과 GUI.EndGroup()함수를 사용해서 그룹안에 어떤 컨트롤이 있는지를 정의합니다. 그룹 안의 모든 컨트롤은 스크린의 왼쪽 위쪽 코너를 대신해 그룹의 왼쪽 위쪽 코너위를 기준으로 위치가 정해질 것입니다. 이 방법으로 사용자가 실시간으로 그룹을 재위치 한다면 그 그룹안의 모든 컨트롤의 상대적인 위치들이 유지될 것입니다.

하나의 예로서 다수의 컨트롤을 스크린위에 중심에 놓는 것이 매우 쉽습니다.

/* Center multiple Controls on the screen using Groups */
 
 
// JavaScript
function OnGUI () {
	// Make a group on the center of the screen
	GUI.BeginGroup (Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
	// All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
 
	// We'll make a box so you can see where the group is on-screen.
	GUI.Box (Rect (0,0,100,100), "Group is here");
	GUI.Button (Rect (10,40,80,30), "Click me");
 
	// End the group we started above. This is very important to remember!
	GUI.EndGroup ();
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	void OnGUI () {
		// Make a group on the center of the screen
		GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
		// All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
 
		// We'll make a box so you can see where the group is on-screen.
		GUI.Box (new Rect (0,0,100,100), "Group is here");
		GUI.Button (new Rect (10,40,80,30), "Click me");
 
		// End the group we started above. This is very important to remember!
		GUI.EndGroup ();
	}
 
}

위의 예는 스크린 해상도에 상관없이 컨트롤을 중심에 놓습니다.

사용자는 또한 복수 그룹들을 각각의 안에다가 묶을 수 있습니다. 이것을 할때는, 각 그룹들은 그들의 콘텐츠를 부모의 공간에 붙여 (clip) 놓아야 합니다.

/* Using multiple Groups to clip the displayed Contents */
 
 
// JavaScript
var bgImage : Texture2D; // background image that is 256 x 32
var fgImage : Texture2D; // foreground image that is 256 x 32
var playerEnergy = 1.0; // a float between 0.0 and 1.0
 
function OnGUI () {
	// Create one Group to contain both images
	// Adjust the first 2 coordinates to place it somewhere else on-screen
	GUI.BeginGroup (Rect (0,0,256,32));
 
	// Draw the background image
	GUI.Box (Rect (0,0,256,32), bgImage);
 
	// Create a second Group which will be clipped
	// We want to clip the image and not scale it, which is why we need the second Group
	GUI.BeginGroup (Rect (0,0,playerEnergy * 256, 32));
 
	// Draw the foreground image
	GUI.Box (Rect (0,0,256,32), fgImage);
 
	// End both Groups
	GUI.EndGroup ();
	GUI.EndGroup ();
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	// background image that is 256 x 32
	public Texture2D bgImage; 
 
	// foreground image that is 256 x 32
	public Texture2D fgImage; 
 
	// a float between 0.0 and 1.0
	public float playerEnergy = 1.0f; 
 
	void OnGUI () {
		// Create one Group to contain both images
		// Adjust the first 2 coordinates to place it somewhere else on-screen
		GUI.BeginGroup (new Rect (0,0,256,32));
 
		// Draw the background image
		GUI.Box (new Rect (0,0,256,32), bgImage);
 
			// Create a second Group which will be clipped
			// We want to clip the image and not scale it, which is why we need the second Group
			GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));
 
			// Draw the foreground image
			GUI.Box (new Rect (0,0,256,32), fgImage);
 
			// End both Groups
			GUI.EndGroup ();
 
		GUI.EndGroup ();
	}
 
}

사용자는 클립하는 행동들을 생성하기 위해 그룹들을 함께 묶을 수 있습니다

Automatic Layout - Areas

Areas는 자동 레이아웃 모드에서만 사용됩니다. 그들은 GUILayout 컨트롤을 포함하는 스크린의 유한한 위치를 정의하는 것으로서 기능적으로 고정 레이아웃 그룹과 비슷합니다. 자동 레이아웃의 특성때문에 사용자는 거의 항상 Areas를 사용합니다.

자동 레이아웃 모드에서 사용자는 컨트롤 레벨에서 컨트롤이 그려질 곳인 스크린의 영역을 정의하지 않습니다. 컨트롤은 자동으로 그것의 포함하는 영역의 위쪽 가장 왼쪽 지점에 놓여질 것입니다. 이것은 스크린 일지도 모릅니다. 사용자는 또한 수동적으로 위치되는 영역을 생성할 수 있습니다. 영역안에서GUILayout 컨트롤은 그 영역의 위쪽 가장 왼쪽 지점에 놓여질 것입니다.

/* A button placed in no area, and a button placed in an area halfway across the screen. */
 
 
// JavaScript
function OnGUI () {
	GUILayout.Button ("I am not inside an Area");
	GUILayout.BeginArea (Rect (Screen.width/2, Screen.height/2, 300, 300));
	GUILayout.Button ("I am completely inside an Area");
	GUILayout.EndArea ();
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	void OnGUI () {
		GUILayout.Button ("I am not inside an Area");
		GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
		GUILayout.Button ("I am completely inside an Area");
		GUILayout.EndArea ();
	}
 
}

영역안에서 버튼과 박스들처럼 보이는 요소들은 영역의 전체 길이로 그들의 너비를 늘릴 것입니다.

Automatic Layout - Horizontal and Vertical Groups

자동 레이아웃을 사용할 때 컨트롤은 기본적으로 위에서 아래로 하나 이후에 또 하나가 나타날 것입니다. 사용자의 컨트롤이 놓여지는 곳과 그들이 어떻게 정렬되는지에 대한 컨트롤의 좀 더 세밀한 레벨을 사용자가 원할 경우는 많습니다. 사용자가 자동 레이아웃 모드를 사용하고 있다면 사용자는 수평 그리고 수직 그룹의 선택사항을 가집니다.

다른 레이아웃 컨트롤처럼 사용자는 이러한 그룹들을 시작하고 끝내기 위한 별개의 함수드을 부릅니다. 특정한 함수는 GUILayout.BeginHoriztontal(), GUILayout.EndHorizontal(), GUILayout.BeginVertical(), 그리고 GUILayout.EndVertical().

수평 그룹안의 어떠한 큰트롤도 항상 수평적으로 놓여질 것입니다. 수직 그룹의 어떠한 컨트롤도 수직방향으로 놓여질 것입니다. 이것은 사용자가 서로안에서 그룹들을 둥지 짓는 것을 시작합니다. 이것은 사용자가 어떠한 이미지적인 구성에서 어떠한 숫자의 컨트롤이라도 정렬하도록 허락합니다.

/* Using nested Horizontal and Vertical Groups */
 
 
// JavaScript
var sliderValue = 1.0;
var maxSliderValue = 10.0;
 
function OnGUI()
{
	// Wrap everything in the designated GUI Area
	GUILayout.BeginArea (Rect (0,0,200,60));
 
	// Begin the singular Horizontal Group
	GUILayout.BeginHorizontal();
 
	// Place a Button normally
	if (GUILayout.RepeatButton ("Increase maxnSlider Value"))
	{
		maxSliderValue += 3.0 * Time.deltaTime;
	}
 
	// Arrange two more Controls vertically beside the Button
	GUILayout.BeginVertical();
	GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
	sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0, maxSliderValue);
 
	// End the Groups and Area
	GUILayout.EndVertical();
	GUILayout.EndHorizontal();
	GUILayout.EndArea();
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	private float sliderValue = 1.0f;
	private float maxSliderValue = 10.0f;
 
	void OnGUI()
	{
		// Wrap everything in the designated GUI Area
		GUILayout.BeginArea (new Rect (0,0,200,60));
 
		// Begin the singular Horizontal Group
		GUILayout.BeginHorizontal();
 
		// Place a Button normally
		if (GUILayout.RepeatButton ("Increase maxnSlider Value"))
		{
			maxSliderValue += 3.0f * Time.deltaTime;
		}
 
		// Arrange two more Controls vertically beside the Button
		GUILayout.BeginVertical();
		GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
		sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);
 
		// End the Groups and Area
		GUILayout.EndVertical();
		GUILayout.EndHorizontal();
		GUILayout.EndArea();
	}
 
}

수평 & 수직 그룹과 함께 정렬된 세 개의 컨트롤

Using GUILayoutOptions to define some controls

사용자는 자동 레이아웃의 파라미터의 어떠한 부분을 덮어쓰기 위해서GUILayoutOptions을 사용할 수 있습니다. 사용자는GUILayout 컨트롤의 마지막 파라미터로서 선택사항을 제공하는 것에 의해 이것을 합니다.

위의 예제의 Areas에서 어디서 버튼이 영역 너비의 100%만큼 느려질 수 있다고 했는지를 기억하십시오. 우리는 우리가 원한다면 그것을 덮어쓸 수 있습니다.

/* Using GUILayoutOptions to override Automatic Layout Control properties */
 
 
//JavaScript
function OnGUI () {
	GUILayout.BeginArea (Rect (100, 50, Screen.width-200, Screen.height-100));
	GUILayout.Button ("I am a regular Automatic Layout Button");
	GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
	GUILayout.EndArea ();
}
 
 
// C#
using UnityEngine;
using System.Collections;
 
public class GUITest : MonoBehaviour {
 
	void OnGUI () {
		GUILayout.BeginArea (new Rect (100, 50, Screen.width-200, Screen.height-100));
		GUILayout.Button ("I am a regular Automatic Layout Button");
		GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
		GUILayout.EndArea ();
	}
 
}

가능한GUILayoutOptions의 모든 리스트를 위해서 GUILayoutOption Scripting Reference page을 읽어보시기 바랍니다.

출처: 유니티코리아위키 (CC BY-NC-SA 2.0)

목차