【Unity】UIを均等に並べる方法!初心者でもできます!

Unity Unity

UIを均等に並べる方法!

UIを均等に並べたい場合がゲーム制作をする際に多々あります。今回は、UIを均等に並べる方法を2種類紹介します!知っておくと簡単に並べることができ作業効率Up間違いなしです!

 

Vertical Layout Groupを使おう

今回は、Panelを使ってUIを均等に並べていきます。

Hierarchy→UI→Panel

AddPanel

PanelにAdd ComponentでVertical Layout Groupを追加します。

Vertical Layout Groupの使い方

変化を見るために今回はButtonを追加しました。

Panel-Add-Button

デフォルトでは、このような設定になっています。

Child Alignment

Child Alignmentの対応関係

Upper Left:左上 Upper Center:中央上部 Upper Right:右上
Middle Left:中央左 Middle Center:中央 Middle Right:中央右
Lower Left:左下 Lower Center:中央下部 Lower Right:右下

Control Child Size

Widthにチェックを入れると横方向に広がります。

Control-Child-Size-Width

Heightにチェックを入れると縦方向に広がります。

Control-Child-Size-Height

Use Child Scale

Panelの子オブジェクトにある今回で言うButtonごとに大きさを変えられます。

Child Force Expand

チェックを外した方向のスペースがSpacingのサイズになります。

チェックを外す前

Heghtのチェックを外した後

このように変化します。

これらの機能を使ってUIを簡単に均等に並べることができます。

Grid Layout Groupの使い方

Add ComponentでGrid Layout Groupを追加してください。

 

デフォルトでは、このような設定になっています。

Cell Size

このX、Yを変更することで子オブジェクトすべての大きさを変更することができます。

Spacing

子オブジェクト同士のスペースを変更できます。

Start Corner

こちらは何もいじらなくても問題ないです。

Start Axis

Verticalは、縦方向にButtonが並びます。

Horizontalは、横方向にButtonが並びます。

Child Alignment

Child Alignmentの対応関係

Upper Left:左上 Upper Center:中央上部 Upper Right:右上
Middle Left:中央左 Middle Center:中央 Middle Right:中央右
Lower Left:左下 Lower Center:中央下部 Lower Right:右下

Constraint

基本はFlexibleのままで構いません。

Flexible Column Countは、列の数を自分で決めることができます。

Constraint Countに入れた数の列になります。これを使うとButtonをきれいに並べられます。

Fixed Row Countは、行の数を自分で決めることができます。

Constraint Countに入れた数の列になります。これを使うとButtonをきれいに並べられます。

まとめ

今回は、Vertical Layout GroupとGrid Layout Groupを使ってUIを均等に並べる方法を解説しました。個人的には、Grid Layout Groupのほうが使いやすいと思うのでおすすめです。

コメント

タイトルとURLをコピーしました