1. ホーム /
  2. プログラミング /
  3. 【Unity】フレキシブルなUI作成
  • 2020.12.01

【Unity】フレキシブルなUI作成

概要

ダイアログやポップアップのUIを実装していくと、スクロール機能や動的なサイズ調整が欲しくなってきます。

モバイルアプリだと解像度がデバイスによってまちまちなので、確認してみるとUIがずれてはみ出てることなどがよくあります。

UIを作るときに毎回スクロールビューの作り方とかレイアウト設定を調べて直しているので、今回は個人的なレイアウト設定をまとめてみました。

サンプル

GitHub：https://github.com/Okamochi000/MenuUI

実証環境

  • OS：Windows
  • Unityバージョン：2020.1.6f1

UI構成

メニューベース(MenuCanvas, Menu, Inside)

メニューの枠部分でコンテンツの親となる部分です。大体この辺りは使いまわして、子のコンテンツ部分を状況に応じて変えていきます。

サンプルではモバイルアプリの縦持ち「Portrait(1080×1920)」想定で、MenuCanvasの「Canvas Scaler」を下記のようにしています。

  • Screen Match Mode：Match Width Or Height
  • Reference Resolution：「X 1080」「Y 1920」
  • Match：0

「Menu」「Inside」のコンポーネント設定は下記のようにしています。

  • Rect Transform
    • 「Menu」の横幅はデバイスの横幅から左右20px引いたサイズにしています。
    • 「Inside」のRectTransformは一見変更できるように見えますが、実際は「Menu」の「Vertical Layout Group」によって動的に修正されます。
  • Image
    • メニューの背景を表示します。
  • Vertical Layout Group
    • コンテンツを縦に並べて表示します。
    • 横幅が動的に変わることがあまりないので、「Control Child Size」のWidthにチェックを入れてコンテンツの横幅を統一します。
    • コンテンツごとの間隔が狭いと見栄えが悪いので、Paddingに20px、Spacingに50pxほど設定しています。
  • Content Size Fitter
    • コンテンツのサイズに合わせてメニュー枠を伸ばします。
    • 「Vertical Fit」を「Preferred Size」に設定して縦のサイズを子のコンテンツの縦幅に合わせます。「Layout Group」が付いてないとちゃんと機能しません。

通常テキスト、通常画像(Title, Line)

テキストや画像をそのまま配置する最もシンプルな使い方です。

横幅は固定なのであとは縦幅を設定するだけで特にコンポーネントの追加はありません。

画像の横幅が決まっている場合や横に並べる場合などは後述のコンテンツブロックの構成を使用するといいです。

コンテンツブロック(ProfileArea, Button)

サンプルではプロフィール表示のような構成にしていますが、要はレイアウトを付けて並べたいときに使います。

通常は「Vertical Layout Group」によって縦並びになるので、空のゲームオブジェクトを作成してその中にコンテンツを追加します。空のゲームオブジェクトに縦幅を指定します。(この中のコンテンツに合わせてサイズを可変にする場合はメニューベースのように「Layout Group」と「Content Size Fitter」をつけて制御します)

サンプルでは空オブジェクトの中は左端を基準にして相対位置で設定しています。(Canvasのサイズを変えた時にはみ出ないようにするため)

可変テキスト(Variable Text)

通常テキストはテキストがサイズ外に飛び出した場合見切れるのに対して、可変テキストでは自動でサイズ調整をします。

今回のサンプルには入っていませんが一定サイズまでは可変表示で、あるサイズからはスクロール表示に切り替えるようにスクリプトで制御することができます。

「Variable Text」のコンポーネント設定は下記のようにしています。

  • Content Size Fitter
    • テキストエリアのサイズを入力テキストに合わせて調整します。
    • 「Vertical Fit」を「Preferred Size」に設定して縦サイズが可変になるようにしています。
  • Layout Element
    • 最低保証サイズを設定します。
    • 「Min Height」にチェックを入れてサイズを設定すると、可変サイズが設定したサイズに満たない場合は設定したサイズが設定されます。

縦スクロールエリア(Vertical Scroll View)

ほぼScrollViewを追加するだけです。

テキストの他にコンテンツブロックを入れてスクロールさせるなどの使い方ができます。

「Vertical Scroll View」内の「Content」「Text」のコンポーネント設定は下記のようにしています。

  • Vertical Layout Group(Content)
    • 「Control Child Size」のWidthにチェックを入れます。
    • 背景との間隔が狭いと見栄えが悪いので、Paddingに20pxほど設定しています。
  • Content Size Fitter(Content, Text)
    • 「Vertical Fit」を「Preferred Size」に設定して縦のサイズを子のコンテンツの縦幅に合わせます。

横スクロールエリア(Horizon Scroll View)

ほぼScrollViewを追加するだけです。

縦スクロールでテキストスクロールをしているので、こちらでは画像スクロールをさせています。

スクロールバーを消すときは「Scroll Rect」の「Horizontal Scrollbar」をnullにすれば消えます。

「Horizon Scroll View」内の「Content」のコンポーネント設定は下記のようにしています。

  • Horizotal Layout Group
    • 背景との間隔が狭いと見栄えが悪いので、Paddingに20pxほど設定しています。
  • Content Size Fitter(Content)
    • 「Horizotal Fit」を「Preferred Size」に設定して縦のサイズを子のコンテンツの縦幅に合わせます。

注意点

このサンプルで使っているメニューをHierarchy上に置いたり、Prefabから編集してたりすると頻繁に更新が発生すると思います。

これはUIの更新処理が挟まってサイズや位置調整に更新がかかるためです。

非アクティブにしておけば更新されることはないので、Hierarchyに置くときは非アクティブにしておくとよいです。

また、コンテンツを追加したりテキストを編集した直後などはUIの位置調整が遅れるので一度フォーカスを変えたり非アクティブにしたりすれば直ります。

   

コメントを残す


CAPTCHA