Unity UGUI の horizontalLayoutGroup (水平レイアウト) コンポーネントの紹介と使用法

Unity UGUI の horizo​​ntalLayoutGroup (水平レイアウト) コンポーネントの紹介と使用法

1. horizo​​ntalLayoutGroup コンポーネントとは何ですか?

horizo​​ntalLayoutGroup は、Unity UGUI のレイアウト コンポーネントであり、サブオブジェクトを水平方向に配置およびレイアウトするために使用されます。サブオブジェクトが水平方向に均等に配置されるように、特定のルールに従ってサブオブジェクトの位置とサイズを自動的に調整できます。

2. 水平レイアウトグループの仕組み

horizo​​ntalLayoutGroup コンポーネントは、次の手順で水平レイアウトを実現します。

• すべての子オブジェクトの RectTransform コンポーネントを取得します。
• サブオブジェクトのサイズとレイアウト ルールに従って、各サブオブジェクトの位置とサイズを計算します。
• 子オブジェクトが水平方向に均等な間隔になるように、子オブジェクトの位置とサイズを調整します。

3. horizo​​ntalLayoutGroupの共通属性

• Spacing: 子オブジェクト間の間隔。
• ChildForceExpandWidth: 子オブジェクトの幅を強制的に拡張して水平レイアウト全体を埋めるかどうか。
• ChildForceExpandHeight: 子オブジェクトの高さを強制的に拡張して水平レイアウト全体を埋めるかどうか。
• ChildControlWidth: 子オブジェクトの幅を制御するかどうか。
• ChildControlHeight: 子オブジェクトの高さを制御するかどうか。

4. horizo​​ntalLayoutGroupの共通機能

• CalculateLayoutInputHorizontal()：横レイアウトを計算するための入力です。
• CalculateLayoutInputVertical(): 垂直レイアウトの入力を計算します。
• SetLayoutHorizontal()：横レイアウトを設定します。
• SetLayoutVertical()：縦方向のレイアウトを設定します。

5. コード例

例 1: 水平レイアウトを作成し、3 つの子オブジェクトを追加します。

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

手順:

1. 空のオブジェクトを作成し、horizo​​ntalLayoutGroup コンポーネントを追加します。
2. Text コンポーネントを含むサブオブジェクト プレハブを作成します。
3. 子オブジェクト プレハブを、layoutGroup の Child Prefab プロパティにドラッグします。
4. ゲームを実行すると、3 つのサブオブジェクトが水平方向に均等に配置されていることがわかります。

例 2: サブオブジェクト間の間隔を設定する

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.spacing = 20f;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

手順:

1. 空のオブジェクトを作成し、horizo​​ntalLayoutGroup コンポーネントを追加します。
2. Text コンポーネントを含むサブオブジェクト プレハブを作成します。
3. 子オブジェクト プレハブを、layoutGroup の Child Prefab プロパティにドラッグします。
4. layoutGroup の Spacing プロパティを 20 に設定します。
5. ゲームを実行すると、サブオブジェクト間の距離が 20 に変更されたことがわかります。

例 3: 子の幅を強制的に拡張して水平レイアウト全体を埋めるようにする

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childForceExpandWidth = true;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

手順:

1. 空のオブジェクトを作成し、horizo​​ntalLayoutGroup コンポーネントを追加します。
2. Text コンポーネントを含むサブオブジェクト プレハブを作成します。
3. 子オブジェクト プレハブを、layoutGroup の Child Prefab プロパティにドラッグします。
4. layoutGroup の子の強制拡張幅プロパティを true に設定します。
5. ゲームを実行すると、子オブジェクトの幅が水平レイアウト全体を埋めるように拡張されていることがわかります。

例 4: 子オブジェクトの幅と高さの制御

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childControlWidth = false;
        layoutGroup.childControlHeight = false;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

手順:

1. 空のオブジェクトを作成し、horizo​​ntalLayoutGroup コンポーネントを追加します。
2. Text コンポーネントを含むサブオブジェクト プレハブを作成します。
3. 子オブジェクト プレハブを、layoutGroup の Child Prefab プロパティにドラッグします。
4. layoutGroup の子コントロールの幅と子コントロールの高さのプロパティを両方とも false に設定します。
5. ゲームを実行すると、サブオブジェクトの幅と高さが制御されておらず、元のサイズが維持されていることがわかります。

例 5: カスタム レイアウト ルール

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childAlignment = TextAnchor.MiddleCenter;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

手順:

1. 空のオブジェクトを作成し、horizo​​ntalLayoutGroup コンポーネントを追加します。
2. Text コンポーネントを含むサブオブジェクト プレハブを作成します。
3. 子オブジェクト プレハブを、layoutGroup の Child Prefab プロパティにドラッグします。
4. layoutGroup の Child Alignment プロパティを Middle Center に設定します。
5. ゲームを実行すると、サブオブジェクトが水平方向の中央に配置されていることがわかります。

予防

• 水平レイアウトグループ コンポーネントは水平レイアウトにのみ使用できますが、垂直レイアウトが必要な場合は、VerticalLayoutGroup コンポーネントを使用できます。
• 子オブジェクトの RectTransform コンポーネントのアンカー ポイントと位置はレイアウト効果に影響するため、実際のニーズに応じて調整する必要があります。

参考文献

• Unity 公式ドキュメント - horizo​​ntalLayoutGroup