UI
Unity
uGUI

uGUIでスマホUIの作成


概要

Unityのバージョンは5.2.3f1

uGUIでスマホのUIを作るためのメモです。(投稿忘れてた古い情報なので注意)

スマホのUIの参考サイト

http://nvtrlab.jp/blog/jb/ios_ui_component.html

http://growthhack.sirok.co.jp/growth-message/in-app-message/

http://raksul.com/magazine/10120_統一感のある、ハイクオリティな無料UIデザインキット40個まとめ.html/

http://titanium-sdk.net/dic/views/?type=V

http://greety.sakura.ne.jp/redo/2011/06/10androidui.html

投稿予定

ドロップダウンの作り方

スライドスイッチの作り方

サークルスライダーの作り方

レーティングの作り方

インジケータの作り方

ピッカーの作り方

リストビューの作り方

モーダルメッセージウィンドウの作り方

ウィンドウシェードの作り方

アクションパネルの作り方

タブナビゲーションの作り方

セグメンテッドコントロールの作り方

スワイプナビゲーションの作り方

リストページャーの作り方

スライドメニューの作り方


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


  1. ImageとTextを追加してTextをImageのこオブジェクトにする

  2. TextのAnchor Presetsの一番右下をAltとShiftを押しながら選択

  3. 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


参考になりそうなサイトやAsset

スマホのUIに使えそうな参考サイト

http://www.nxworld.net/inspiration/admin-dashboard-design-showcase-1.html

http://www.slideshare.net/bookslope/hcdnet-sd06-uipatterns2014

http://meglog.net/web-service/gallery-of-smartphone-site.html

自動レイアウトの参考サイト

http://ashlot.net/2015/05/08/unity-ugui-scroll/

http://tsubakit1.hateblo.jp/entry/2015/02/07/235900

http://www.slideshare.net/RyoheiTokimura/unite2015-u-gui

http://albatrus.com/main/unity/7506


今後の課題

スマホなどで解像度が変わった時にレイアウトが正しくなるかは試してない。

横に画面が回転した時にどう対処するか。