質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

Q&A

解決済

1回答

2801閲覧

Unity2D 複雑なUIの作り方

退会済みユーザー

退会済みユーザー

総合スコア0

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

0グッド

0クリップ

投稿2020/08/29 13:01

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
イメージ説明
Imageは、縦横比が1:1にしたいです。
タイトルの高さを1とし、内容は2の高さ。
Button(選択)は、表示されればサイズは特に問いません。

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

試したこと

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

できないこと

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

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

2019.4.9f1
Windows10

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

図1

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

図2

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

図3

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

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が可能な限り広く占有するだろうと考えました。

図4

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

図5

図6

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

図7

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

図8

投稿2020/08/30 02:10

Bongo

総合スコア10807

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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って何だか複雑で ここからさらにスクロールバーに入れたいとなると もう訳が分からなくなりそうです…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問