66.UniformGridPanel,GridPanel,WrapBoxのウィジェット解説

UniformGridPanel (縦横に複数ウィジェットを均等に配列)

UniformGridPanelは均等で縦横にウィジェットを配置するウィジェットです。

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

VertacalやHorizontalBoxは縦か横一列にしかウィジェットを配置できませんでしたが、Grid Panel系は縦横に複数列のウィジェットを配置する事ができます。

🐱ではUniformGridPanelを使って縦横列にButtonを配置してみましょう。

Uniform Grid Panelを作ってみよう|実践

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

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

まずはCanvasPanelの下にUniformGridPanelを追加します。適当な大きさにしておきます。

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

UniformGridPanelの下にButtonを設置してその下にTextを配置します。

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

ButtonをCtrl+Dで複製して計四つにします。　

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

それぞれのボタン下にあるTextウィジェットのテキスト内容を上から順に「Button1」「Button2」「Button3」「Button4」と入力します。

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

例えばButton一番上のテキストはこんな感じに↓Button1とテキスト入力します。

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

UniformGridPanelのスロットについて

GridPanel系のウィジェットについてですが、"スロット"と呼ばれる空き枠が設定されてその"スロット"にはめるようにウィジェットが配置される形になります。デフォルトでは左上にスロットが一個のみが用意されています。イメージとしてはこんな感じに↓

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

なのでまずGridPanel系のウィジェットはまず「スロット」を設定して、そこにウィジェットをセットする必要があります。

🐱つまりGridPanel系のウィジェットはスロットと呼ばれるウィジェットをセットする枠を設定する必要があります。実際にスロットを設定していきましょう。

まずButtonを選択した状態で以下Gifのように上下左右をクリックしてみましょう。まずButton2を右に、Button3を下に、Button4を右下に配置します。

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

これで自動的にスロットが追加されて、かつウィジェットがそれぞれのスロット(空き枠)に配置されました。

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

🐱こんな感じにウィジェットを移動させる事で、スロットの追加＆ウィジェットの移動をさせる事ができます。またスロットを追加する方法はもう一つあるので確認しましょう↓

スロットのもう一つの設定方法と割り当て番号の確認

Buttonを選択した状態で詳細のSlotのRow(縦)とColum(横)でスロットの割り当て番号を確認できます。例えば右下に配置したButton4のウィジェットの設定を見てみるとRowが1,Columが1になっています。

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

なので全体を見てみるとスロットの割り当て番号(RowとColum)は以下の様に割り当てられています。

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

例えばColumnの値を2にするとウィジェットの位置が1,2の位置にスロットが自動で作成されてウィジェットが移動します↓

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

Button4の位置を左に戻しておきましょう。

では次にボタンのサイズを大きくしてみましょう。全てのボタンを選択した状態でスロットのHorizontalとVerticalAlignmentを一番右の塗りつぶし(伸縮)設定を選択します。

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

拡大図です↓

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

これでボタンが縦横に配置できました。

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

🐱VertacalBoxやHorizontalBoxは縦か横一列にしかウィジェットを配置できませんでしたが、このようにGrid Panel系は縦横に複数列のウィジェットを配置する事ができます。

では次にUniformGridPanelを選択してチャイルドレイアウトの設定項目を見ていきましょう。

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

✓チャイルドレイアウト >SlotPadding > MinDesiredSlot

MinDesiredSlotはスロットの最小の大きさを設定できます。現在ボタンはスロットの大きさになっているので、まずSizeToContentでtrueにしてボタンの設定サイズにします。

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

次にButtonを選択してNormalのImageSizeでサイズを変更あります。以下の様に変更する事もできます。ただしテキストがあると反応しないので先に子ウィジェットは外す必要があります。

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

MinDesiredSlotのWidthとHeightで最小値を調整ができます。

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

MinDesiredSlotはボタンなどが小さくなりすぎるのを防ぐために使用します。

Grid Panel (縦横に複数ウィジェットを異なるサイズで配列)

GridPanelはウィジェットを縦横に好きなサイズで配置できるパネルです。なので先ほどのUniformGridPanelと違って異なるサイズのウィジェットを以下の様に配置できます。

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

GridPanelを使ってみよう|実践

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

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

Grid panelを追加します。

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

GridPanelのスロットについて

Grid Panelは詳細にあるフィルルールに基づいて縦横の列のスロットが決定します。ColumnFillで横のスロット、RowFillで縦のスロットになります。

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

ColumnFillのプラスボタンを二回押してそれぞれ入力値を1にします。

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

これで見えないですがスロット(ウィジェットの追加場所)が二個追加されました。

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

RawFillも同じように二回プラスボタンを押して1をそれぞれに入力します。

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

これで縦横に合計4個のスロットができました。

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

一度ボタンを追加してみましょう。GridPanelの子ウィジェットにButtonを４つ設置します。

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

パネルを選択した状態で上下左右のボタンを押して4個のスロットにあてはまめます。

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

😺GridPanelはスロットを手動で作成→ウィジェットを追加するという流れになります。UniformGridPanelの場合はButtonなどの子ウィジェットを移動させた時に自動でスロットは追加されます。

テキストをそれぞれのButtonの子ウィジェットに追加してテキストをButton1~4に設定します。

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

では、戻ってフィルルールのインデックスの部分を変更するとそれぞれのスロットのサイズ割合を変更できます。

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

さらにGridPanelではスロットをまたぐ事ができます。やってみましょう。

Button4をDeleteで削除して、Button3を選択した状態でColumnSpan(コラムの長さ)を2にします。

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

これで均等ではなく、異なった形のウィジェットを設置できました↓わかりやすくButtonのBackgroundColorを変更しました。

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

😺好きなサイズのウィジェットをセットで扱いたい時にはこのGridPanelを使用しましょう。

WrapBox (ウィジェットを枠内で並べる)

WrapBoxは列をレイアウトに合わせて自動で改行を行ってくれます。やり方は簡単でWrapBoxの元に子ウィジェットを並べるだけです。

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

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

このWrapBoxによって子ウィジェットの数に応じて改行してくれます。なのでアイテム管理画面でアイテムをどんどん追加していく時などに使用すると便利です。

詳細のコンテンツレイアウトのInnerSlotPaddingで、ウィジェットの隙間を調整でき、Orienttationでウィジェットがレイアウトの横幅か縦幅に合わせるか調整する事ができます。Explicit Wrap sizeでウィジェットを固定できます↓

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

まとめ

配列のウィジェットをまとめると、縦一列ならVertical,横一列ならHorizontal,縦横に同じサイズのウィジェット並べるならUniformGridPanel,縦横に異なったウィジェットを配置するならGridPanelといった感じになります。