Tsuの雑記¯\_(ツ)_/¯

主に製作メモ・備忘録として使用。製作したアプリのリンクもあります。

【Unity】UI.Dropdown をアスペクト比で設定する【C#】

Unity のドロップダウンメニューを,画面サイズ比で制御する方法です。

本稿では,重要なオブジェクトやスクリプトについてのみ御説明いたします。

その他のオブジェクトに関しては,Rect Transform コンポーネントの Anchors や Text コンポーネントの Best Fit 等をカスタマイズしてください。

(2019/11/24)記事内容を修正しました。

(Unity 2018.3.0f2)

Template

Anchors の Min の Y は,ボタンの縦幅に対するメニューの縦幅の比の負数。

Anchors の Max の Y は,0。

Scroll Rect コンポーネントの Vertical Scrollbar は,None に変更。

UnityEditor の Inspector ウィンドウで Template オブジェクトを操作している画像
メニューの縦幅をボタンの3倍にしたい場合

Viewport

Anchors の Y は,Min と Max の差がボタンの縦幅に対するアイテムの縦幅の比。

(2019/11/24)意図どおりに設定できない事が分かったため,上記の文章を取り消しました。

Anchors の Min の Y は,0。

Anchors の Max の Y は,1。

UnityEditor の Inspector ウィンドウで Viewport オブジェクトを操作している画像
メニューの各項目もボタンと同じ縦幅にしたい場合
この数値を推奨

Content

Anchors の Y は,Min と Max の差が (0.5 ÷ 同時に表示したい項目数)。

Max の方を 1 で固定してください。

UnityEditor の Inspector ウィンドウで Content オブジェクトを操作している画像
メニューの同時表示数を3にしたい場合

Item

Anchors の Min の Y は,0。

Anchors の Max の Y は,2。

UnityEditor の Inspector ウィンドウで Item オブジェクトを操作している画像
この数値を推奨

Sliding Area

スクロールバーのサイズに合わせて拡大・縮小するため,Anchors を操作する必要はありません。

現時点で設定中は崩れて見えますが,Play 時には正しく表示されます。

項目が見切れているドロップダウンメニューの画像
このように表示されていても大丈夫

スクリプト

このままではスクロールバーが表示されないため,スクリプトに記述します。

// UI 関連の記述を簡略化できる
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour
{
    [SerializeField] ScrollRect scrollRect = null;
    [SerializeField] Scrollbar scrollbar = null;

    void Start()
    {// Vertical Scrollbar を設定
        scrollRect.verticalScrollbar = scrollbar;
    }
}

scrollRectには Template オブジェクト,scrollbarには Scrollbar オブジェクトをそれぞれアタッチします。

scrollRect と scrollbar 変数にアタッチしている画像
それぞれのコンポーネント型を持ったオブジェクトを設定

これで,画面サイズに応じて拡大縮小するドロップダウンメニューの完成です。

各項目がボタンと同じ縦幅で同時に3択まで表示されるドロップダウンメニューの画像
各項目がボタンと同じ縦幅で同時に3択まで表示される