【Unity】Layout Groupの使い方完全ガイド｜UI自動整列・Gridレイアウト・Content Size Fitter・スクリプト追加まで解説

使用環境

・Unity Editor：2021.3.18f1

この記事でわかること

• Layout Groupの基本と使い方
• Horizo​​ntal Layout Group（横並び）とVertical Layout Group（縦並び）、Grid Layout Group（グリッド）を使ったアイテムの自動整列
• Content Size Fitterを使って動的にサイズを調整する方法
• スクリプトで動的にアイテムを追加・削除する方法
• よくあるエラーと解決策

UnityのLayout Groupとは？

ピッグダディ

今日は「Layout Group」の使い方について学んでいこう。
UIを自動でキレイに整列できる、とても便利なコンポーネントだよ。

ピッグボーイ

あっ、それ使いたかったんです！
ボタンとかテキストを縦や横に並べたいのに、
手動で位置調整してて大変でした。

ピッグガール

私はアイテムをスクリプトで追加したら、配置が崩れちゃって。
GridとかContent Size Fitterもあるけど、設定がよく分からなくて…

ピッグダディ

うんうん、それらを正しく使えば、自動で整列して、動的に増減してもキレイに保てるよ。
この記事では、Horizontal/Vertical/Grid Layout Group、Content Size Fitter、スクリプトでの操作方法、よくあるエラーの解決まで、丁寧に解説していくね。

UnityのLayout Groupの使い方

Layout Groupは、UIの自動整列をサポートする標準のコンポーネントです。
ボタンやテキストを手動で構成するのではなく、Layout Groupを使用して自動配置できます。

• 手動で調整せずに、キレイに並べられる
• アイテムを追加・削除しても、自動で再構成される
• 画面サイズの変化にも対応しやすい（レスポンシブデザイン）

※ この他にも以下のサイトを参考にしてください。

【Unity】Canvasの使い方完全ガイド｜描画モード・スケーラー設定・レスポンシブUI・最適化まで徹底解説UnityのCanvasの使い方を解説。Render ModeやCanvas Scaler、Raycast設定、UIの表示・非表示の切り替え方法まで詳しく紹介します。...

【Unity】Image・Panelの使い方まとめ｜画像変更・色変更・透明度（alpha）・Sprite制御UnityのImageやPanelを自在に操作！画像の変更、色の設定、アルファ（透明度）調整、Spriteの適用方法まで詳しく解説。初心者でもすぐに実装できるサンプルコード付き！...

Layout Groupの種類と基本設定

Horizontal Layout Groupの追加と設定項目

① Hierarchy から追加

1. [Hierarchy] → [右クリック] → [UI] → [Panel]
2. [Add Component] → [Horizontal Layout Group]を追加

② Horizontal Layout Groupの構成要素

Vertical Layout Groupの追加と設定項目

① Hierarchy から追加

1. [Hierarchy] → [右クリック] → [UI] → [Panel]
2. [Add Component] → [Vertical Layout Group]を追加

② Vertical Layout Groupの構成要素

　Horizontal Layout Groupとおなじ。

Grid Layout Groupの追加と設定項目

① Hierarchy から追加

1. [Hierarchy] → [右クリック] → [UI] → [Panel]
2. [Add Component] → [Grid Layout Group]を追加

② Grid Layout Groupの構成要素

Content Size Fitterの追加と設定項目

① Hierarchy から追加

1. [Hierarchy] → [右クリック] → [UI] → [Panel]
2. [Add Component] → [Vertical Layout Group]を追加
3. [Add Component] → [Content Size Fitter]を追加

② Content Size Fitterの構成要素

スクリプトで動的にアイテムを追加・削除

ボタンを動的に追加

➡新しいテキストが追加され、パネルに自動的に並びます！

※ ボタンがあればOnClickで試してみるといいかもしれません。

using UnityEngine;
using UnityEngine.UI;

public class LayoutExample : MonoBehaviour
{
    public GameObject textPrefab; // 追加するテキスト
    public Transform contentPanel; // パネル

    public void AddText()
    {
        // テキストオブジェクトを生成し、パネルに配置
        GameObject newText = Instantiate(textPrefab, contentPanel);
    }
}

ボタンを取り外す

➡ボタンをすべて削除してリセット可能！

//パネルの子オブジェクトをすべて削除する
public void RemoveAllButtons()
{
    foreach (Transform child in contentPanel)
    {
        Destroy(child.gameObject);
    }
}

よくあるエラーと解決策

アイテムが正しく並ばない

➡Control Child SizeをONにする（サイズを自動調整）
➡LayoutRebuilder.ForceRebuildLayoutImmediate()を実行

using UnityEngine;
using UnityEngine.UI;

public class LayoutExample : MonoBehaviour
{
    public RectTransform layoutGroup;

    void UpdateLayout()
    {
        LayoutRebuilder.ForceRebuildLayoutImmediate(layoutGroup);
    }
}

まとめ

・Layout Groupを使うと、UIを自動で整列できる！
・Horizo​​ntal（横並び）、Vertical（縦並び）、Grid（グリッド）を活用
・Content Size Fitterを組み合わせて、親のサイズを自動調整
・スクリプトアイテムを追加・削除することも可能！