언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

Unreal Engine 4.26

Unreal Engine 4.27

Unreal Engine 5.0

Unreal Engine 5.1

Unreal Engine 5.2

Unreal Engine 5.3

> 프로그래밍 및 스크립팅 > 슬레이트 UI 프레임워크 > 슬레이트 위젯 예제

Light Theme

Dark Theme

슬레이트 위젯 예제

슬레이트 뷰어 위젯 갤러리에 선보이지 않은 위젯 복잡성 및 레이아웃 관련 부분입니다.

Choose your operating system:

Windows

macOS

Linux

공용 슬레이트 인수
- Visibility
- Alignment
Box 패널
Radio Button
메뉴와 툴바
아이템 뷰

공용 슬레이트 인수

다음은 생성되는 모든 위젯마다 공통으로 있는 인수입니다.

IsEnabled - 상호작용 가능한 위젯인지를 지정합니다. 끄면 회색으로 비활성화됩니다.
ToolTip - 이 위젯의 툴팁에 사용할 커스텀 SToolTip 위젯 종류를 지정합니다. 지정되지 않으면 툴팁이 나타나지 않습니다.
ToolTipText - 이 위젯의 툴팁에 대해 간단한 툴팁으로 표시할 텍스트 유형을 지정합니다. 지정되지 않거나, ToolTip 특성이 사용된 경우 나타나지 않습니다.
Cursor - 이 위젯 위에 마우스를 올렸을 때 표시할 커서를 지정합니다.
Visibility - 아래 Visibility 부분을 참고하세요.

다음은 전부는 아니지만 대부분의 위젯에 있는 인수입니다.

Text - 이 위젯에 텍스트가 적용 가능하다면 지정할 문구입니다.
Content - 이 위젯에 콘텐츠가 적용 가능하다면 지정할 위젯입니다.
ReadOnly - True 면 이 위젯은 수정할 수 없습니다.
Style - 위젯에 사용되는 이미지나 텍스트 스타일을 지정합니다. 적용 방식은 위젯마다 다릅니다.
[...]ColorAndOpacity - 위젯이나 지정된 시스템의 색과 불투명도입니다.
Padding - 위젯의 부모 안에서 그 위젯의 상하좌우 주변에 패딩으로 댈 Slate 유닛 단위 여백의 양입니다. 네 부분 모두 단일 값으로, 또는 가로와 세로 값으로, 또는 네 부분 모두 별개의 값으로 지정할 수 있습니다.
HAlign - 위젯 안 콘텐츠의 가로 정렬 방식입니다.
VAlign - 위젯 안 콘텐츠의 세로 정렬 방식입니다.

Visibility

위젯의 Visibility, 표시여부는 위젯을 표시할 것인지는 물론 그 상호작용 여부도 결정합니다.

Visible (Default) - 위젯이 보통의 경우 나타납니다.
Collapsed - 위젯이 보이지 않으며 레이아웃에서 자리를 차지하지 않습니다. 상호작용되지도 않습니다.
Hidden - 위젯이 보이지는 않으나 레이아웃에서 자리는 차지합니다. 상호작용되지는 않습니다.
HitTestInvisible - 사용자에게 그림으로만 보입니다. 상호작용되지는 않습니다.
SelfHitTestInvisible - HitTestInvisible 와 같지만 자손 위젯에 적용되지 않습니다.

Alignment

위젯의 Alignment, 정렬은 위젯의 부모 안에서 그 위젯의 위치를 결정합니다. (패딩을 제외한) 위젯 부모 크기가 위젯과 같다면, 정렬은 의미가 없습니다. 이 작업은 위젯에 "Fill" 을 지정하거나 박스 슬롯에 Fill Size 가 지정된 경우, 그 박스 슬롯에 기본으로 적용됩니다.

가능한 정렬 방식은 다음과 같습니다:

HAlign_Fill/VAlign_Fill
HAlign_Left
VAlign_Top
HAlign_Center/VAlign_Center
HAlign_Right
VAlign_Bottom

Box 패널

SHorizontalBox, SVerticalBox 는 레이아웃 배치에 있어 가장 흔한 위젯입니다. 이 박스 패널은 위젯으로 선언되나, 그 이후 슬롯이 삽입됩니다. 이 슬롯의 배치 순서는 SHorizontalBox 의 경우 좌에서 우, SVerticalBox 는 위에서 아래 입니다.

SScrollBox 는 SVerticalBox 와 비슷하게 작동하는데, 자손 슬롯의 세로 스크롤이 가능하다는 점이 다릅니다.

Slot 특성

Width or Height (폭 또는 높이) 세팅 (다음 옵션은 상호 배제적입니다):
- Auto Size (자동 크기, 기본) - 슬롯에 딱 필요한 만큼만 공간을 지정합니다. 슬롯 내 정렬은 여기서 중요치 않습니다.
- Fill Size (필 크기) - 필 계수를 지정하면 다른 슬롯의 필 계수에 따라 공간을 채웁니다. 여기서 같은 방향 내 슬롯 정렬은 중요치 않습니다.
Max Size (최대 크기) - 슬롯의 최대 크기를 Slate 유닛 단위로 지정합니다.
Padding (패딩) - 패널 네 슬롯의 패딩을 지정합니다.
Alignment (정렬) - 슬롯 내 자손 위젯의 정렬 방식을 결정합니다. 이 옵션은 같은 방향의 Fill Size 가 적용되어 있으면 의미가 없습니다.

아래는 하나의 스크롤박스 안에 Fill Size 적용 가로 상자와 Auto Size 적용 가로 상자 양쪽을 중첩시킨 예제입니다. 또한 이 슬롯에 정렬을 어찌 사용했는지도 보여주고 있습니다.

SNew(SScrollBox)
+SScrollBox::Slot() .Padding(10,5)
[
    SNew(SHorizontalBox)
    +SHorizontalBox::Slot() .HAlign(HAlign_Left)
    [
        ...
    ]
    +SHorizontalBox::Slot() .HAlign(HAlign_Center)
    [
        ...
    ]
    +SHorizontalBox::Slot() .HAlign(HAlign_Right)
    [
        ...
    ]
]
+SScrollBox::Slot() .Padding(10,5)
[
    SNew(SHorizontalBox)
    +SHorizontalBox::Slot() .FillWidth(2)
    [
        ...
    ]
    +SHorizontalBox::Slot() .FillWidth(1)
    [
        ...
    ]
    +SHorizontalBox::Slot() .FillWidth(3)
    [
        ...
    ]
]

Uniform Grid Panel

SUniformGridPanel 은 자손 위젯을 가로 세로 모두 고르게 분배하는 패널입니다. 자손 슬롯은 자손의 인덱스를 나타내는 정수 한 쌍으로 지정됩니다. 그런 균등 그리드 패널은 아래와 같습니다.

SNew(SUniformGridPanel)
.SlotPadding( FMargin( 5.0f ) )
+SUniformGridPanel::Slot(0,0)
.HAlign(HAlign_Right)
[
    ...
]
+SUniformGridPanel::Slot(0,1)
.HAlign(HAlign_Right)
[
    ...
]
+SUniformGridPanel::Slot(0,2)
.HAlign(HAlign_Center)
[
    ...
]
+SUniformGridPanel::Slot(1,0)
[
    ...
]
+SUniformGridPanel::Slot(1,1)
[
    ...
]

Wrap Box

SWrapBox 는 줄바꿈 상자, 즉 일정 폭까지 위젯이 가로로 배치되다가 다음 줄에 놓이는 식입니다. 아래는 그 예제입니다.

SNew(SWrapBox)
.PreferredWidth( 300.f )
+SWrapBox::Slot()
.Padding( 5 )
.VAlign(VAlign_Top)
[
    ...
]
+SWrapBox::Slot()
.Padding( 5 )
.VAlign(VAlign_Bottom)
[
    ...
]
+SWrapBox::Slot()
.Padding( FMargin(20, 5, 0, 5) )
.VAlign(VAlign_Center)
[
    ...
]
+SWrapBox::Slot()
.Padding( 0 )
.VAlign(VAlign_Fill)
[
    ...
]

Radio Button

라디오 버튼은 Slate 의 체크 박스인데, 체크 박스는 체크 여부 결정을 위해 델리게이트가 필요하기 때문입니다. 라디오 버튼 시리즈를 만드는 가장 쉬운 방법은 어떤 체크 박스가 체크되었는지 결정하는 enum 을 만드는 것입니다. 현재 선택 내용을 결정하는 enum 인스턴스를 저장합니다. 그런 다음 검사하는 델리게이트에 대해 함수를 전달하는데, 같이 전달된 올바른 enum 값과 현재 선택된 내용을 검사하는 함수입니다. 선택 변경시 현재 선택 내용을 업데이트해 줘야 합니다.

ERadioChoice CurrentChoice;

...

ECheckBoxState::Type IsRadioChecked( ERadioChoice ButtonId ) const
{
    return (CurrentChoice == ButtonId)
        ? ECheckBoxState::Checked
        : ECheckBoxState::Unchecked;
}

...

void OnRadioChanged( ERadioChoice RadioThatChanged, ECheckBoxState::Type NewRadioState )
{
    if (NewRadioState == ECheckBoxState::Checked)
    {
        CurrentChoice = RadioThatChanged;
    }
}

메뉴와 툴바

메뉴

메뉴나 툴바를 생성하려면, 멀티박스를 사용합니다. 명령은 Slate 의 UI_COMMAND 시스템을 사용해야 하는데, 동적으로 생성된 버튼/컨트롤에 대해서는 불가능하기는 합니다.

메뉴를 생성하려면 FMenuBarBuilder 를 생성하여 FUICommandList 를 전달해 줍니다. 마지막으로 메뉴 바 빌더에서 MakeWidget() 를 호출하여 위젯을 놓을 위치를 구합니다.

FMenuBarBuilder MenuBarBuilder( CommandList );
{
    MenuBarBuilder.AddPullDownMenu( TEXT("Menu 1"), TEXT("Opens Menu 1"), FNewMenuDelegate::CreateRaw( &FMenus::FillMenu1Entries ) );

    MenuBarBuilder.AddPullDownMenu( TEXT("Menu 2"), TEXT("Opens Menu 2"), FNewMenuDelegate::CreateRaw( &FMenus::FillMenu2Entries ) );
}

return MenuBarBuilder.MakeWidget();

생성되는 메뉴에다 메뉴 제목, 항목, 구분자, 서브메뉴, 편집가능 텍스트, 커스텀 위젯 등을 추가할 수 있습니다.

static void FillMenu1Entries( FMenuBuilder& MenuBuilder )
{
    MenuBuilder.AddEditableText( TEXT( "Editable Item" ), TEXT( "You can edit this item's text" ), NAME_None, TEXT( "Edit Me!" ) );

    MenuBuilder.AddMenuEntry( FMultiBoxTestCommandList::Get().EighthCommandInfo );

    MenuBuilder.AddMenuSeparator();

    MenuBuilder.AddSubMenu( TEXT("Sub Menu"), TEXT("Opens a submenu"), FNewMenuDelegate::CreateRaw( &FMenus::FillSubMenuEntries ) );

    MenuBuilder.AddWidget(SNew(SVolumeControl), TEXT("Volume"));
}

컨텍스트 메뉴

이 메뉴 중 하나를 컨텍스트 메뉴로 불러오기 위해서는, FMenuBuilder 에서 생성된 위젯을 구한 다음, 그것을 PushMenu 함수에 다음과 같이 전해줍니다.

FSlateApplication::Get().PushMenu(
    MenuBuilder.MakeWidget(),
    MouseCursorLocation,
    FPopupTransitionEffect( FPopupTransitionEffect::ContextMenu )
    );

툴바

툴바를 생성하려면, FToolBarBuilder 를 대신 사용합니다. 자손의 경우 툴바 버튼, 콤보 버튼, 일반 버튼, 풀다운 메뉴 등을 추가할 수 있습니다.

FToolBarBuilder GameToolBarBuilder( InCommandList );
{
    GameToolBarBuilder.AddToolBarButton( FLevelEditorCommands::Get().Simulate );

    GameToolBarBuilder.AddToolBarButton( 
        FLevelEditorCommands::Get().RepeatLastPlay, 
        LOCTEXT("RepeatLastPlay", "Play").ToString(),
        TAttribute< FString >::Create( TAttribute< FString >::FGetter::CreateRaw( &FLevelEditorActionCallbacks::GetRepeatLastPlayToolTip ) ),
        TAttribute< const FSlateBrush* >::Create( TAttribute< const FSlateBrush* >::FGetter::CreateRaw( &FLevelEditorActionCallbacks::GetRepeatLastPlayIconSlateBrush ) )
        );

    GameToolBarBuilder.AddComboButton(
        SpecialPIEOptionsMenuAction,
        FOnGetContent::CreateRaw( &FLevelEditorToolBar::GeneratePIEMenuContent, InCommandList ),
        FString(),
        LOCTEXT("PIEComboToolTip", "Play-In-Editor options").ToString() );
}

return GameToolBarBuilder.MakeWidget();

아이템 뷰

이 뷰는 일종의 데이터에 대한 공유 포인터 템플릿 인수를 받습니다. 이들은 해당 데이터 유형에 대한 TArray 나 TSharedPtr 로 채워지는데요. 그 내부 위젯은 전달된 OnGenerateRow 나 OnGenerateTile 로 동적으로 채워지며, 각 열마다 다양한 위젯이 생성됩니다.

리스트 뷰

리스트 뷰는 자손 위젯 목록을 저장하는 위젯입니다. SListView<...> 로 만들어집니다.

SNew( SListView< TSharedPtr<FTestData> > )
.ItemHeight(24)
.ListItemsSource( &Items )
.OnGenerateRow( this, &STableViewTesting::OnGenerateWidgetForList )
.OnContextMenuOpening( this, &STableViewTesting::GetListContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )
.HeaderRow
(
    SNew(SHeaderRow)
    + SHeaderRow::Column("Name")
    [
        SNew(SBorder)
        .Padding(5)
        .Content()
        [
            SNew(STextBlock)
            .Text(TEXT("Name"))
        ]
    ]
    + SHeaderRow::Column("Number") .DefaultLabel(TEXT("Number"))
    + SHeaderRow::Column("TextField") .DefaultLabel(TEXT("Text Field"))
    + SHeaderRow::Column("TextBlock") .DefaultLabel(TEXT("Text Block"))
    + SHeaderRow::Column("AddChild") .DefaultLabel(TEXT("Add Child"))
)

트리 뷰

STreeView<...> 로 만들어지는 트리 뷰는 리스트 뷰와 비슷하지만, 리스트 내 다른 위젯에 대한 부모 위젯이 지원된다는 점이 다릅니다. 어느 위젯의 부모가 어느 위젯인지 결정하기 위해 OnGetChildren 델리게이트를 사용하여 전달된 아이템의 자손을 도로 전합니다.

SNew( STreeView< TSharedPtr<FTestData> > )
.ItemHeight(24)
.TreeItemsSource( &Items )
.OnGenerateRow( this, &STableViewTesting::OnGenerateWidgetForTree )
.OnGetChildren( this, &STableViewTesting::OnGetChildrenForTree )
.OnContextMenuOpening( this, &STableViewTesting::GetTreeContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )
.HeaderRow
(
    SNew(SHeaderRow)
    + SHeaderRow::Column("Name") .DefaultLabel(TEXT("Name"))
    + SHeaderRow::Column("Number") .DefaultLabel(TEXT("Number"))
    + SHeaderRow::Column("TextField") .DefaultLabel(TEXT("Text Field"))
    + SHeaderRow::Column("TextBlock") .DefaultLabel(TEXT("Text Block"))
    + SHeaderRow::Column("AddChild") .DefaultLabel(TEXT("Add Child"))
)

타일 뷰

STileView<...> 로 만들어지는 타일 뷰는 리스트 뷰와 비슷하지만, 자손 위젯이 리스트가 아닌 그리드로 배치된다는 점이 다릅니다. 이때문에 열이나 열 제목을 지원하지 않습니다.

SNew( STileView< TSharedPtr<FTestData> > )
.ItemWidth(128)
.ItemHeight(64)
.ListItemsSource( &Items )
.OnGenerateTile( this, &STableViewTesting::OnGenerateWidgetForTileView )
.OnContextMenuOpening( this, &STableViewTesting::GetTileViewContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.

설문조사에 참여해 주세요

취소