UI要素をスクリプトで配置したときに真ん中に寄せる(センタリングする)方法

UI要素をスクリプトから生成し、センタリングして並べて配置したかったのですが
なかなかうまくいかなかったのでうまくいったときのを備忘録として残しておきます。

具体的にやりたかったこと

ステージ選択画面の各ステージのボタンをPrefab化して、
スクリプトからそのPrefabをステージ数の分だけ生成して縦に並べて配置したかった。

このとき左右にマージンを少しとり、中央配置したかった。

やりかた

  • 親オブジェクトのpivotをすべてx=0.5にする
  • Prefabのpivotもx=0.5にする
  • PrefabのAnchor Presetsをtop-stretchにする
  • PrefabのLeft、Rightに任意のマージン幅を指定する(センタリングするなら同じ値)
  • スクリプトで生成した後、transform(またはRectTransform)を取得し、localPositionをx=0にする(yは任意。並べるならPrefabの高さに応じて指定)

void CreateStageBar(int stageNum, int play, int clear){
    GameObject bar = (GameObject)Instantiate (stageButtonPrefab, contentTrans);
    Button btn = bar.GetComponent<Button> ();
    TextMeshProUGUI tm = bar.GetComponentInChildren ();

    bar.transform.localPosition = new Vector3 (0, 140f - 160f * stageNum, 0);
    tm.text = "STAGE " + stageNum.ToString ();
}

(関係ない部分も入っていますが一応スクリプトも載せました)

これでできました!

ひとつのやり方に過ぎないので、あくまでも僕の場合はこれでやりました、ということで。
備忘録程度にメモっておきました。

コメント