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

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

ただいまの
回答率

90.46%

  • Unity

    5678questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

UnityのuGUIの自動レイアウト機能で、LayoutElementの大きさを可変させたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,780

camblian

score 42

大きさが可変するLayoutElementをつくりたい

縦にノードが追加されていくScrollViewを最終的につくりたい。
ノードの数は一定ではなく、実行中に増減する。
画面のサイズにあわせて、同じ比率で、つまり、画面サイズがちょっと変わっても、
UIのレイアウトが大きくずれることがないようにScrollViewをつくりたい。

イメージ説明
▲ 実行中 EditorのGameViewの大きさを変更すると…

イメージ説明
▲ 画面サイズが小さくなると、ScrollViewの大きさは変わるのにノードの大きさは変わらない

発生している問題

Canvasの子要素にあるUI要素は、RectTransformのアンカーを打って、offsetを0にすれば、画面サイズにおける比率によって、サイズが可変するUI要素として表示させることが出来る。
でもLayoutElementの場合、Elementの大きさはLayoutGroupが計算した値をサイズにとる。
RectTransformが、可変するUI要素を想定して設計されている以上、ScrollRectのContent以下の子要素も、可変する自動レイアウトとして設定できる方法が用意されているはずである。

試したこと

ノードにアンカーを打ち、ContentSizeFitterコンポーネントをContentに追加して、HorizontalFitとVerticalFitの両方をPrefferedSizeに設定した。
なんとなく、大きさは可変しているようだが、ScrollViewが広くなったら、余白が大きくなるだけだった。
ノードの大きさにはさして変化がなく、他のUI要素のように、画面の大きさが変わるのにあわせてグイグイ大きさが変わるわけではなかった。

そうではなく、例えば、ScrollViewの横幅に合わせてノードも横に長くなったりしてほしい。縦幅に関しては現状で満足している。

他のRectTransformオブジェクトのように、ScrollViewの範囲が大きくなったら、それに合わせてノードも大きくなってほしい。
小さくなった時には、当然ノードも小さく表示されるようになってほしい。

どなたか、uGUIの自動レイアウト機能について、知識を授けていただけないでしょうか。

イメージ説明
*訂正 : 画像ではCanvasから水色の矢印が引かれていますが間違いです。正しくは、その下のScrollViewから矢印が引かれ、ScrollViewオブジェクトのInspectorに矢印を向けています。

追記

イメージ説明

ひとつ気になっていたことでしたが、ContentのContentSizeFitterコンポーネントに
このような警告が表示されていました。

このメッセージについて検索したところ、次のような公式マニュアルを発見しました。

https://docs.unity3d.com/ja/current/Manual/HOWTO-UIFitContentSize.html

どうやら、ContentSizeFitterとLayoutGroupはお互いにノードの大きさを変更しようとして競合することがあるようです。

この情報をもとに、ContentSizeFitterをリムーブして、VerticalLayoutGroupだけを残しました。

イメージ説明

イメージ説明

すると、画面が大きくなるのに合わせて、横幅が伸びてScrollViewいっぱいに、推奨サイズに近くなるべく大きくなってくれるようになりました。
しかし、今度は縦の幅が、画面が小さくなるのに比例して縦長に伸びるようになってしまいました。

なぜこの問題にこだわっているか

この問題を解決したかったのは、例えば下図のような状態では、端末に合わせて画面サイズを変更し、UIが大きさを変えた時に、GUIが機能しなくなってしまう恐れがあったからです。

イメージ説明
▲ 文字が見えなくなってしまっている

もし図のような状態になれば、ButtonやToggleコンポーネントがアタッチされていても、押せなかったり、何のボタンなのか文字が見えないことでわからない、ユーザーにはバグのように見えてしまう、など潜在的な不安要素を残します。

いただいた回答をもとにトライした結果、一応ボタンが隠れていて見えないとか、押せないといったことは、ご覧のとおりなくなりました。ですが、まだ完璧にコントロールできているとは言えません。
画面が小さくなった時に、ノードが縦長になるということは、GUIのレイアウトが変わってしまっていますから、見やすいデザインを考える上では障害になります。

改めて、縦の長さについて、画面が小さくなっても、同じくらいの比率を保った矩形を、自動レイアウトに出力させる方法について質問させていただきます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

Nodeのプレハブの設定で、Rect Transformのstretchを画像のように設定して、
Layout Elementの設定で、Preferred Heightのみ設定してみたらどうでしょう。
設定

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/27 17:35

    ご回答ありがとうございます。
    ご提案いただいた方法を試してみたところ、Nodeの横幅がまったくない状態で表示されました。
    高さだけのすっごく細いUIのように表示されてしまったので、どうやら横の幅もなにか値をいれてやらなければならないようです。
    またなぜか、アンカープリセットが固定されており、変更できませんでした。
    何度やっても同じプリセットが自動的に選択されてしまいます。

    このことから「誰かアンカーの位置を決めているヤツがいるのでは」と思い立ち、おそらくそれは"VerticalRayoutGroup"か"ContentSizeFitter"のどちらかだと思い、そのあたりで色々やっているうちに少し前進が見られたので追記したいと思います。

    キャンセル

+1

こんにちは。
あなたの質問文章を読ませていただきました。
私の対処法でいくと(写真を貼れません、ごめんなさい)
HierarchyCanvasをクリックし
一番右のInspectorの画面に移ります。その中の
[canvas Scaler(Script]のところを見てください。
そして
[UI Scale Mode]のところを{Scale With Screen Size}に変更してください。
これで基本、形は崩れないと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Unity

    5678questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。