Unity の HorizontalLayoutGroup で、階層下の全部を含む幅でレイアウトしたい。

Question

実現したいこと

HorizontalLayoutGroup でオブジェクトを横に並べる際に
「階層下すべてのオブジェクトを含む幅」でレイアウトしたいです。

具体的には、添付画像のように
Red -> Yellow -> Pink の階層がある状態で
「Red を Yellow, Pink をすべて含んだ幅」で並べたいです。

※「階層下すべてを含む PreffedSize」のイメージです。

可能でしょうか？

Comments

[sakura_hana]

Yellowの両隣の空白と、Pinkの左端の空白は必須ですか？　その場合、ここはどのように設けるつもりですか？　親子関係はどこまで変えていいですか？
（一応参考：http://tsubakit1.hateblo.jp/entry/2017/05/14/163456）

[sagat64]

コメントありがとうございます！

>Yellowの両隣の空白と、Pinkの左端の空白は必須ですか？
必須です。

>その場合、ここはどのように設けるつもりですか？
任意のサイズに対応できるものとします。

>親子関係はどこまで変えていいですか？
変えないでください。

[sakura_hana]

もし階層内に他のオブジェクトを追加するのも不可だと、そもそも空白が作れないように思います。
空白を作るとしたらLayoutGroupのPaddingを設定するか、同階層に空オブジェクトを配置するかになりますが、Paddingは横幅自体が縮まるのでダメ。空オブジェクトを配置した場合でもYellowの右側の空白が作れません（出来たとしても「Yellowの幅＝Yellowの左端からPinkの左端までを司る空白の幅＋Pinkの幅」となる為）。

個人的には「Redの左辺の位置」と「Pinkの右辺の位置」を算出してその差を計算で求めるしか無いように思います。

[sagat64]

コメントありがとうございます！

>もし階層内に他のオブジェクトを追加するのも不可だと、そもそも空白が作れないように思います。

Red, Yellow, Pink はただの親子関係です（＝レイアウトを使いません）。
→RectTransform で移動して、空白を作ります。

"Red, Yellow, Pink のサイズ（＝階層下すべてを含んだサイズ）で
HorizontalLayout をするにはどうしたらよいか。"
というのが今回の主旨です。

[sakura_hana]

了解です、誤解してました。
とすると結局のところ「頑張って自分で計算する（RectTransfromのパラメータを参照、子孫要素の中で一番右端の辺の位置と、赤の左辺の位置を算出、その差を求める）」しか私には思い付かないのですが、その方法が分からないということでいいんでしょうか。（多分出来るんじゃない？レベルなので私も確実ではないです。こちらの手法についてはリファレンス等見ながら自分で調べてもらった方が早いかもしれません）

[sagat64]

>子孫要素の中で一番右端の辺の位置と、赤の左辺の位置を算出、その差を求める
はい。そのやり方がよくわからず、壁になっていました。。

コメントありがとうございます！ m(_ _)m

Answer 1

おそらく順当な方法は、sakura_hanaさんの案のように各種レイアウトグループを入れ子にして、スペーサー役の不可視オブジェクトを適切に配置して目的のレイアウトになるようにする手ではないかと思います。
それでもあえて「階層構造は変えない」という縛りでやってみようかと思い実験してみました。

階層構造を変えないことに加えて、並べたい色板の見た目が勝手に変化しないようにするためRectTransformのWidthとHeight...つまりsizeDeltaがレイアウト処理の前後で変化してはいけないという縛りも必要かと思います。
ですが、レイアウトグループはControl Child Sizeがオフの場合には「子オブジェクトのRectTransformのsizeDeltaを見てレイアウトを決定する」、オンの場合には「子オブジェクトの持つレイアウトエレメントが提示したサイズを見てレイアウトを決定し、さらにその子オブジェクトのRectTransformのsizeDeltaをそのサイズに書き換える」といったような動作をするようでした。
Control Child Sizeがオフだと直接の子のsizeDeltaしか見ないためRedの子であるYellow以下の存在が無視されてしまうし、かといってオンにした上でRedにYellow以下の子孫を考慮したレイアウトサイズを提出するレイアウトエレメントを付けたとしても、併せてsizeDeltaを書き換えてしまうという特性のために、Redが伸び縮みしてしまうことになるでしょう。

nabyさんのContent Size Fitterを使う案もいいかもしれませんが、やはり「階層構造を変えない」という縛りが効いてきて、Content Size FitterもsizeDeltaを書き換える特性があるので一筋縄にはいかなそうな気がします。

いろいろ触ってみてとりあえず出てきた案としては...

1. レイアウトグループの直接の子であるGreen、Red、Purpleには「自身を含む子孫階層のRectTransformを囲むバウンディングボックスのサイズをMinおよびPreferredとして提出するレイアウトエレメント」を付ける。孫、ひ孫であるYellowやPinkはそのままでよい。
2. Layoutには「Control Child Sizeがオンの状態と同様の動作をした上で、後で子オブジェクトのsizeDeltaを元のサイズに戻すレイアウトグループ」を付ける。

といったものです。

子オブジェクトに付けるレイアウトエレメントとして下記スクリプトを用意し...

using UnityEngine;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
#endif

[AddComponentMenu("Layout/Union Layout Element")]
public class UnionLayoutElement : LayoutElement
{
	private static readonly Vector3[] Corners = new Vector3[4];

	public Rect UnionRect { get; private set; }

	/// <inheritdoc />
	public override float minWidth => this.UnionRect.width;

	/// <inheritdoc />
	public override float preferredWidth => this.UnionRect.width;

	/// <inheritdoc />
	public override float minHeight => this.UnionRect.height;

	/// <inheritdoc />
	public override float preferredHeight => this.UnionRect.height;

	/// <inheritdoc />
	public override void CalculateLayoutInputHorizontal()
	{
		this.UpdateSize();
	}

	/// <inheritdoc />
	protected override void OnEnable()
	{
		base.OnEnable();
		this.UpdateSize();
	}

	private void UpdateSize()
	{
		// 自身のrectを子孫のrectの四隅をすべて含む大きさに広げ、それをunionRectとする
		// 子孫は回転しているかもしれないので、最大最小の二隅ではなく四隅を使うことにしました
		var rectTransform = this.transform as RectTransform;
		var unionRect = rectTransform.rect;
		var childCount = rectTransform.childCount;
		for (var i = 0; i < childCount; i++)
		{
			var childRectTransform = rectTransform.GetChild(i) as RectTransform;
			if (childRectTransform != null)
			{
				unionRect = EncapsulateRecursively(unionRect, rectTransform, childRectTransform);
			}
		}

		this.UnionRect = unionRect;
	}

	// pointが領域内に収まるようにrectを拡張する
	// (Bounds.Encapsulateと似たようなことをする)
	private static Rect Encapsulate(Rect rect, Vector2 point)
	{
		rect.min = Vector2.Min(rect.min, point);
		rect.max = Vector2.Max(rect.max, point);
		return rect;
	}

	// rectTransformおよびその子孫から再帰的に四隅を取り出し、それら座標を
	// rootRectTransformの座標系に直してrectに結合する
	private static Rect EncapsulateRecursively(Rect rect, RectTransform rootRectTransform, RectTransform rectTransform)
	{
		var childCount = rectTransform.childCount;
		for (var i = 0; i < childCount; i++)
		{
			var childRectTransform = rectTransform.GetChild(i) as RectTransform;
			if (childRectTransform != null)
			{
				rect = EncapsulateRecursively(rect, rootRectTransform, childRectTransform);
			}
		}

		rectTransform.GetWorldCorners(Corners);
		for (var i = 0; i < 4; i++)
		{
			rect = Encapsulate(rect, rootRectTransform.InverseTransformPoint(Corners[i]));
		}

		return rect;
	}
}

#if UNITY_EDITOR
[CustomEditor(typeof(UnionLayoutElement), true)]
[CanEditMultipleObjects]
public class UnionLayoutElementEditor : Editor
{
	private SerializedProperty ignoreLayout;
	private SerializedProperty layoutPriority;

	/// <inheritdoc cref="Editor" />
	public override void OnInspectorGUI()
	{
		this.serializedObject.Update();
		var unionLayoutElement = this.target as UnionLayoutElement;
		EditorGUILayout.PropertyField(this.ignoreLayout);
		if (!this.ignoreLayout.boolValue)
		{
			EditorGUILayout.Space();
			EditorGUILayout.LabelField("Min/Preferred Width", unionLayoutElement.minWidth.ToString());
			EditorGUILayout.LabelField("Min/Preferred Height", unionLayoutElement.minHeight.ToString());
		}

		EditorGUILayout.PropertyField(this.layoutPriority);
		this.serializedObject.ApplyModifiedProperties();
	}

	protected void OnEnable()
	{
		this.ignoreLayout = this.serializedObject.FindProperty("m_IgnoreLayout");
		this.layoutPriority = this.serializedObject.FindProperty("m_LayoutPriority");
	}
}
#endif

親オブジェクトに付けるレイアウトグループとして下記スクリプトを用意し...

using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

[AddComponentMenu("Layout/Size Preserving Horizontal Layout Group")]
public class SizePreservingHorizontalLayoutGroup : HorizontalLayoutGroup
{
	private readonly List<(RectTransform, Vector2, Vector2, Vector2)> children =
		new List<(RectTransform, Vector2, Vector2, Vector2)>();

	// スクリーンショットを拝見しますと、Purpleの垂直位置がずれているようです
	// ですので垂直位置を調整できるようにするべきかと思い、とりあえず以前
	// https://teratail.com/questions/194411 で申し上げたように
	// SetLayoutVerticalをオーバーライドして整列を効かなくしました
	// もし垂直位置固定が必要でしたら、下記オーバーライドは削除してしまってください
	/// <inheritdoc />
	public override void SetLayoutVertical()
	{
	}

	/// <inheritdoc />
	public override void SetLayoutHorizontal()
	{
		// 子オブジェクトにUnionLayoutElementを付け、sizeDelta、pivotと
		// レイアウト矩形の左上に対してRectTransformの左上がどれだけ
		// ずれているかを表すオフセットを覚えておく
		this.children.Clear();
		var childCount = this.transform.childCount;
		for (var i = 0; i < childCount; i++)
		{
			var child = this.transform.GetChild(i) as RectTransform;
			if (child == null)
			{
				continue;
			}

			var unionLayoutElement = child.GetComponent<UnionLayoutElement>();
			if (unionLayoutElement == null)
			{
				unionLayoutElement = child.gameObject.AddComponent<UnionLayoutElement>();
			}
			if (unionLayoutElement.ignoreLayout)
			{
				continue;
			}
			var sizeDelta = child.sizeDelta;
			var pivot = child.pivot;
			var rectTopLeft = (Vector2.up - pivot) * sizeDelta;
			var unionRect = unionLayoutElement.UnionRect;
			var unionRectTopLeft = new Vector2(unionRect.xMin, unionRect.yMax);
			var offset = rectTopLeft - unionRectTopLeft;
			this.children.Add((child, sizeDelta, pivot, offset));
		}

		foreach (var (child, _, _, offset) in this.children)
		{
			// pivotは一旦左端に変更する
			var pivot = child.pivot;
			pivot.x = 0.0f;
			child.pivot = pivot;

			// もし子オブジェクトが孫オブジェクトを持っていれば
			// それらの位置をオフセット分だけずらしておく
			var grandChildCount = child.childCount;
			for (var i = 0; i < grandChildCount; i++)
			{
				var grandChild = child.GetChild(i) as RectTransform;
				if (grandChild != null)
				{
					grandChild.anchoredPosition += offset;
				}
			}
		}

		// Control Child Sizeをオンにしてからレイアウトを決定させ...
		this.childControlWidth = true;
		base.SetLayoutHorizontal();
		this.childControlWidth = false;

		// レイアウトに修正を加える
		this.m_Tracker.Clear();
		foreach (var (child, sizeDelta, pivot, offset) in this.children)
		{
			this.m_Tracker.Add(
				this,
				child,
				DrivenTransformProperties.Anchors | DrivenTransformProperties.AnchoredPositionX);

			// pivotの変位分だけ位置を調整し...
			child.anchoredPosition += (pivot - child.pivot) * sizeDelta;

			// sizeDelta、pivotを復元し...
			child.sizeDelta = sizeDelta;
			child.pivot = pivot;

			// 孫オブジェクトの配置を復元する
			child.anchoredPosition += Vector2.Scale(offset, Vector2.right);
			var grandChildCount = child.childCount;
			for (var i = 0; i < grandChildCount; i++)
			{
				var grandChild = child.GetChild(i) as RectTransform;
				if (grandChild != null)
				{
					grandChild.anchoredPosition -= offset;
				}
			}
		}
	}

	/// <inheritdoc />
	protected override void OnEnable()
	{
		this.childControlWidth = false;
		base.OnEnable();
	}
}

下図のようにLayoutにSizePreservingHorizontalLayoutGroupをアタッチしました。なお、レイアウト処理時に子オブジェクトがUnionLayoutElementを持っていなかった場合、その時にアタッチすることにしました。ご参考になりますでしょうか?

Comments

[sagat64]

パーフェクトな回答です。
ありがとうございます。

>// 自身のrectを子孫のrectの四隅をすべて含む大きさに広げ、それをunionRectとする
はい。こういうことがしたかったのです。
・・が、よくわからず困っていました。
uGUI の拡張はこうやってやるんですね。

>// 子孫は回転しているかもしれないので、最大最小の二隅ではなく四隅を使うことにしました
回転にも対応できるとは。。

>// pointが領域内に収まるようにrectを拡張する
Vector2.Min, Max なんてできるんですね。

>// ですので垂直位置を調整できるようにするべきかと思い
>// SetLayoutVerticalをオーバーライドして整列を効かなくしました
そのとおりです。ありがとうございます。

自分で、uGUI をひととおり使っていましたが・・
なるほど拡張はこうやってやるんですね。

コード書いて動かして、 GIF アニメまで付けて回答していただけるのは
かなりの手間だと推察しました。

とても勉強になりました。
心から感謝いたします。

Answer 2

Content Size Fitterで子階層からサイズの更新を受けることができます。

https://docs.unity3d.com/ja/current/Manual/script-ContentSizeFitter.html