【Unity】【UI】可変サイズのボタンを作る

f:id:halya_11:20180131200810p:plain:w300

テキストの長さに応じてサイズが変わるボタンを作ります。
最初地味に混乱する部分なのでメモ。

作り方

こういうのはとりあえず作り方を覚えてから理解したほうがいいので、いきなり作り方から。

  1. 普通にボタンを作る(GameObject > UI > Button)
  2. Buttonオブジェクトに VerticalLayoutGroup をアタッチ
    • ControlChildSize の Width / Height にチェック
    • ChildForceExpand はチェックを外す
  3. Buttonオブジェクトに ContentSizeFitter をアタッチ
    • HorizontalFit と VerticalFit を PreferredSize に変更

f:id:halya_11:20180131203236p:plain:w300

あとは VerticalLayoutGroup の Padding を調整すればこのようなボタンができます。

f:id:halya_11:20180131200836g:plain:w300

解説

まず VerticalLayoutGroup の ControlChildSize について。

これにチェックを入れると、子要素(テキスト)の RectTransform が、テキストの内容に応じて自動的に変更されます。

次に ContentSizeFitter について。

これに関しては、Preferred Size にすることで子要素のサイズに自分のサイズを合わせます。
なので、横幅だけ合わせたければ Horizontal Fit だけを変えればいいです。

これらを組み合わせることで、「子要素のRectTransformが自動的に変更され、親要素はそのサイズに合うようにリサイズされる」という要件を満たしたボタンが実現します。