1. 레이아웃 생성 및 설정
- 캔버스의 하위 요소로 빈 오브젝트인 max와 그 하위 오브젝트인 popup을 만든다.
- max와 popup에 Vertical Layout Group 컴포넌트를 추가한다.
- max - 만들고 있는 팝업의 최대 크기를 결정하기 위해 생성
- 최대 영역의 크기를 보기 위해 임시로 이미지 삽입
- Child Alignment를 Middle Center로 맞춘다.
→ 팝업 텍스트 가운데 정렬
- Control Child Size Width/Height를 체크한다.
- 하위 요소에 의해서 사이즈가 결정되도록 함.
→ 텍스트의 길이에 따라 팝업창의 길이를 조절하기 위함
- Child Force Expand Width/Height 체크를 해제
- PopUp 하위 요소로 팝업 배경을 위한 Image UI(BackGround)를 생성하고 적절한 스프라이트를 넣는다.
- BackGround는 PopUp의 하위 오브젝트이다.
→ Vertical Layout의 정렬 대상이 됨
- 배경은 말 그대로 배경이기 때문에 정렬되면 안 된다.
→ 정렬 대상에서 제외해 주는 작업 필요( Layout Element - Ignore Layout)
- Layout Element 컴포넌트 추가 및 Ignore Layout 체크
- Layout Element
- 요소가 레이아웃 컨트롤러에 의해 정렬당할 때 자신의 사이즈를 재정의해주기 위해 존재
앵커가 좌측 상단에 박혀있어 정렬이 되지 않는다.
가운데 정렬
- 앵커가 좌측 상단에 박혀있어 제대로 정렬이 되지 않는다.
- Rect Transform에서 Anchor와 Pivot 그리고 포지션(Alt + Shift + 클릭)으로 가운데 정렬해 준다.
2. 팝업 내부 세팅(텍스트, 버튼)
최대한 길게 입력한다.
패딩 값 조절
- PopUp의 하위 요소로 Text UI를 생성한 후 문구를 길게 입력한다.
- 텍스트의 상하좌우 사이즈를 알기 위해서 최대한 많이 입력
- 이후 PopUp 오브젝트의 Padding Top/Bottom 값을 조절해 준다.
- 상태표시줄(Top)과 버튼이 들어갈 자리(Bottom) 정도의 간격을 둔다.
- 버튼 두 개를 생성하여 Layout Element → Ignore Layout 체크
- 상위 오브젝트가 PopUp이기 때문에 Vertical Layout의 정렬 대상이 됨.
→ 크기를 마음대로 조절할 수 없음
가운데 아래 정렬
- Set Native Size를 눌러 이미지를 원상태로 만들어 비율을 정상화시킨다.
- 이후 팝업시스템에 알맞게 버튼의 위치, 텍스트 등을 커스텀
- 나는 Anchor Preset에서 가운데 아래정렬(Alt+Shift+클릭) 한 후 조정
3. 백그라운드 텍스트에 따라 늘리기
- 팝업사이즈에 맞춰 백그라운드 이미지를 줄이기 위해
BackGround를 전방향 Strectch로 설정(피벗, 앵커, 포지션 모두)
- 이후 보기 좋게 PopUp의 Padding 값을 조절
중간 결과
- 텍스트가 많아질 때마다 PopUP의 상하좌우가 늘어난다.
- 또한 설정해 둔 Max이후로는 늘어나지 않는다.
- 텍스트가 적을 때 버튼과 팝업이 따로 노는 문제 발생
→ 버튼과 팝업이 따로 놀지 않는 최소 사이즈를 설정해 준다.
- Text에 Layout Element 컴포넌트를 추가시켜 준 다음 Min Width/Height를 설정한다.
- 그림과 같이 글자가 없어서 최소 사이즈를 유지하게 된다.
동작 원리
Text 레이아웃 프로퍼티
사이즈
- Min Width/Height : 자신의 최소 사이즈( 일반적인 요소와 같음)
- Preferred Width/Height : 텍스트가 OverFlow 옵션일 때 텍스트의 전체 사이즈를 뜻함
- 해당 값은 Layout Controller 존재할 때 의미를 가짐
- 할 수 있는 최대한의 사이즈 (선호되는 사이즈)
Vertical Layout Group 특징
- Vertical Layout Group 컴포넌트는 정렬 요소가 자신보다 커지는 것을 방지하기 위해 제한점을 둠
- 텍스트의 길이가 길어지면 가로가 늘어나는데,
텍스트의 가로길이가 PopUp의 가로길이보다 길어지지 않기 위해 세로를 늘림
- Text의 Wrap 옵션으로 인해 텍스트가 세로로 넘어감
- 가로와 세로 둘 다 크다면 더 이상 커지지 못하게 한다.
- 위 2가지 이유는 PopUp이 max를 넘지 못하는 이유와도 같음
전체 과정
- 텍스트가 더 이상 길어지지 못해 Text의 Wrap 옵션에 의해 텍스트가 밑으로 넘어간다.
- 그에 따라 Preferred Height가 증가한다.
- Text의 늘어난 사이즈를 PopUp에 있는 Vertical Layout Group이 전달받음
- Control Child Size 옵션으로 인해 Text의 Preferred Width/Height가 PopUp의 사이즈가 됨
- backGround가 Stretch이므로 자연스럽게 늘어나게 됨
최종본
최종본
- 팝업의 최소 사이즈를 유지하고,
텍스트가 최소 사이즈를 넘어가게 되면 그때부터 팝업의 길이가 길어지게 됨
- 현업에서는 모든 상황에서 대처 가능한 시스템을 사용하는 것이 좋음
→ 글자에 따라 길이가 달라지는 해당 반응형 팝업은 좋은 방법
