Access Tokens - 6) 드롭다운 메뉴

- 개요

대시보드 UI에 드롭다운 메뉴를 추가하여 필요한 기능을 사용할 수 있도록 구성한다

 

- 스크립트 작업

1) Dropdown 클래스

 

위와 같이 멤버변수를 구성한다

• WidgetSwitcher 멤버변수 : 드롭다운 메뉴를 구성하는 하위 UI들을 활성화하는 역할
• ExpandedWidget 멤버변수 + CollapsedWidget 멤버변수 : 드롭다운 메뉴의 상태에 따라 활성화될 UI
• Button_Expander 멤버변수 + TextBlock_ButtonText 멤버변수 : 드롭다운 메뉴의 버튼
• HoveredTextColor 멤버변수 + UnhoveredTextColor 멤버변수 : 버튼의 텍스트의 색상
• Triangle_Up 멤버변수 + Triangle_Down 멤버변수 : 버튼의 이미지
• Image_Triangle 멤버변수 : 버튼의 이미지 UI

 

 

위와 같이 함수를 구성하여 드롭다운 메뉴의 동작을 설계한다

bIsExpanded 멤버변수를 사용하여 드롭다운 메뉴의 확장 여부를 판단한다

 

 

Expand 함수는 드롭다운 메뉴를 확장시키면서 호출하는 함수이다

적합한 UI를 활성화하고 확장 여부를 True로 설정한 후에 버튼 이미지를 변경한다

Collapse 함수는 드롭다운 메뉴를 축소시키면서 호출하는 함수이다

적합한 UI를 활성화하고 확장 여부를 False로 설정하고 버튼 이미지를 변경한다

 

 

Hover 함수와 UnHover 함수의 로직은 위와 같다

버튼의 호버링 여부에 따라서 버튼의 텍스트 UI의 색을 지정한 색상으로 변경한다

 

 

ToggleDropdown 함수를 추가하여 드롭다운 메뉴의 확장 여부에 따라서 Collapse 함수 또는 Expand 함수를 호출한다

 

 

SetStyleTransparent 함수를 추가하여 드롭다운 메뉴의 버튼 UI를 투명한 클릭 영역으로 설정한다

 

 

이벤트 바인딩이나 필요한 데이터를 연동하는 NativeConstruct 함수를 추가하여

드롭다운 메뉴의 버튼 UI의 클릭 / 호버링 / 호버링 해제에 필요한 함수들을 바인딩한다

 

 

UI 컴포넌트를 세팅하는 NativePreConstruct 함수를 추가하여

필요한 함수들을 호출하여 버튼 UI의 투명화 + 드롭다운 메뉴의 축소 + 버튼의 호버링을 해제한다

 

- 블루프린트 작업

1) 드롭다운 확장 + 축소 위젯 블루프린트

드롭다운 확장시에 활성화될 위젯 블루프린트

 

드롭다운 축소시에 활성화될 위젯 블루프린트

 

위와 같이 드롭다운의 확장 + 축소시에 활성화할 위젯 블루프린트를 생성한다

 

2) WBP_Dropdown 위젯 블루프린트

 

위와 같이 계층을 구성하여 드롭다운 메뉴의 위젯 블루프린트를 생성한다

 

 

필요한 색상 + 이미지의 멤버변수를 위와 같이 구성하였다

 

3) WBP_DashboardOverlay 위젯 블루프린트

 

비어있는 대시보드 UI의 공간에 드롭다운 메뉴 위젯 블루프린트를 추가한다

 

- 최종 실행 결과