개요

📜 콤보박스를 커스텀해보자.

콤보박스는 UI를 통해 특정한 값을 설정하는데 매우 유용하게 사용됩니다.
그런데 한가지 문제가 있다면 기본 디자인이 못생겼다는 겁니다.

그래서 디자인된 위젯을 콤보 박스의 Content와 Item에 적용해보겠습니다.

참고 유튜브 영상

본론

---

📜 커스텀 콤보 박스

하나씩 알아보자. 👍

---

위젯 디자인

우선 커스텀 디자인을 한 위젯이 2가지 필요합니다.

콤보박스 자체가 될 Content와 콤보박스를 누르면 보일 Item에 사용될 위젯입니다.
저는 현재 진행중인 프로젝트를 예시로 설명을 하겠습니다.

로비에서 색상을 선택할 수 있는 위젯을 제작했습니다.

Content 위젯

단순히 현재 어떤 색상을 골랐는지 알 수 있는 위젯입니다.

색상 이미지
색상 텍스트

그리고 값을 넣어줄 수 있는 커스텀 이벤트를 하나 만들어 두겠습니다.

Item 위젯

Item 위젯도 옵션값을 넣을 수 있는 이미지와 텍스트가 있습니다.
커스텀 콤보 아이템을 클릭하는 이벤트를 위해서 Item위젯에는 버튼이 있어야 합니다.

위젯 어디를 누르더라도 클릭이 되도록 버튼을 최대크기로 설정했습니다.

Item위젯은 생성되면서 콤보박스의 어떤 옵션값인지를 저장할 필요가 있습니다.
저는 색상값은 Integer로 하나 만들어서 Expose On Spawn으로 설정했습니다.

그리고 키값을 반환할 수 있는 이벤트 디스패쳐를 하나 만들어 주세요.

버튼의 OnClicked에서 Call로 받아주세요.

이제 콤보박스를 사용할 위젯으로 이동하겠습니다.

---

커스텀 콤보 박스 설정

설정 자체는 매우 간단합니다.

콤보박스 추가

우선 콤보 박스를 추가해주세요.
그리고 Events를 보시면 On Generate Content Widget과 On Generate Item Widget이 있습니다.

Content Widget 적용

On Generate Content Widget부터 만들어 주겠습니다.
Create Binding 눌러 주세요.

그럼 아래와 같은 함수가 생성됩니다. 익숙한 위젯 바인딩이죠?

여기서 Create Widget으로 적용할 커스텀 위젯을 넣어 주면 끝입니다.
아래 과정으로 넣어 주세요.

실행해보면 콤보박스의 기본 상태가 제작한 커스텀 위젯으로 변경된걸 볼 수 있습니다.
하지만 Item을 보면 기본 상태입니다. 이제 Item도 커스텀 위젯을 넣어주겠습니다.

Item Widget 적용

동일하게 On Generate Item Widget도 바인딩 함수 생성해주세요.

그리고 Create Widget으로 커스텀 아이템 위젯을 넣어 주세요.

여기서 바인딩함수에서 Item 아웃풋값이 콤보박스에서 설정한 옵션값이 순서대로 들어옵니다.
해당 값을 옵션 저장값에 할당해주면 됩니다.

저의 경우 Color Key값을 Integer로 설정해서 변환해서 넣어 주었습니다.

그리고 실행해보면 아이템까지 설정한 커스텀 위젯으로 나오고, 옵션에 따른 값이 잘 출력되는걸 확인할 수 있습니다.

옵션에 따른 위젯값은 커스텀 아이템 위젯의 Construct에서 로직을 작성해주시면 됩니다.

아이템 클릭 바인딩

하지만 아이템을 클릭해도 동작하지 않습니다.

커스텀 위젯이기 때문에 클릭 시 동작또한 작성해주어야 합니다.

아래 순서를 따라가야합니다.

1. 바인딩할 커스텀 이벤트 생성
2. 커스텀 Item 위젯의 이벤트 디스패처 바인딩
3. 옵션값 할당

어떤 버튼이 클릭되었는지를 알아야 하니 커스텀 Item 위젯을 Input으로 가지도록 커스텀 이벤트 하나 만들어 주겠습니다.

그리고 On Generate Item Widget 바인딩 함수로 가서 커스텀 이벤트에 바인딩해주겠습니다.
Item은 위젯을 변수로 만들지 않고 바인딩해주세요.

다시 커스텀 이벤트로 돌아와서 커스텀 Item 위젯의 이벤트 디스패처를 바인딩해주세요.

이 이벤트에서는 2가지를 처리해야합니다.

1. 실제 콤보 박스의 옵션값 변경
2. 커스텀 Content 위젯의 값 변경

콤보박스 값이 변한다고 커스텀 위젯이 변하는게 아니라 따로따로 할당해줘야 합니다.

콤보박스를 끌어서 Set Selected Option으로 실제 값 변경해주시고,
변수로 만들어 뒀던 커스텀 Content 위젯에서 값을 변경하는 이벤트 호출해주시면 됩니다.

실행해서 결과를 보겠습니다.
잘 동작하죠?

기본 스타일 변경

근데 아직 기본 스타일이 남아 있어 못생겼습니다.
간단하게 콤보박스 스타일의 Tint의 투명도값을 0으로 변경해서 안보이게 해주겠습니다.

우선 박스의 아래 3가지를 투명도 0으로 해주세요.

저는 화살표도 안보이게 하겠습니다.

그럼 커스텀 디자인만 보여서 깔끔하죠.

최종 저의 결과물은 아래와 같습니다.
종족과 색을 선택하게 만들었습니다.

---

마무리

이상으로 콤보박스를 커스텀 위젯으로 디자인하는 방법을 알아보았습니다.