[UI] Common UI Widget

https://benui.ca/unreal/common-ui-intro/

Common UI Introduction

https://benui.ca/unreal/common-ui-button/

Common UI Button Widgets

https://x157.github.io/UE5/CommonUI/

Common UI Plugin

https://dev.epicgames.com/documentation/ko-kr/unreal-engine/using-the-common-bound-action-bar-in-unreal-engine

---

• Common UI에서 제공하는 class들에 대한 간단한 용도 설명
• 실질적인 코드는 Engine/Plugin/Runtime/CommonUI/Source/CommonUI/Public/ 경로에서 확인 가능

CommonUserWidget

• CommonUI에서 사용하는 BaseWidget

CommonActionWidget

• Platform에 따라 다르게 표현되는 Icon을 표시하고 이에 대한 Input Action을 처리하는 Widget

CommonActivatableWidgetSwitcher

• Lifetime 중에 Activate/Inactivate 될 수 있는 Widget
  • 하지만 이 외에 수정되거나 파괴되지는 않는다.
• 보통은 다음 기능을 제공한다.
  • 화면 상으로 빈번하게 사용되기 때문에 Construct/Destruct만으로 대응이 힘든 상황
    • Hierarchy에 미리 생성해두고 Active/Inactive를 조절하여 사용
    • ex) 모바일에서 조건부로 나타나는 입력 키
  • 현재 Widget에서 뒤로가기를 해야 하는 경우
    • 뒤로 가는 경로를 따라가는 경우
    • 모달을 닫는 경우
  • 이 Widget은 Hierarchy에서 Input을 Routing하는 ActivatableWidget Tree에서 하나의 Node로 작용한다.
• 해당 Class는 다음 기본 설정이 되어 있다.
  • 생성 시 자동으로 Activate되지 않는다.
  • 뒤로가기, 앞으로가기 동작을 수신하도록 등록되어 있지 않다.
  • 뒤로가기 Handler로 구분되어 있을 시, 뒤로가기 Action을 수신하면 자동으로 Deactivate된다.
• ActivatableWidget을 UI로부터 제거하는 것은 UWidget이 제거되지 않았더라도 항상 Widget을 Deactivate한다.
  • 이 때 AutoActivate가 가능하다면,
    기본 SWidget을 다시 생성하는 것만이 유일하게 다시 Widget을 Activate하는 방법이다.

CommonAnimatedSiwtcher

• CommonActivatableWidget 전용 Widget Switcher
• 관련 Animation을 Trigger 하는 기능을 제공한다.

CommonActivatableWidgetSwitcher

• CommonActivableWidgets의 기능을 보존하는 Animation Switcher
• 다른 Widget도 포함될 수 있다.

CommonBorder

• CommonUI Project에서 Default로 설정된 Border Style Template

CommonButtonBase

• CommonUI에서 제공하는 Customized Button
• Widget 전체를 Disable하지 않고 Click을 Disable 할 수 있다.

CommonCustomNavigation

• CommonUI에서 제공하는 Customized Border
• Custom Behavior로 Default Border Navigation을 대체할 수 있는 Event를 노출시킨다.

CommonTextBlock

• CommonUI에서 제공하는 Customized TextBlock
• 다음 기능들을 기본적으로 제공한다.
  • FX를 이용해 자동 스크롤링
  • Large Text
  • 더 많은 Styling Option 제공
  • Mobile 플랫폼에서의 Custom Scaling

CommonDateTimeTextBlock

• DateTime이나 TimeSpan을 직접 입력받아 날짜/시간 정보를 Text로 표시해주는 CommonTextBlock

CommonNumericTextBlock

• Numeric 값을 입력 받아 Text로 표시해주는 CommonTextBlock
• 다음 기능들을 제공한다.
  • 근사(반올림/올림/내림)
  • 숫자 표시
  • 퍼센티지 표시
  • 초 단위 표시
  • 거리 표시

CommonRichTextBlock

• CommonUI에서 제공하는 Customized RichTextBlock
• 다음 기능들을 제공한다.
  • Mobile 플랫폼에서의 Custom Scaling
  • 공간이 부족할 때 Icon만 표시하는 옵션

CommonUIRichTextData

• RichTextData를 구현하는 Class
• Project Settings -> Common UI Setting에서 등록할 수 있다.

CommonHardwareVisibilityBorder

• Platform이나 Input에 따라 Visbility를 조절하는 기능을 제공하는 CommonBorder

CommonHierarchicalScrollBox

• CommonUI에서 제공하는 Customized ScrollBox
• 임의의 Scroll이 가능한 Widget Collection
• 10~100개 정도를 표시하는데 적절하다.
• Virtualization을 제공하지 않는다.
  • Virtualization: List 등에서 화면에 표시되는 영역의 Widget만 Memory에서 들고 있는 기능

CommonLazyImage

• CommonUI에서 제공하는 Customized Image
• Image Resource가 Load되지 않을 때 미리 지정 된 Unloaded Image를 표시해주는 Widget
• SLoadGuard의 또 다른 Wrapper이지만, Image Loading과 Loading 중 Throbber만 관리한다.
• 만약 이 Class가 Text를 표시하도록 바뀌면, 기본적으로 CoreStyle을 유지하게 된다.

CommonLazyWidget

• Widget이 Load되지 않을 때 미리 지정된 Unloaded Widget을 표시해주는 Widget

CommonListView

• CommonUI에서 제공하는 Customized ListView

CommonNativeListItem

• 모든 UMG ListView Class에서 BaseItem으로 사용될 수 있는 Native non-UObject Item

CommonLoadGuard

• CommonUI에서 제공하는 Customized ContentWidget
  • Border와 비슷하게 동작한다.
  • 필요한 Contents가 Load되거나 모종의 준비가 끝날 때까지 기본 Contents를 숨기고
    Loading Spinner와 Message를 출력할 수 있다
• GuardAndLoadAsset 함수를 사용하면 자신이 Load 될 때까지 Loading 상태를 자동으로 표시할 수 있다.
• 수동으로 Guard의 Loading State를 설정할 수 있다.
  • 예를 들어 Async Backend call이 종료될 때까지 대기 한다던가.

 

CommonPoolableWidgetInterface

• WidgetFactory가 Widget Object 재사용을 구현할 경우에 Widget Pool 기능을 제공하는 Interface

CommonRotator

• 주어진 Text Label을 순회하는 기능을 제공하는 CommonButtonBase
  • Slide Banner처럼 Text를 Shift 할 수 있음

CommonTabListWidgetBase

• Selectable Tab 기능을 제공하는 Base Class
• 다음 기능들을 제공한다. 
  • 연관된 Tab을 Activate
  • 연결된 Switchdr에서 연관된 Tab을 표시해준다.

CommonTileView

• CommonUI에서 제공하는 Customized TileView
• 다음 기능들을 제공한다.
  • Consol에서 Focus Navigation에 특화 됨.
  • Touch로 Focus되지 않을 경우에 Scroll을 제공

CommonTreeView

• CommonUI에서 제공하는 TreeView
• 다음 기능들을 제공한다.
  • Consol에서 Focus Navigation에 특화 됨.
  • Touch로 Focus되지 않을 경우에 Scroll을 제공

CommonVideoPlayer

• CommonUI에서 제공하는 Media 재생 용 Widget

CommonVisibilitySwitcher

• CommonUI에서 제공하는 Customized Overlay
  • Child Widget들의 Visibility를 Toggle하여 한번에 1개의 Widget만 표시하는 Siwtcher의 Base Class
  • 표시되는 Widget이 ActivatableWidget인 경우, 해당 Widget을 Activate한다.

CommonVisibilitySwitcherSlot

• CommonUI에서 제공하는 Customized OverlaySlot

CommonvisualAttachment

• CommonUI에서 제공하는 Customized SizeBox
• Widget을 다른 Widget에 Zero-Size로 부착할수 있도록 한다.
  • 예를 들어 Icon을 Label에 추가하되, Label의 사이즈가 변하지 않도록 한다던가

CommonWidgetCarousel

• CommonUI에서 제공하는 Customized PanelWidget
• 최대 하나의 Widget만 표시되는 Widget
  • Carousel로 미루어 보아 SlideBanner의 Widget 버전으로 추정

CommonWidgetCarouselNavBar

• CommonWidgetCarousel의 Navigation control을 담당하는 Widget

CommonButtonTableRow

• CommonButtonBase를 인식할 수 있는 CommonUI 버전의 Object Table Row
• Mouse Event를 직접적으로 처리하는 대신, 그 자체가 Button이 되어 Event에 반응한다.

CommonHierarchicalScrollBox

• CommonUI에서 제공하는 Customized ScrollBox
• 임의의 숫자의 Widget을 Scroll 할 수 있다.

CommonTileView

• CommonUI에서 제공하는 Customzied TileView