65.Vertical,HorizontalBox,Overlayのウィジェット解説

こういったケースにVertial,Horizontalウィジェットを使っていこう!

HorizontalやVerticalは以下の画像UIのように、複数のボタンを"横並び"や"縦並び"に配置する時にウィジェットをまとめる親ウィジェットとして使用します↓

https://scrapbox.io/files/65ca3c5f0a461300235e0cd0.jpg

🐱なおHorizontalやVerticalといった、ウィジェットをまとめる系のウィジェットは使用しなくてもUIは作る事はできますが、管理が楽にになって便利なのでできるだけ使用して作成していく事をおすすめします。ではまず縦並びの枠組みとなるVerticalウィジェットから紹介していきます。

Vertical Box(縦並びの枠組み)

「Vertical Box」はウィジェットを縦に一列に並べる事ができます。こんな感じになります↓

https://scrapbox.io/files/65ca3c9ea3a23d0025a36818.jpg

実際にButtonを並べてみましょう。

ではこの状態のウィジェットブループリントから始めていきます↓UIという名前のウィジェットブループリントにCanvasパネルを追加しただけです。

https://scrapbox.io/files/65ca3cba70c16f0026bb978e.jpg

VerticalBoxを追加します。大きさは適当で構いません。

https://scrapbox.io/files/65ca3cc07065880025f5b003.jpg

Vertical Boxの子ウィジェットになるようにButtonを追加します。一度追加した後はCtrl+Dで複製で計三つになるように配置します。

https://scrapbox.io/files/65ca3cd3e95c8a0025ae2d7e.jpg

少し違いがわかり辛いのでそれぞれのButtonにテキストを追加しておきます。Buttonの下にTextウィジェットを配置します。

https://scrapbox.io/files/65ca3cea58eba40024667ee7.jpg

テキストの内容は詳細のコンテンツからそれぞれを「Button1~3」にしておきます。

https://scrapbox.io/files/65ca3cfb92b0580024259e72.jpg

これでボタンが縦に三つ並びました。Buttonがまとめられているので、一緒に移動させる事ができます。

https://scrapbox.io/files/65ca3d415b11d3002665ec2b.gif

VerticalBoxはこのように複数のウィジェットを縦に並べる役割とまとめる役割を持ちます。

😺では、VerticalBox内のウィジェットの配置と設定について解説していきます↓

①VerticalBox内のウィジェットの配置を入れ替えてみよう

ボタンウィジェットを選択すると「上」と「下」というアイコンが出てくるので押すと順序を変更できます↓

https://scrapbox.io/files/65ca3d5d0a461300235e11ea.gif

🐱では、VerticalBoxのウィジェットの調整は子ウィジェットの方でするので、Buttonを選択した状態で以下の設定項目を開いて確認していきましょう。

②スロット > Padding

Paddingではボタンウィジェットの周りの隙間をどれくらい空けるのか調整できます。

https://scrapbox.io/files/65ca3d6c28fa970024da9038.jpg

たとえばButton1のPaddingを上画像のように全て20にすると以下の画像のようになります。

https://scrapbox.io/files/65ca3d797d554f00252d51e1.jpg

ボタンの周りに隙間を開けたい時にはここから変更していきましょう。

③スロット > Padding > Size > 自動

SizeではVerticalBoxの空間をどれほど埋めるのかの項目になります。自動だとウィジェットの設定サイズに基いて大きさが決定されます。

https://scrapbox.io/files/65ca3d9c3a04240026c3a647.jpg

ここで言う"設定サイズ"とはアピアレンスのStylie > Normal > ImageSizeから変更できる設定です。例えばNormalのImageSizeのYを変更するとボタンのサイズが変更されます。ただしサイズ変更時に子ウィジェット(テキスト)があると変更が効かないので一度テキストを外すか削除する必要があります。

https://scrapbox.io/files/65ca3daa7d554f00252d5404.gif

つまりSizeを自動にすると、ウィジェットを任意のサイズに調整できるといった感じになります。

④スロット > Padding > Size > フィル

一方、Sizeをフィル(埋める)に設定するとVerticalBox内を埋めるようにウィジェットのサイズが変更されます。

https://scrapbox.io/files/65ca3dbeaf1a09002401564a.jpg

例えば三つのボタンのSizeをフィルに設定するとVerticalBox内で均等に広がります。

https://scrapbox.io/files/65c9e4d067a0890024e34cbe.jpg

さらにフィルにした場合、VerticalBox内でウィジェットが埋める割合を変更する事ができます。フィルの隣に0~1の割合で調整できる項目があります。

https://scrapbox.io/files/65ca3dd51072980024bc01ad.jpg

例えば一番上のButtonの割合を0.5にするとButtonの占める割合としては上から0.5,1,1になります。つまりVerticalBoxの割合的には1:2:2なので100が全体のサイズだとするとボタンのサイズはそれぞれ20:40:40となるという事になります。

🐱このようにフィルにすると、VerticalBoxを埋めるようにウィジェットのサイズを変更でき、さらにVerticalBox内でのウィジェットが占める割合を変更する事ができます。

⑤スロット > Padding > Horizontal＆Vertical Alignment

Horizontal AlignmentでVerticalBoxのスロットのどこに配置するか決める事ができます。例えば真ん中だと以下のようになります。

https://scrapbox.io/files/65ca3dec817bdf0024f6c1ae.jpg

Vertical Alignmentだとこんな感じです↓

https://scrapbox.io/files/65ca3df8b85b4d002416e541.jpg

Horizontal Box(横並びの枠組み)

HorizontalBoxは横一列にウィジェットを配置します。使い方ははVerticalBoxと変わらないので詳しい解説は省きます。以下の様にHorizontalBoxウィジェットを親として、子にウィジェットを配置していくだけです。

https://scrapbox.io/files/65ca3e615b11d3002665f2cc.jpg

Horizontal Boxはボタンなどのウィジェットを横に並べたい時に使用します。

なおVerticalBoxやHorizontalBoxの中にある複数のウィジェットは、複数選択した状態で設定を一括変更する事も可能です。

https://scrapbox.io/files/65ca3e7e58eba400246689d7.gif

Overlay (複数の子ウィジェットをまとめる枠組み)

子ウィジェットは一個までしか配置できない場合がある

通常,子ウィジェットはウィジェットに対して一個しか配置できません。例えばButtonウィジェットに対してTextウィジェットは一個しか配置できません。さらに下で紹介するProgressBarなどのウィジェットは子ウィジェットを一個も配置する事はできません。なので子ウィジェットを複数追加したい場合は上で紹介したVerticalBox,HorizontalBox,CanvasPanel,Overlayなどなんらかの枠組みとなるウィジェットを親ウィジェットとして配置する必要があります。

では実際にOverlayウィジェットを使ってみましょう↓

例えば以下のようなHPバーとHPの数値を組み合わせたUIを作りたいとします。

https://scrapbox.io/files/65ca3e9792b058002425a784.jpg

HPバーとなるProgressBarウィジェットを追加します。(ProgressBarウィジェットは後に解説)

https://scrapbox.io/files/65ca3eadd209700025421206.jpg

さらにこの上にHPの数字のテキストを表示するためにTextをProgressBar下に配置しようとしますが、配置する事はできません。

https://scrapbox.io/files/65ca3ebb5fd0e80025a292a3.jpg

🐱このように子ウィジェットを配置できないウィジェットなどがあって困った時にOverlayウィジェットを使用します。

まずOverlayを以下のように配置します。

https://scrapbox.io/files/65ca3ed8f6891500252bbada.jpg

ProgressBarを選択した状態で下画像の様にスロット > HorizontalとVerticalAlignmentを伸縮する一番右の設定にします。

https://scrapbox.io/files/65ca3ee51a90540024e1b490.jpg

テキストをOverlayに追加して、Textのスロット > HorizontalとVerticalAlignmentを中央にしてあげると以下のように作成する事ができます。

https://scrapbox.io/files/65ca3ef3c950470024bccb57.jpg

つまりOverlayは複数のウィジェットを重ねて一つのUIを作成したい時に使用するウィジェットです。ウィジェットを配置したいのに配置できない場合はOverlayを使用しましょう。

ウィジェットをまとめたい場合は今回紹介したウィジェットを活用してUIを作成していきましょう。