Unity 내일배움캠프 TIL 1017 | 델리게이트(Delegate)를 이용한 UI Popup 만들기 확장편

💡 델리게이트를 이용한 UI Popup

오늘은 어제 만들었던 UI_Popup을 확장시켜보겠다!

🍔 PopupButtonType

public enum PopupButtonType
{
    CONFIRM,
    CANCEL,
    OK,
    NOTIFY,
}

• 팝업 버튼에 따라 동작을 다르게 하기 위해 버튼의 타입을 Enum으로 선언해줬다.
• 근데 NOTIFY 팝업의 경우는 버튼이 없기 때문에 사실 버튼 타입보다는 팝업 타입이 더 맞는 말인 것 같다!
  이건 리팩토링 과정에서 수정하는 걸로!
• OK 팝업은 버튼이 하나만 있는 팝업이다.
• NOTIFY 팝업의 역할은 버튼이 없는 알림 팝업으로, 일정한 지연 시간이 흐른 뒤에 자동으로 닫힌다.
  다른 팀원 분이 만드시는 미니 게임에서 이런 팝업을 사용하시길래, 내가 만든 팝업을 확장시켜서 사용할 수 있도록 추가했다.

🍟 UI_Popup

private Callback callbackOk;

[SerializeField] private Image _popupBackgroundImage;
[SerializeField] private GameObject _contentTextObject;
[SerializeField] private GameObject _confirmButtonObject;
[SerializeField] private GameObject _cancelButtonObject;
[SerializeField] private GameObject _okButtonObject;

private TMP_Text _contentText;
private Button _confirmButton;
private Button _cancelButton;
private Button _okButton;

• Ok 팝업을 위한 callback을 추가했다.
• 어제 구현한 것과 달라진 점은 팝업 안에 있는 UI 컴포넌트들을 GameObject 형태로 받아온다는 것
  • 팝업 타입에 따라 버튼을 활성화하거나 비활성화 해야 하기 때문이다.
• 버튼이나 텍스트는 InitBind 함수 안에서 GetComponent로 연결시켜줬다.

🍕 UI_Popup 버튼 활성/비활성화

 private void SetButtonActive(PopupButtonType buttonType)
 {
 	switch (buttonType)
    {
    	case PopupButtonType.CONFIRM:
        case PopupButtonType.CANCEL:
        	_confirmButtonObject.SetActive(true);
            _cancelButtonObject.SetActive(true);
            _okButtonObject.SetActive(false);
            break;
        case PopupButtonType.OK:
        	_confirmButtonObject.SetActive(false);
            _cancelButtonObject.SetActive(false);
            _okButtonObject.SetActive(true);
            break;
        case PopupButtonType.NOTIFY:
            _confirmButtonObject.SetActive(false);
            _cancelButtonObject.SetActive(false);
            _okButtonObject.SetActive(false);
            break;
    }
}

• 팝업 타입에 따라서 버튼들을 활성화, 비활성화 한다.

🌭 ShowPopup

// 확인 버튼만 있는 팝업
public void ShowPopup(string content, string okButtonText, Callback OkAction)
{
	SetPopupAttributes(PopupButtonType.OK);
    SetButtonActive(PopupButtonType.OK);
    
    _contentText.text = content;
    _contentText.fontSize = DEFAULT_FONT_SIZE;
    _okButtonText.text = okButtonText;
    
    callbackOk = OkAction;
    OpenUI();
}

// 버튼 없는 알림 팝업
public void ShowPopup(string content)
{
	SetPopupAttributes(PopupButtonType.NOTIFY);
    SetButtonActive(PopupButtonType.NOTIFY);
    
    _contentText.text = content;
    
    OpenUI();
    CloseUIWithDelay();
}

• 어제 만든 ShowPopup 메서드를 오버로딩하여 두 가지 메서드를 더 만들었다.
• 확인 버튼만 있는 팝업은 팝업 내용, 버튼 텍스트, 확인 버튼 클릭 시 동작할 함수를 매개변수로 전달 받는다.
• 버튼 없는 알림 팝업의 경우 팝업 내용만을 전달 받는다.
• 각 ShowPopup 함수들은 팝업 타입에 따라 UI 컴포넌트들의 사이즈와 버튼의 활성/비활성화 여부를 설정한다.

🥪 알림 팝업 Close

private void CloseUIWithDelay()
{
	Invoke("CloseUI", 1f);
}

• 알림 팝업의 경우 지연 시간 뒤에 자동으로 닫혀야 하기 때문에 따로 callback 함수를 받지 않는다.
• 대신 지연 시간 이후 CloseUI를 호출하는 함수를 만들어서 ShowPopup 안에서 호출해줬다.

🌮 팝업 속성 설정

// 팝업의 크기 및 텍스트 위치 조절 (알림 팝업일 경우와 그 외 경우)
private void SetPopupAttributes(PopupButtonType buttonType)
{
	switch (buttonType)
    {
    	case PopupButtonType.CONFIRM:
        case PopupButtonType.CANCEL:
        case PopupButtonType.OK:
        	_popupBackgroundImage.rectTransform.sizeDelta = new Vector2(DEFAULT_POPUP_WIDTH, DEFAULT_POPUP_HEIGHT);
            _contentText.rectTransform.sizeDelta = new Vector2(DEFAULT_TEXT_WIDTH, DEFAULT_TEXT_HEIGHT);
            _contentText.rectTransform.anchoredPosition = new Vector3(0, 35f, 0);
            break;
        case PopupButtonType.NOTIFY:
            _popupBackgroundImage.rectTransform.sizeDelta = new Vector2(NOTIFICATION_POPUP_WIDTH, NOTIFICATION_POPUP_HEIGHT);
            _contentText.rectTransform.sizeDelta = new Vector2(NOTIFICATION_TEXT_WIDTH, NOTIFICATION_TEXT_HEIGHT);
            _contentText.rectTransform.anchoredPosition = new Vector3(0, -20f, 0);
            break;
    }
}

// 팝업 내용 텍스트 폰트 사이즈 조절
// ShowPopup 이후에 호출해야 함!
public void SetContextFontSize(int fontSize)
{
	_contentText.fontSize = fontSize;
}

• 알림 팝업의 경우 버튼이 없기 때문에 텍스트 area를 팝업의 중앙에 위치하도록 하기 위해 position y 값을 변경해야 한다.
• 또한 크기도 버튼이 있는 팝업보다 작게 설정해야 한다.
• 팝업이 재사용되기 때문에, 팝업을 호출하는 곳에서 팝업 내용에 따라 폰트 사이즈를 조절할 수 있도록 구현했다.
• 한 가지 주의할 점은 팝업은 재사용되기 때문에 ShowPopup을 할 때, 팝업과 텍스트 크기를 기본값으로 reset 해주고 있다.
  따라서 SetContextFontSize 함수 호출은 ShowPopup 이후에 해야 정상적으로 작동한다!

🌯 사용

private UI_Popup _uiPopup;

private void Start()
{
	_uiPopup = UIManager.Instance.GetUIComponent<UI_Popup>();
	_uiPopup.ShowPopup("짜잔 알림 팝업이에용");
}

• 팝업이 필요한 곳에서 이렇게 사용하면 된다!

🥤 결과물

• 그럼 이렇게 알림 팝업이 짜잔
  

• OK 팝업도 다음과 같이 잘 나온다!

오늘은 여기까지!!

끗!