【Unity】Horizontal Layout Groupコンポーネントの設定

Horizontal Layout Group コンポーネントは、UnityのUIシステムにおいて、子オブジェクトを水平方向に自動的に配置するためのレイアウトコントローラーです。これは、ユーザーインターフェイス要素を整理し、管理しやすくするために使用されます。例えば、ツールバー、ナビゲーションバー、リスト表示など、水平に整列されたアイテムを表示する場合に便利です。

以下に主要な設定項目について説明します：

主な設定項目の詳細

1. Padding

  • 説明: レイアウトグループ内の要素とレイアウトグループの境界との間のスペースを指定します。これにより、UI要素がグループの端に直接接触するのを防ぎ、視覚的な余裕を持たせることができます。
  • パラメータ:
    • Left: 左側の余白（ピクセル単位）
    • Right: 右側の余白
    • Top: 上側の余白
    • Bottom: 下側の余白
  • 使用例: 左右に20ピクセル、上下に10ピクセルの余白を設定することで、UI要素がPanelの端から均等に離れるようにします。

2. Spacing

  • 説明: 子オブジェクト同士の間隔をピクセル単位で指定します。これにより、要素間に一定のスペースを設け、視覚的な整理を行います。
  • パラメータ:
    • Spacing: 子オブジェクト間のスペース（ピクセル単位）
  • 使用例: スペースを15ピクセルに設定することで、各ボタンの間に15ピクセルの空白が生まれます。

3. Child Alignment

  • 説明: レイアウト全体に対する子オブジェクトの整列基準点を指定します。これにより、子オブジェクトがレイアウトグループ内でどの位置に配置されるかを制御します。
  • パラメータ:
    • Alignment Options:
      • Upper Left: 上左
      • Upper Center: 上中央
      • Upper Right: 上右
      • Middle Left: 中央左
      • Middle Center: 中央
      • Middle Right: 中央右
      • Lower Left: 下左
      • Lower Center: 下中央
      • Lower Right: 下右
  • 使用例: Middle Center を選択すると、子オブジェクトがレイアウトグループの中央に整列されます。

4. Child Force Expand

  • 説明: 子オブジェクトが利用可能なスペースをどの程度拡張するかを設定します。これにより、UI要素が親レイアウトのサイズに応じて自動的に拡大・縮小します。
  • パラメータ:
    • Width: 幅を強制的に拡張するかどうか（チェックボックス）
    • Height: 高さを強制的に拡張するかどうか（チェックボックス）
  • 使用例: Width にチェックを入れ、Height にチェックを入れない場合、子オブジェクトは横方向にのみ拡張され、縦方向のサイズは固定されます。

5. Control Child Size

  • 説明: 子オブジェクトのサイズをレイアウトグループが制御するかどうかを設定します。これにより、子オブジェクトの幅や高さがレイアウトグループの設定に従って自動的に調整されます。
  • パラメータ:
    • Width: 子オブジェクトの幅を制御するかどうか（チェックボックス）
    • Height: 子オブジェクトの高さを制御するかどうか（チェックボックス）
  • 使用例: Width にチェックを入れると、子ボタンの幅がレイアウトグループの設定に基づいて自動的に調整されます。一方、Height にチェックを入れない場合、子ボタンの高さは固定されます。

6. Use Child Scale

  • 説明: 子オブジェクトのスケール（拡大縮小）をレイアウトグループが制御するかどうかを設定します。通常、UI要素のスケールは個別に管理するため、このオプションはオフにすることが推奨されます。
  • パラメータ:
    • Use Child Scale: スケールを制御するかどうか（チェックボックス）
  • 使用例: Use Child Scale をオフにすることで、子オブジェクトのスケールは個別に設定可能となり、レイアウトグループによる不要な拡大縮小を防ぎます。

サンプル

以下は、UnityでHorizontal Layout Groupコンポーネントを使用して、簡単なツールバーUIを作成するサンプルです。このサンプルでは、Horizontal Layout Groupを設定し、スクリプトを使用して動的にボタンを追加します。なお、ボタンのテキストにはTextMeshProを使用します。

1. Unityエディタでのセットアップ

1.1 新しいシーンを作成

  • Unityを開き、新しいシーンを作成します。

1.2 UI Canvasの作成

  • メニューから GameObject > UI > Canvas を選択して、Canvasをシーンに追加します。

1.3 Horizontal Layout Groupの作成

  • Canvasの子として Panel を追加します（GameObject > UI > Panel）。
  • Panelを選択し、Inspectorウィンドウで Horizontal Layout Group コンポーネントを追加します（Add Component ボタンをクリックして検索）。

1.4 Horizontal Layout Groupの設定

Horizontal Layout Groupの各設定項目を以下のように調整します：

  • Padding: 左右に20ピクセル、上下に10ピクセルずつ設定。
  • Spacing: 15ピクセルに設定。
  • Child Alignment: Middle Center を選択。
  • Child Force Expand:
    • Width: チェックを入れる。
    • Height: チェックを入れない。
  • Control Child Size:
    • Width: チェックを入れる。
    • Height: チェックを入れない。
  • Use Child Scale: チェックを外す。

これにより、Panel内に整然とした水平レイアウトが作成されます。

1.5 スクロールビューの追加（オプション）

  • 多数のボタンを表示する場合は、Panel を Scroll View に変更することをお勧めします。
  • GameObject > UI > Scroll View を追加し、同様にHorizontal Layout Groupを設定します。

ContentをPanelのように見立てて、作成を進めてください

  • Canvasの子として Scroll View を追加します（GameObject > UI > Scroll View）。
  • これにより、以下の階層構造が作成されます：
    • Canvas
      • Scroll View
        • Viewport
          • Content
            • (プレースホルダーとしての子オブジェクト)

2. スクリプトの作成

次に、Horizontal Layout Group内に動的にボタンを追加するC#スクリプトを作成します。

2.1 スクリプトの作成

  • Assets フォルダ内で右クリックし、Create > C# Script を選択して、ToolbarManager.cs と名前を付けます。

2.2 スクリプトの編集

using UnityEngine;
using UnityEngine.UI;
using TMPro; // TextMeshProを使用するために追加

public class ToolbarManager : MonoBehaviour
{
    // Horizontal Layout GroupがアタッチされているPanel
    public GameObject layoutPanel;

    // 生成するボタンのプレハブ
    public GameObject buttonPrefab;

    // ボタンの数
    public int numberOfButtons = 5;

    void Start()
    {
        PopulateToolbar();
    }

    void PopulateToolbar()
    {
        for (int i = 0; i < numberOfButtons; i++)
        {
            // プレハブから新しいボタンをインスタンス化
            GameObject newButton = Instantiate(buttonPrefab, layoutPanel.transform);

            // ボタンに名前を付ける
            newButton.name = "Button_" + i;

            // TextMeshProのテキストを設定（オプション）
            TextMeshProUGUI buttonText = newButton.GetComponentInChildren<TextMeshProUGUI>();
            if (buttonText != null)
            {
                buttonText.text = "Button " + i;
            }

            // ボタンにクリックイベントを追加（オプション）
            Button button = newButton.GetComponent<Button>();
            if (button != null)
            {
                int index = i; // ローカル変数に保存
                button.onClick.AddListener(() => OnButtonClicked(index));
            }
        }
    }

    void OnButtonClicked(int index)
    {
        Debug.Log("Clicked on Button " + index);
        // ここにボタンクリック時の処理を追加
    }
}

3. プレハブの準備

Hierarchyビューでボタンを作成

  • ボタンの作成:
    • Hierarchyビュー内で右クリックし、UI > Button - TextMeshPro を選択してボタンを作成します。
    • これにより、Canvasの子オブジェクトとして新しいボタンが追加されます。
    注: Button - TextMeshPro を選択することで、自動的にTextMeshProコンポーネントが追加されます。もし Button を選択した場合は、後からTextMeshProのテキストコンポーネントを追加する必要があります。
  • Projectビューに移動:
    • ProjectビューのAssetsフォルダ内で、プレハブを保存したいフォルダ（例えば、Assets/Prefabs）を選択します。存在しない場合は、新しくフォルダを作成します。
  • プレハブ化:
    • Hierarchyビュー内で作成したボタンを選択し、Projectビューの目的のフォルダにドラッグ＆ドロップします。
    • これにより、ボタンのプレハブがAssetsフォルダ内に作成されます。

プレハブのデザインとサイズの設定

  • プレハブの編集:
    • Projectビュー内のプレハブをダブルクリックして、プレハブモードで開きます。
    • デザインのカスタマイズ:
      • ボタンのテキスト、色、画像などを必要に応じて変更します。
      • テキストのフォントやスタイルをTextMeshProのオプションで調整します。
    • サイズの調整:
      • Rect Transformコンポーネントでボタンの幅（Width）と高さ（Height）を設定します。例えば、幅を150ピクセル、高さを50ピクセルに設定する場合は、Widthに150、Heightに50と入力します。
  • 変更の保存:
    • 編集が完了したら、プレハブモードを閉じて変更を保存します。

2.4 スクリプトの設定

  • Panel（Horizontal Layout Groupがアタッチされているオブジェクト）を選択し、Inspectorで ToolbarManager スクリプトを追加します。
  • Layout Panel フィールドに Panel をドラッグ＆ドロップします。
  • Button Prefab フィールドに先ほど作成したボタンのプレハブをドラッグ＆ドロップします。
  • Number Of Buttons フィールドに生成したいボタン数（例：5）を入力します。

4. 実行と確認

シーンを再生すると、Horizontal Layout Groupが設定されたPanel内に指定した数のボタンが整然と水平に配置されていることが確認できます。各ボタンにはTextMeshProのテキストが表示され、クリックするとコンソールにクリックされたボタンの番号が表示されます。

5. 補足：レスポンシブデザインの実装

Horizontal Layout Groupを使用すると、画面サイズや解像度の変更に応じて自動的にレイアウトが調整されます。これにより、さまざまなデバイスや画面サイズに対応したUIを簡単に作成できます。必要に応じて、Child Force ExpandやControl Child Sizeのオプションを調整して、レイアウトの動的な変化を制御することが可能です。

このサンプルを基に、さらに複雑なツールバーやナビゲーションメニュー、リスト表示などのUIを実装することができます。Horizontal Layout GroupとTextMeshProを活用して、整然とした高品質なユーザーインターフェイスを効率的に構築してください。

C#,Unity

Posted by hidepon