Unity2D　複雑なUIの作り方

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

Imageは、縦横比が1:1にしたいです。
タイトルの高さを1とし、内容は2の高さ。
Button(選択)は、表示されればサイズは特に問いません。

Prefabにし、スクロールバーに表示して利用したいのですが
UIが複雑で作り方がよくわかりません。

試したこと

要素を置いてみましたが、Imageが正方形になりません…。
これをPrefabにして問題ないかというのも確認しないといけないですね。

できないこと

Imageを1:1の正方形にすること

補足情報（FW/ツールのバージョンなど）

2019.4.9f1
Windows10

行動規範の内容に同意します

回答1件

ベストアンサー

たとえばこんな案はどうでしょうか?

まず台座となる背景を用意しました。この台座は必須ではないですが、オブジェクトの範囲をわかりやすくしようと思って置いてみました。

その直下にはHorizontalLayoutGroupを配置しました。Control Child Sizeを幅・高さともにオンにしています。また、子エレメントにいくらか余白を設けようと思い、Paddingをそれぞれ4にしました。

その最初の子として、常に正方形で表示したいイメージを設置します。

このイメージには下記のようなスクリプトをアタッチしておきました。

C#
1using UnityEngine;
2using UnityEngine.EventSystems;
3using UnityEngine.UI;
4
5[AddComponentMenu("Layout/Square Layout Element")]
6[RequireComponent(typeof(RectTransform))]
7[ExecuteAlways]
8public class SquareLayoutElement : UIBehaviour, ILayoutElement
9{
10    [SerializeField] private int m_LayoutPriority = 1;
11
12    /// <inheritdoc />
13    public void CalculateLayoutInputHorizontal()
14    {
15        var parent = this.transform.parent as RectTransform;
16        if (parent == null)
17        {
18            this.minWidth = this.preferredWidth = 0.0f;
19        }
20        else
21        {
22            // 親の高さを調べ、それをminWidthおよびpreferredWidthとして提出する
23            var height = parent.rect.height;
24            var layoutGroup = parent.GetComponent<LayoutGroup>();
25            if (layoutGroup != null)
26            {
27                var padding = layoutGroup.padding;
28                if (padding != null)
29                {
30                    height = Mathf.Max(height - padding.vertical, 0.0f);
31                }
32            }
33
34            this.minWidth = this.preferredWidth = height;
35        }
36    }
37
38    /// <inheritdoc />
39    public void CalculateLayoutInputVertical()
40    {
41    }
42
43    /// <inheritdoc />
44    public float minWidth { get; private set; }
45
46    /// <inheritdoc />
47    public float preferredWidth { get; private set; }
48
49    /// <inheritdoc />
50    public float flexibleWidth => 0.0f;
51
52    /// <inheritdoc />
53    public float minHeight => 0.0f;
54
55    /// <inheritdoc />
56    public float preferredHeight => 0.0f;
57
58    /// <inheritdoc />
59    public float flexibleHeight => 0.0f;
60
61    /// <inheritdoc />
62    public int layoutPriority
63    {
64        get => this.m_LayoutPriority;
65        set
66        {
67            if (this.m_LayoutPriority != value)
68            {
69                this.m_LayoutPriority = value;
70                if (this.IsActive())
71                {
72                    LayoutRebuilder.MarkLayoutForRebuild(this.transform as RectTransform);
73                }
74            }
75        }
76    }
77}

イメージの次の子として、テキスト情報を表示するためのVerticalLayoutGroupを設置します。こちらもControl Child Sizeをオンにしています。そしてLayoutElementをアタッチし、Flexible Widthに巨大な値（さしあたり3.402823e+38としました）を入れておきます。これによりイメージとボタンによって占められたスペースを除いた残りのスペースを、このVerticalLayoutGroupが可能な限り広く占有するだろうと考えました。

VerticalLayoutGroupの子階層にテキスト表示用のオブジェクトを設置します。これらにもLayoutElementをアタッチし、Flexible Heightが1:2の比率になるようにしました。

最後に、VerticalLayoutGroupの次の子としてボタンを配置しました。これもLayoutElementをアタッチし、Min WidthとPreferred Widthとして適当な固定幅（さしあたり30としました）を提出させるようにしておきます。

この状態で台座オブジェクトを伸縮させたところ、下図のようにレイアウトされました。

投稿2020/08/30 02:10

Bongo

総合スコア10811

退会済みユーザー

2020/08/30 08:49

回答ありがとうございました！対応遅くなり申し訳ないです。試してみたところ、意図したとおりのものが作れました。本当にありがとうございます！あとはこれをスクロールビューに追加出来たらいいのですがもう少し勉強してみます。わからなかったら質問させていただくと思いますがその際はよろしくお願いいたします。

Bongo

2020/08/30 11:38 編集

「Image、Buttonを除いた残りをVerticalLayoutGroupで埋める」という挙動をさせるためにVerticalLayoutGroupに付けたLayoutElementのFlexible Widthに大きい値を入れる...なんて箇所がありましたが、あとで試してみたところVerticalLayoutGroupにLayoutElementを追加しなくても、親のHorizontalLayoutGroupのChild Force ExpandをWidthの方だけオフにしてやることで同様の挙動をさせることもできそうでした。あいにく複雑めのレイアウトを作る経験に乏しく、もっぱらChild Force Expandはデフォルトのオン状態のままノータッチとすることがほとんどで見落としていましたが、こっちの方が正当なやり方っぽい気がしてきました。

退会済みユーザー

2020/08/31 05:53

Bongo様補足ありがとうございます！帰ったら試してみますね！ LayoutElementとLayoutGroupって何だか複雑でここからさらにスクロールバーに入れたいとなるともう訳が分からなくなりそうです…。

行動規範の内容に同意します