[Unity] GUI, GUIStyle 및 GUILayout

일반적으로 Layout이 붙은것과 그렇지 않은 것이 있는데, 차이점은 Layout은 요소의 너비와 높이, 위치를 자동적으로 맞춰준다는 것이다.

public override void OnInspectorGUI () {
    test = target as TestComponent;

    test.key = EditorGUILayout.TextField ("Key", test.key);
    test.value = EditorGUILayout.IntField ("Value", test.value);
}

ayout 에서 사용되는 필드들은 위 사진 처럼 너비와 위치를 자동으로 넣어준다. 기본적으로 너비는 전체 너비에 맞춰지며 수직적으로 정렬된다.
높이는 기본적으로 에디터상에서 사용되는 필드의 기본 단일 높이 (EditorGUIUtility.singleLineHeight) 가 사용된다.
일반적인 GUI와 EditorGUI의 경우에는 자동적으로 정렬되지 않고, 사용자가 직접 위치와 높이를 가진 Rect 객체를 통해 사용할 수 있다.

Layout과 달리 기본적으로 높이 크기를 가지지 않기 때문에 별도로 해당 컴포넌트에 관한 인스펙터상에서 사용되는 높이 크기를 계산해야한다.
이런 복잡한 특성 때문에 보통은 Layout을 사용한다. 다만 PropertyDrawer 같은 경우 Layout 요소를 사용할 수 없다. (정확히는 Layout 요소가 마지막에 드로우되기 때문에 제대로 쓸 수 없다.)

1. GUILayout

public override void OnInspectorGUI () {
    test = target as TestComponent;

    GUIContent title = new GUIContent ("Test Data", "Input key and value"); //레이블 내용, 툴팁
    GUILayout.Label (title);
    GUILayout.Space (5);

    test.key = EditorGUILayout.TextField ("Key", test.key);
    test.value = EditorGUILayout.IntField ("Value", test.value);

    if (GUILayout.Button ("Clear")) {
        test.key = "";
        test.value = 0;
    }
}

• GUIContent) 필드에서 사용되는 레이블 (Label 이외에 TextField와 같은 Field에서 사용되는 레이블 포함)의 상세 내용 같은 것이다. 주로 툴팁과 같이 만들고 싶을 때 사용한다. 불필요하다면 string을 사용하는 오버로딩을 사용하면 된다.
• Label) 텍스트를 표시한다.
• Space) 여백을 넣는다. 다른 요소와 마찬가지로 현재 정렬 방식을 따른다 (Horizontal, Vertical), 보이지 않는 박스라고 생각하면 편하다. 다만 0이나 마이너스 값을 넣을 수도 있는데, 실제로 위치가 더 당겨진다. EditorGUILayout 에도 Space 가 있으나, 이 기능은 유니티 2020.1 버전 이후에 생겨난 것으로 호환성 폭이 많지 않으므로 당분간은 GUILayout.Space를 사용하는 것을 추천한다. 기능은 동일하다.
• Button) 버튼을 만든다. 클릭될 경우 true를 반환하는 형태로 되어 있다. 따라서 if문 내에서 사용할 수도 있으며, 미리 bool로 받아놓고 나중에 처리해도 상관없다. 다만 후자의 경우에는 코드 파악이 힘들기 때문에 권유하진 않는다.

private string key = "";
private string value = "";

private void OnGUI () {
    EditorGUILayout.BeginHorizontal ();

    GUILayout.Label ("Key", GUILayout.Width (40));
    key = EditorGUILayout.TextField (value);

    EditorGUILayout.EndHorizontal ();

    GUILayout.Label ("Value");
    value = EditorGUILayout.TextArea (value, GUILayout.ExpandHeight (true));
}

GUILayoutOption

Layout 에서 사용되는 요소들은 사용자가 직접 크기를 지정할 수 있도록 모든 오버로딩에 params GUILayoutOption[] 이 포함되어있다.

이는 GUILayout 에 포함된 Width, Height, Min, Max, Expand 등이 있다. 픽셀 사이즈로 직접 크기를 주는 것이라고 보면 된다. Label, Button, TextField 등 Layout 요소들에게 모두 사용할 수 있다.

ExpandWidth, ExpandHeight의 경우 사용을 원할 경우 인수로 true를 주면 되며, 남은 공간을 모두 사용하는 것이라고 생각하면 된다.

2. GUIStyle

private void OnGUI () {

    GUIStyle labelStyle = EditorStyles.boldLabel;
    labelStyle.alignment = TextAnchor.MiddleCenter;
    labelStyle.fontSize = 16;

    GUIStyle buttonStyle = new GUIStyle (GUI.skin.button);
    buttonStyle.alignment = TextAnchor.MiddleCenter;
    buttonStyle.fontStyle = FontStyle.Bold;

    GUILayout.Label ("Title Label", EditorStyles.boldLabel);
    bool clicked = GUILayout.Button ("Button", buttonStyle);
}

GUIStyle을 이용해 레이블, 버튼, 여러 필드 등을 사용자가 원하는 형태로 만들 수 있다. 에디터에서 사용되는 대부분 요소들의 기본 스타일이 GUI.skin 과 EditorStyles 에 포함되어 있으므로 원본 요소를 가져온 후에 세밀하게 값을 조정하여 사용하는 방식으로 쓰면 된다.
이는 Layout 요소 뿐만 아니라 EditorGUI 등의 Rect를 사용하는 요소들도 마찬가지로 모두 사용할 수 있다.

3. GUI

GUI에는 GUILayout에서 사용하는 Label, Button, Box 등을 Rect를 이용하여 지정된 위치에 표시하는 기능을 갖추고 있다. PropertyDrawer 에서 사용하는 것이 아니라면 GUILayout 을 이용해 사용하는 편을 추천한다. 다만 다른 요소에서 사용할 수 없는 색상 조절 기능이 GUI에 있기 때문에 색상에 관한 기능만 살펴보도록 하겠다.

private void OnGUI () {

    Color defaultContentColor = GUI.contentColor;
    Color defaultBackgroundColor = GUI.backgroundColor;

    GUI.contentColor = Color.red;
    GUILayout.Label ("Label");

    GUI.backgroundColor = new Color32 (128, 128, 128, 255);
    bool clicked = GUILayout.Button ("Button");

    GUI.contentColor = defaultContentColor;
    GUI.backgroundColor = defaultBackgroundColor;
}

GUI에서 사용되는 값들은 대부분 설정한 뒤로 그려지는 모든 GUI에게 영향을 미친다. 따라서 원본 색상을 미리 받아둔 상태에서 원하는 요소들의 드로우가 끝났다면 원본 값으로 다시 바꿔주는 방식으로 사용한다.

• contentColor) Label 또는 필드에 포함된 Label의 색상값
• backgroundColor) 버튼, TextField, Foldout의 화살표 등 별개로 사용되는 영역들의 색상값
• color) contentColor 및 backgroundColor 모두를 포함한 색상값, 위 코드에서는 사용하지 않았다.

GUI에서 사용되는 색상값들은 모두 OnGUI 혹은 OnInspectorGUI 함수 내에서만 사용 가능하다. 전역 변수로 사용할 수 없다.

 

출처 : https://blog.naver.com/PostView.nhn?blogId=2983934&logNo=222132501042&parentCategoryNo=&categoryNo=106&viewDate=&isShowPopularPosts=true&from=search