UI 패턴 (Dev Weeks: 작업 효율을 높이기 위한 유니티 UI 제작 프로그래밍 패턴들)

UI Navigation

UIView

UIView somePage = UIView.Get("PageName");
somePage.Show();

UIView는 Show와  Hide를가지고 있지만 UINavigatio에게 실행시키도록 한다.

var newPage = UINavigation.Push("PageName");
var previousPage = UINavigation.Pop();

Push("PageName") 함수를 실행하면 해당 이름을 가진 UI 프리팹을 가지고 반환한다.

UINavigation.Pop()을 실행하면 열려있는(마지막) UI페이지를 끄고 직전에 열렸던 UI Page를 반환한다.

 

UINavigation은 UIView들을 스택형식으로 저장을 하는 기능과 Push와 Pop을 가지고 있어야 한다.

UIView은 Hide와 Show 기능을 가지고 있어야 한다. 

 

UINavigation.Push("Library")

 

UINavigation.Pop

 

프리팹에서 인스턴스화 VS 씬에 UI View 미리 배치

 

프리팹에서 인스턴스화

UINavigation.Push("Library") 실행

• 마지막 UIView의 Hide 실행
• Library UIView 프리팹 인스턴스화 > Show 실행
• 생성된 UIView를 히스토리 스택에 Push
• UINavigation.Pop() 실행시 -> 마지막 뷰 파괴

장점:

• 같은 페이지에 대한 여러개의 게임 오브젝트 생성 (인스턴스화를 하기 때문에 view가 중복이 될 수 있다.)
• 컨텍스트 복구 구현이 쉽다.

단점:

• 플레이 버튼을 누르기 전, 남아 있는 뷰가 없어야 한다.
• 메인 씬에서 전체 페이지를 확인 불가능
• 히스토리 증가 > 뷰 게임 오브젝트 무한 증가
• 같은 페이지 & 다른 컨텍스트를 복구할 일이 의외로 없다.

씬에 UIView가 미리 존재 하는 방식

• Push("Library")
• Library 라는 이름의 UIView 타입을 찾음 
• Library 뷰를 스택에 추가
• Library 뷰의 Show() 실행
• 뷰를 나열하고 자유롭게 편집
• 플레이시 자동 위치 리셋 & 숨기기 기능

 

UIView

Show, Hide 메서드

애니메이션은 DoTween 사용

VisibleState

• Appearing
• Appeared
• Disappearing
• Disapeared

UINavigation

• Current : UIView -> 현재 UIView
• Push(string viewName) : UIView -> UIView를  찾고 띄움
• Pop() : UIView -> 현재 UI를 닫고 직전의 UI를 리턴함
• PopTo(string viewName) : UIView -> 원하는 UI를 얻을 때까지 전부 날림
• PopToRoot() : UIView -> 첫번 째 UIView에 도달할 때 까지 전부 Hide를 하고 스택에서 다 날림

 

 

예시

 

void HandleCharacterButtonClicked()
{
	var characterInfoPage = UINavigation.Push("Character Page") as UICharacterInfoPage;
    characterInfoPage.SetUp(_characterData);
}

as를 한 이유: UICharaterInfoPage는 UIView 페이지를 상속한 클래스이기 때문에 세부 타입으로 가져와서 세부 타입의 SetUp() 메소드를 실행하기 위함 

 

문제점:

플랫 내비게이션이 힘들다(스택이 하나 뿐)

플랫 내비게이션: 루트가 여럿 있는 구조

해결 방법

UINavigationController

UINavigation

UIView

 

UINavigationController를 추가해서 탭별로 UINavigation을 구현, 하고 각각 히스토리(스택)를 가지게 한다 

 

스위치를 하려면 UINavigationController.Current = storeNavigation; 

 

팝업의 경우

• 프리팹에서 인스턴스화
• 큐를 사용

팝업 프리팹 가져오기

Popup.GetPrefab("Default");

팝업 생성하기

var popup = PopupManager.Enqueue(Popup.GetPrefab("Default"))

메시지 지정하기 -> Layout 컴포넌트를 추가

popup.setText("messageField", message);
popup.setButtonData(
	new ButtonData{text = "No", (button) => Debug.Log("No Button Clicked")},
	new ButtonData{text = "Yes", (button) => Debug.Log("Yes Button Clicked")
    });

 

UIView 작업 플로우

• 마스터 캔버스 자식으로  UIView 프리팹들을 붙임
• 버전 관리를 위해 씬이 아닌 프리팹 단위로 작업

대안으로는 DoozyUI가 있는데 비주얼 그래프 형식으로 UI 관리 가능

 

참조:

Dev Weeks: 작업 효율을 높이기 위한 유니티 UI 제작 프로그래밍 패턴들 https://www.youtube.com/watch?v=_jW_D2vF9J8