UE4 エディタ拡張・簡単なウィジェットの配置方法（SVerticalBox、SHorizontalBox、AutoHeight、.AutoWidth）

深くは考えないでできる簡単なウィジェットの配置についてです。

最近UE4の記事でお世話になってるロジカルビートさんを参考に。

【UE4】エディタ拡張（レイアウト編）
http://logicalbeat.jp/blog/840/
詳しくはこの記事を見るとよいです！

というわけで簡単に縦にウィジェットを並べる方法です。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
];

こんな感じに表示されます（整形しようと思ったらやり方わかりませんでした…）

「SVerticalBox」を使うと自動で縦に均等に並べてくれます。
そのままだとウィンドウサイズに応じて縦にも大きくなってしまうので
「.AutoHeight()」指定をすることで、一番適切な（小さくて整理する）サイズにしてくれます。
横も自動で適切なサイズにしたい場合は「.AutoWidth()」を指定します。

横にウィジェットを並べる場合はこんな感じに。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SHorizontalBox)
+ SHorizontalBox::Slot()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
+ SHorizontalBox::Slot()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SHorizontalBox::Slot()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
]
];

こんな感じに表示されます。

「SHorizontalBox」を使うことでウィジェットが横に均等に配置されます。
大体はこれでいいのですが、ウィジェットごとに配置を綺麗にしたい場合はサイズを指定するか
「.AutoWidth()」を指定するとうまくいくと思います。

「.AutoWidth()」を指定した結果がこちら。

SNew(SDockTab)
.TabRole(ETabRole::NomadTab)
[
SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
SNew(SHorizontalBox)
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(STextBlock)
.Text(LOCTEXT("STextBlock", "STextBlock"))
]
+ SHorizontalBox::Slot()
.AutoWidth()
[
SNew(SButton)
.Text(LOCTEXT("SButton", "SButton"))
]
]
];

こんな感じに表示されます。


「SVerticalBox」
「SHorizontalBox」
「AutoHeight()」
「AutoWidth()」
最低限これだけ覚えておけば、結構いい感じにレイアウトできるんじゃないかなと思います。

スレートは文法が分かりにくいところがかなりありますが、
理解できればかなり自由なレイアウトができるようなつくりになってるみたいですね。