UI 응용 총정리

총 4가지를 만들 예정이다

 

1. 버튼1을 누르면 버튼 3,4를 사라지게 하기 / 버튼2를 누르면 버튼 3,4를 나타나게 하기

2. ShowPopup 버튼을 누르면 Popup상자를 나타나게 하기 / Popup상자에 달린 close버튼을 누르면 사라지게 하기

                                                                               (글자제한 5글자)

3. Popup창의 Inputfield에 이름 입력. 두글자 이하면 두글자 이하버튼, 세글자 이상이면 세글자 이상 버튼이 나타나게 하기

4. [세글자 이상 버튼] 대신 [닉네임 변경]으로 버튼이름 변경. [닉네임 변경]을 누를시 텍스트 상자에 

"[바뀐 이름]으로 변경되었습니다" 출력.

 

 

1. 버튼1을 누르면 버튼 3,4를 사라지게 하기 / 버튼2를 누르면 버튼 3,4를 나타나게 하기

 

캔버스를 만들고 그 안에 버튼 4개를 만들어준다

 

우선 버튼1을 누르면 버튼 3,4가 사라지게 하는 스크립트를 만들어보자

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class UIComponent : MonoBehaviour
{
    [SerializeField] private Button btn1;
    [SerializeField] private Button btn2;
    [SerializeField] private Button btn3;
    [SerializeField] private Button btn4;
    void Start()
    {
       
        this.btn1.onClick.AddListener(() =>
        {
            // 2,3번 비활성화
            this.btn2.gameObject.SetActive(false);
            this.btn3.gameObject.SetActive(false);
        });
    }
}

우선 스크립트에서 인식할 버튼 4개를 선언해준뒤

 

    this.btn1.onClick.AddListener(() =>

          1번 버튼을 클릭하면

 {
     this.btn2.gameObject.SetActive(false);
     this.btn3.gameObject.SetActive(false);

       2,3번 버튼을 비활성화한다
 });

 

this.btn4.onClick.AddListener(() =>
{
    // 2,3번 비활성화
    this.btn2.gameObject.SetActive(true);
    this.btn3.gameObject.SetActive(true);
});

 

4번 버튼을 누를땐 둘다 활성화 시키기. 정확히 false만 true로 고쳐주면 된다.

 

위 스크립트는 버튼을 총관리하는 canvas안에 넣어준뒤, 컴포넌트 창에서 버튼을 이름에 알맞는 역할로 넣어준다

결과가 잘 나오는것을 확인한다

 

< 2. ShowPopup 버튼을 누르면 Popup상자를 나타나게 하기 / Popup상자에 달린 close버튼을 누르면 사라지게 하기>

캔버스를 하나 더 만들고 팝업을 여는 PopopenButton과 팝업인 PopupImage를 만들어준다

PopupImage 밑에는 이름을 입력하는 InputField와 팝업 닫는용으로 사용하는 CloseButton을 만들어 넣어준다

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ShowPopup : MonoBehaviour
{
    [SerializeField] private Image image;
    [SerializeField] private Button btn;
    [SerializeField] private Button closebtn;
    
    void Start()
    {
        this.btn.onClick.AddListener(() =>
        {
            this.image.gameObject.SetActive(true);
        });
        this.closebtn.onClick.AddListener(() =>
        {
            this.image.gameObject.SetActive(false);
        });
    }
}

 

이번에도 스크립트에서 인식할 팝업이미지, 팝업을 띄울 버튼, 팝업을 닫는 클로즈버튼을 선언한다

 

팝업을 띄울버튼을 누르면 

this.btn.onClick.AddListener(() =>
{

    팝업을 띄우고,
    this.image.gameObject.SetActive(true);
});

 

            클로즈버튼을 누르면

 this.closebtn.onClick.AddListener(() =>
 {

                  팝업을 지운다
     this.image.gameObject.SetActive(false);
 });

 

이 스크립트는 팝업을 띄우는 버튼과, 팝업을 담당하는 캔버스안에 넣어준뒤 알맞게 배치한다

결과가 잘 나온것을 확인한다

3. Popup창의 Inputfield에 이름 입력. 두글자 이하면 두글자 이하버튼,

세글자 이상이면 세글자 이상 버튼이 나타나게 하기(글자제한 5글자)

 

우선 두글자 이하버튼, 세글자 이상 버튼 2개를 만들어준다

버튼은 통일성을 위해 버튼을 관리하는 캔버스안에 넣어주었고

이름은 각각 TwoWordButton, ThreeWordButton으로 설정해주었다 

 

당연히 팝업쪽을 건드릴 예정이니 이번 스크립트도 팝업쪽 캔버스안에 넣어준다

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using Unity.Collections.LowLevel.Unsafe;
public class UINickname : MonoBehaviour
{
    [SerializeField] private TMP_InputField inputField;
    [SerializeField] private Button TwoWordbtn;
    [SerializeField] private Button ThreeWordbtn;
    void Start()
    {
        this.inputField.onValueChanged.AddListener((word) =>
        {
            if (word.Length < 3)
            {
                this.TwoWordbtn.gameObject.SetActive(true);
                this.ThreeWordbtn.gameObject.SetActive(false);

            }
            else if (word.Length >= 3)
            {
                this.TwoWordbtn.gameObject.SetActive(false);
                this.ThreeWordbtn.gameObject.SetActive(true);
            }
        });
    }
}

이름을 입력받을 inputField

[SerializeField] private TMP_InputField inputField;

방금 만든 두글자이하, 세글자 이상 버튼
[SerializeField] private Button TwoWordbtn;
[SerializeField] private Button ThreeWordbtn;

 

 void Start()
 {

                          <이름을 입력받는다>
     this.inputField.onValueChanged.AddListener((word) =>
     {     <입력받은 이름의 길이가 3글자 이하일때>
         if (word.Length < 3)
         {

             <각각 상황에 맞는 상자를 활성화하고 비활성화한다>
             this.TwoWordbtn.gameObject.SetActive(true);
             this.ThreeWordbtn.gameObject.SetActive(false);
         }

             <입력받은 이름의 길이가 3 이상일때>
         else if (word.Length >= 3)
         {

     <역시 각각 상황에 맞는 상자를 활성화하고 비활성화한다>
             this.TwoWordbtn.gameObject.SetActive(false);
             this.ThreeWordbtn.gameObject.SetActive(true);
         }

});

 

스크립트를 캔버스안에 넣어준뒤 각각 알맞게 넣어준다

글자수에 맞춰 버튼이 알맞게 활성화/비활성화되는 것을 볼 수 있다

이제 글자수를 5글자로 제한해보자

이름을 입력받는 InputField를 클릭한뒤 Inspector창에서 Character Limit을 5로 설정해준다

그럼 5글자 이상 더 입력이 안되는것을 확인할 수 있다

 

4. [세글자 이상 버튼] 대신 [닉네임 변경]으로 버튼이름 변경. [닉네임 변경]을 누를시 텍스트 상자에 

"[바뀐 이름]으로 변경되었습니다" 출력.

 

우선 세글자 이상 버튼의 이름을 변경하고 바뀐 닉네임을 알려줄 텍스트 상자도 하나 넣어준다

 

닉네임 변경 버튼을 눌렀을때 텍스트를 띄워주는것이니 당연히 텍스트로 팝업쪽 캔버스에 넣어주었고,

스크립트 역시 닉네임 변경(구 세글자이상 버튼)버튼을 띄우던 기존 스크립트에 추가해준다

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using Unity.Collections.LowLevel.Unsafe;
public class UINickname : MonoBehaviour
{
    [SerializeField] private TMP_InputField inputField;
    [SerializeField] private Button TwoWordbtn;
    [SerializeField] private Button ThreeWordbtn;
             <텍스트식의 Changetext 인식>
    [SerializeField] private TMP_Text Changetext;
    void Start()
    {
        this.inputField.onValueChanged.AddListener((word) =>
        {
            if (word.Length < 3)
            {
                this.TwoWordbtn.gameObject.SetActive(true);
                this.ThreeWordbtn.gameObject.SetActive(false);

            }
            else if (word.Length >= 3)
            {
                this.TwoWordbtn.gameObject.SetActive(false);
                this.ThreeWordbtn.gameObject.SetActive(true);
            }
                               <추가한 내용>
            this.ThreeWordbtn.onClick.AddListener(() =>
            {
                this.Changetext.text = string.Format("바뀐 닉네임 : {0}", word);
            });
        });
    }

}

 

      

우선 맨위에 텍스트 형식의 Changetext를 인식시켜준다

[SerializeField] private TMP_Text Changetext;

 

.........

ThreeWordbtn을 클릭해주는 순간

this.ThreeWordbtn.onClick.AddListener(() =>
            {

         Changetext에 "바뀐 닉네임 : [입력한문자열]"을 문자열 형식으로 출력한다
                this.Changetext.text = string.Format("바뀐 닉네임 : {0}", word);
            });

 

 

스크립트를 저장해준뒤 새롭게 생긴 Changetext에 알맞는 텍스트로 집어넣어준다

 

잘 적용된것을 확인할 수 있다