スレート ウィジェットのサンプル

Slate Viewer Widget Gallery で実演されないレイアウトとウィジェットの複雑性

Windows
MacOS
Linux

共通のスレート引数

次の引数は、作成された単一ウィジェットで共通です。

  • IsEnabled - ウィジェットがインタラクト可能かどうかを指定します。無効にされている場合、グレーアウト表示されます。

  • ToolTip - このウィジェットのツールヒントに使用するカスタム SToolTip ウィジェットのタイプを指定します。指定しない場合、ToolTip は表示されません。

  • ToolTipText - このウィジェットのツールチップとして、簡易なツールヒントに表示するテキストのタイプを指定します。指定しない場合、または ToolTip 属性が使用されている場合、ToolTipText は表示されません。

  • Cursor - マウスがこのウィジェット上に置かれた時に表示するカーソルを指定します。

  • Visibility - 以下の「Visibility」セクションを参照してください。

以下の引数は、すべてではありませんが、ほとんどのウィジェットに設定されています。

  • Text - 該当する場合、ウィジェットが使用するテキストを指定します。

  • Content - 該当する場合、ウィジェットのコンテンツ セクションに配置できるウィジェットを指定します。

  • ReadOnly - _true_ の場合、このウィジェットを編集不可にします。

  • Style - 画像のスタイルまたはウィジェットが使用するテキストのフォントを指定します。適用方法はウィジェットによって異なります。

  • [...]ColorAndOpacity - ウィジェットのカラーやオパシティ、またはウィジェットの指定システムです。

  • Padding - ウィジェットのパディングです。親のウィジェットの上部、左、右、そして下部周りに設定するパディングの間隔をスレート単位で表します。1 つの値を 4 ヶ所に指定する、もしくは水平や垂直値、またはそれぞれ異なる 4 つの値を指定できます。

  • HAlign - ウィジェット内のコンテンツの水平方向の整列です。

  • VAlign - ウィジェット内のコンテンツの垂直方向の整列です。

Visibility (可視性)

ウィジェットの可視性は、ウィジェットの表示方法とインタラクティビティを決定します。

  • Visible (Default) - ウィジェットは通常表示されます。

  • Collapsed - レイアウトでウィジェットは非表示となり、スペースを取りません。インタラクティブにはなりません。

  • Hidden - ウィジェットは非表示となりますが、レイアウトでスペースを取ります。インタラクティブにはなりません。

  • HitTestInvisible - ユーザーに対してアートとしてのみ表示されます。インタラクティブにはなりません。

  • SelfHitTestInvisible - HitTestInvisible と同じですが、子ウィジェットには利用できません。

アライメント

ウィジェットのアライメントは、親ウィジェット内でのウィジェットの位置を決定します。親ウィジェットがウィジェットと同一サイズの場合 (パディングを除く)、アライメントは意味をなしません。この現象は、ウィジェットに「Fill」、またはボックススロットに「Full Size」を指定した時、ボックススロットにデフォルトで発生します。

以下は、利用可能なアライメントのリストです。

  • HAlign_Fill/VAlign_Fill

  • HAlign_Left

  • VAlign_Top

  • HAlign_Center/VAlign_Center

  • HAlign_Right

  • VAlign_Bottom

ボックスパネル

SHorizontalBoxSVerticalBox は、レイアウトのアレンジに最も使用頻度の高いウィジェットです。これらのボックスはウィジェットとして宣言しますが、ボックスにはスロットが挿入されています。SHorizontalBoxes は、左側の最初のウィジェットと右側の最後のウィジェットにスロットを配置するのに対し、SVerticalBoxes はスロットを上から下へ配置します。

SScrollBox の機能は、子スロットの垂直スクロールが出来る点を除いて SVerticalBox と同じです。

スロットの属性

  • Width (横) またはHeight (高さ) の設定 (以下のオプションは相互排他的です) :

    • Auto Size (デフォルト) - 必要以上でも以下でもなく、必要なだけの間隔をスロットに埋めるように指定します。スロット内のアライメントは、ここでは重要ではありません。

    • Fill Size - fill 係数を指定すると、別のスロットの fill 係数に基づいてスロットが埋められます。同一方向のスロットのアライメントは、ここでは重要ではありません。

  • Max Size - スロットに設定できる最大サイズをスレート単位で指定します。

  • Padding - パネル内のスロットのパディングを指定します。

  • Alignment - スロット内の子ウィジェットの整列方法を決定します。Fill Size の配置が同じ方向に指定された場合、このオプションは意味をなしません。

以下は、スクロールボックス内にネストさせた自動的にサイズ変更する平行ボックスと、fill のサイズに設定された平行ボックスの例です。さらに、これらのスロットとアライメントの使用方法も表示しています。

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)
    [
        ...
    ]
]

均等なグリッドパネル

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)
[
    ...
]

ラップボックス

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)
[
    ...
]

ラジオボタン

チェックボックス はボックスのチェック方法の決定にデリゲートが必要なため、スレートのチェックボックスはラジオボタンを使用しています。一連のラジオボタンの作成は、列挙型変数を作成してチェックを入れるボックスを決定するのが最も簡単な方法です。現在の選択を判断する列挙型変数のインスタンスを保存します。その後、デリゲートをチェックするために、渡された正確な列挙型変数のペイロードと現選択を比較する関数を渡します。選択を変更する際に、現在の選択が更新されなくてはいけません。

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;
    }
}

メニューとツールバー

メニュー

メニューまたはツールバーの作成にマルチボックスを使用します。動的に生成されたボタン / 制御で使用することはできなくても、コマンドはスレートの UI_COMMAND システムを使用しなくてはいけません。

メニューの作成は、FUICommandList を渡して FMenuBarBuilder を作成します。これで、配置するウィジェットを取得するためにメニューバー ビルダーで 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"),
        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 ),
        FText(),
        LOCTEXT("PIEComboToolTip", "Play-In-Editor options") );
}

return GameToolBarBuilder.MakeWidget();

アイテム表示

これらの表示は、シェアードポインタのテンプレート引数を何らかのデータへ取り込みます。TArray または TSharedPtr でデータタイプへ追加されます。内部ウィジェットは OnGenerateRow または OnGenerateTile デリゲートが渡されて動的に追加され、その他のウィジェットはカラムごとに生成されます。

リスト表示

リスト表示は、子ウィジェットのリストを格納するウィジェットです。They are made as 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 )
Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback