[Unity] 에디터 프로그래밍 – 탭(Tab) 기능

Editor window에 버튼이나 레이블등 콘트롤을 추가하다 보면 UI 공간이 부족하게 된다.  이때 탭을 넣어 화면을 전환시킨다면 하나의 윈도우에서 더 많은 UI 공간을 확보할 수 있다.  크롬 브라우저의 탭처럼 말이다.  

탭만 넣는 것은 생각보다 간단하다.  GUILayout.Toolbar API만 이용하면 간단히 탭 버튼을 추가할 수 있다. 

탭 버튼을 추가했으니, 화면을 전환하는 코드만 추가하면 기능상에 추가할 것은 없다. 

    private void OnGUI()
    {
        tabIndex = GUILayout.Toolbar(tabIndex, tabSubject);
        switch(tabIndex)
        {
            case 0:
                OnGUI_Main();
                break;
            case 1:
                OnGUI_View();
                break;
            case 2:
                OnGUI_Setting();
                break;
        }
    }
    private void OnGUI_Main() { GUILayout.Label("Main"); }
    private void OnGUI_View() { GUILayout.Label("View"); }
    private void OnGUI_Setting() { GUILayout.Label("Setting"); }

이제 원하는 탭에 노출하고자 하는 콘트롤들을 자유롭게 배치할 수 있고, Tab도 원하는 만큼 늘리거나 줄일 수 있다.

그런데 뭔가 아쉽다…

탭이 버튼 형태이어서 그런지, 버튼과 레이블등이 혼재되어 있을 때, 이게 탭인지 아닌지 눈에 잘 띄지 않는다.   그래서 디폴트로 스트레칭되지 않게 사이즈를 조절해 보았다.

tabIndex = GUILayout.Toolbar(tabIndex, tabSubject, GUILayout.Width(200));  //width 200으로 고정

왼쪽으로 쏠렸다.  중앙에 배치하면 좀 더 깔끔해보일 것 같아서 align을 해보았다.  그런데, 생각보다 center align을 하기가 쉽지 않다.  굳이 찾은 방법이 양쪽에 GUILayout.FlexibleSpace()를 배치하는 것이었다.

GUILayout.BeginHorizontal();

GUILayout.FlexibleSpace();
tabIndex = GUILayout.Toolbar(tabIndex, tabSubject, GUILayout.Width(200));
GUILayout.FlexibleSpace();
 
GUILayout.EndHorizontal();

그래도 첫줄 중앙에 배치하니 처음보다는 좀 탭으로 보이는 듯 하다.  그래도 아직 뭔가 부족하다.

커스텀 스킨을 씌워보자.  스킨을 만드는 방법은 에디터 프로그래밍 – 한글폰트 적용하기를 참고하면 된다.  GUI skin파일을 만들었다면, 탭 스킨의 정의를 만들어야 한다. 

GUI skin파일의 제일 끝에 Custom Styles라는 항목이 있다.  여기에 항목 하나를 추가하여 Name을 “Tab”으로 정의하자.

그리고, 탭 버튼에 사용할 normal과 active 이미지를 세팅하고, 텍스트 색도 원하는 색으로 바꾼다.

Border/Margin/Padding 값과 Alignment, Width도 원하는 값으로 세팅하자.

값 세팅이 모두 끝났다면, GUI skin을 로드하여 “Tab”으로 정의된 커스텀 스타일을 가져 올 수 있다.

GUISkin myskin = Resources.Load("MySkin");
GUIStyle tabStyle = myskin.GetStyle("Tab");

.....
tabIndex = GUILayout.Toolbar(tabIndex, tabSubject, tabStyle);

코딩작업까지 완료했다면, 다음과 같은 GUI를 만들 수 있다.

마지막으로, 탭과 탭의 컨텐츠 사이에 줄을 그려넣어서 좀 더 메뉴같이 보이도록 해보자.

....
var rect = EditorGUILayout.BeginHorizontal();
Handles.color = Color.gray;
Handles.DrawLine(new Vector2(rect.x + 10, rect.y), new Vector2(rect.width - 10, rect.y));
EditorGUILayout.EndHorizontal();
....

처음과 비교하면, UI가 많이 발전된 것 같아 나름 만족스럽다.  기호에 따라 텍스쳐나 폰트를 더 가미할 수도 있을 것이다.  🙂  

---