概要
Unityのバージョンは5.2.3f1
uGUIのLayoutのについてのメモです。
以下のコンポーネントの使い方を解説します。
- Canvas Group
- Layout Element
- Content Size Fitter
- Aspect Ratio Fitter
- Horizontal Layout Group
- Vertical Layout Group
- Grid Layout Group
内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/comp-UIAutoLayout.html
親オブジェクトのImageにTextの文字サイズを合わせる方法
- ImageとTextを追加してTextをImageのこオブジェクトにする
- TextのAnchor Presetsの一番右下をAltとShiftを押しながら選択
- TextのBest Fitにチェックを入れてMax Sizeを調整する
文字サイズに合わせて高さと幅を変更
（Content Size Fitterを使用）
1. TextにAdd Component>Layout>Content Size Fitterを追加
2. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定
Buttonサイズに合わせて文字の高さと幅を変更
（Aspect Ratio Fitterを使用）
1. Buttonを追加してTextにAdd Component>Layout>Aspect Ratio Fitterを追加
2. TextのBest Fitをチェックする
3. Aspect Ratio FitterのAspect ModeをWidth Controls Heightに設定
4. Aspect Ratioの値を調整してボタンとテキストの余白を調整
同様にToggleも拡大縮小した時にチェックイメージとテキストサイズが自動で調整されるものを作ることができるかも
文字サイズの違うTextを縦に並べて表示
（Vertical Layout Group、Content Size Fitterを使用）
1. 空オブジェクトを作って、子オブジェクトにTextを何個か追加
2. 空オブジェクトにAdd Component>Layout>Vertical Layout Groupを追加
3. 空オブジェクトにAdd Component>Layout>Content Size Fitterを追加
4. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定
ボタンを横に並べて表示
（Horizontal Layout Groupを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Horizontal Layout Groupを追加
3. Horizontal Layout GroupのSpacingでButton同士の間に余白をつける
ボタンを横に並べて表示した時、サイズを個々に調整する
（Horizontal Layout Group、Layout Elementを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Horizontal Layout Groupを追加
3. Horizontal Layout GroupのSpacingでButton同士の間に余白をつける
4. Horizontal Layout GroupのChild Force ExpandのWidthとHeightのチェックを外す
5. 子オブジェクトのButtonにAdd Component>Layout>Layout Elementを追加
6. Layout ElementのPreferred WidthとPreferred Heightにチェックを入れてサイズを調整
7. 余白を埋めたい場合はFlexible WidthとFlexible Heightも設定
ボタンをグリット状に並べて表示
（Grid Layout Group、Content Size Fitterを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Grid Layout Groupを追加
3. 空オブジェクトにAdd Component>Layout>Content Size Fitterを追加
4. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定
5. 空オブジェクトにAdd Component>UI>Imageを追加
6. Grid Layout GroupのPaddingで上下左右の余白を調整
7. Cell Sizeでボタンの高さと幅を調整
8. Spacingでボタン同士の余白を調整
9. Start Conrnerでどこから並べるか設定して、Start Axisでどちら方向に向かって並べるか設定
10. ConstraintをFixed Column CountかFixed Row Counを設定して、Constraint Countで列か行に表示する数を制限する
その他のメモ
- スマホのUIを作るのにAutoLayout機能はとても便利（使いこなすまでが難しい）
- リストビューなどはLayout機能を使えばリストの追加などをスクリプトで制御しやすくなる
- グリットレイアウトはダッシュボードにしたりカレンダーに使ったり色々できる
- おもしろいメニューを作ってる記事を見つけた（AutoLayoutではできなそう） http://iwashigame.hatenadiary.jp/entry/2015/09/14/013024
参考になりそうなサイト
http://tsubakit1.hateblo.jp/entry/2015/02/07/235900
http://www.slideshare.net/RyoheiTokimura/unite2015-u-gui
http://albatrus.com/main/unity/7506
今後の課題
スマホなどで解像度が変わった時にレイアウトが正しくなるかは試してない。
横に画面が回転した時にどう対処するか。