凛(kagring)のUE4とUnityとQt勉強中ブログ

2016 年から UE4 を触り始めました。勉強したもののメモ用のブログです。C++ での Qt、Unity も少しあります。

PREV | PAGE-SELECT | NEXT

≫ EDIT

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"))
]
];

こんな感じに表示されます(整形しようと思ったらやり方わかりませんでした…)
スレートUIレイアウト000
「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"))
]
]
];

こんな感じに表示されます。
スレートUIレイアウト001
「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"))
]
]
];

こんな感じに表示されます。
スレートUIレイアウト002

「SVerticalBox」
「SHorizontalBox」
「AutoHeight()」
「AutoWidth()」

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

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

| UE4 | 17:33 | comments:0 | trackbacks:0 | TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://kagring.blog.fc2.com/tb.php/241-2d98e507

TRACKBACK

PREV | PAGE-SELECT | NEXT