More than 3 years have passed since last update.

uGUIのLayout

Last updated at 2020-04-21Posted at 2015-12-12

#概要
Unityのバージョンは5.2.3f1

uGUIのLayoutのについてのメモです。
以下のコンポーネントの使い方を解説します。

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/comp-UIAutoLayout.html

##親オブジェクトのImageにTextの文字サイズを合わせる方法

##文字サイズに合わせて高さと幅を変更
（Content Size Fitterを使用）

##Buttonサイズに合わせて文字の高さと幅を変更
（Aspect Ratio Fitterを使用）

Buttonを追加してTextにAdd Component>Layout>Aspect Ratio Fitterを追加
TextのBest Fitをチェックする
Aspect Ratio FitterのAspect ModeをWidth Controls Heightに設定
Aspect Ratioの値を調整してボタンとテキストの余白を調整
同様にToggleも拡大縮小した時にチェックイメージとテキストサイズが自動で調整されるものを作ることができるかも

##文字サイズの違うTextを縦に並べて表示
（Vertical Layout Group、Content Size Fitterを使用）

##ボタンを横に並べて表示
（Horizontal Layout Groupを使用）

##ボタンを横に並べて表示した時、サイズを個々に調整する
（Horizontal Layout Group、Layout Elementを使用）

##ボタンをグリット状に並べて表示
（Grid Layout Group、Content Size Fitterを使用）

空オブジェクトを作って、子オブジェクトにButtonを何個か追加
空オブジェクトにAdd Component>Layout>Grid Layout Groupを追加
空オブジェクトにAdd Component>Layout>Content Size Fitterを追加
Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定
空オブジェクトにAdd Component>UI>Imageを追加
Grid Layout GroupのPaddingで上下左右の余白を調整
Cell Sizeでボタンの高さと幅を調整
Spacingでボタン同士の余白を調整
Start Conrnerでどこから並べるか設定して、Start Axisでどちら方向に向かって並べるか設定
ConstraintをFixed Column CountかFixed Row Counを設定して、Constraint Countで列か行に表示する数を制限する

#その他のメモ

スマホのUIを作るのにAutoLayout機能はとても便利（使いこなすまでが難しい）
リストビューなどはLayout機能を使えばリストの追加などをスクリプトで制御しやすくなる
グリットレイアウトはダッシュボードにしたりカレンダーに使ったり色々できる
おもしろいメニューを作ってる記事を見つけた（AutoLayoutではできなそう）
http://iwashigame.hatenadiary.jp/entry/2015/09/14/013024

#今後の課題
スマホなどで解像度が変わった時にレイアウトが正しくなるかは試してない。
横に画面が回転した時にどう対処するか。