こんにちは、今日はUnityのuGUIでButtonのサイズを、子オブジェクトのTextのサイズに合わせて変更する方法についてまとめていきます。
確認環境
Version 2018.4.15f1
実装方法
この記事ではVertical Layout Group、Horizontal Layout Group、Grid Layout GroupのLayout Group系のコンポーネントのいずれかと、Layout Elementコンポーネントを用います。
Vertical Layout Group – https://docs.unity3d.com/ja/2018.4/Manual/script-VerticalLayoutGroup.html
Horizontal Layout Group – https://docs.unity3d.com/ja/2018.4/Manual/script-HorizontalLayoutGroup.html
Grid Layout Group – https://docs.unity3d.com/ja/2018.4/Manual/script-GridLayoutGroup.html
Layout Element – https://docs.unity3d.com/ja/2018.4/Manual/script-LayoutElement.html
実装手順
Buttonオブジェクトの追加
新規プロジェクトでGameObject > UI > ButtonからuGUIのButtonオブジェクトを追加します。
これで自動的にButtonオブジェクトの他に、親にCanvasと、子にTextオブジェクトが追加されます。
コンポーネントの追加
この内、CanvasとButtonにVertical Layout Groupコンポーネントを追加、Child Force ExpandのチェックをWidth, Height共に外し、Child Controls SizeのチェックをWidth, Height共に入れます。
これで上の画像のようにTextのサイズに合わせてButtonのサイズが変更され、位置もCanvasの左上に移動するかと思います。
コンポーネント設定値の変更
Buttonの配置レイアウトはCanvasに付与したVertical Layout GroupコンポーネントのChild Alignmentで、ButtonのサイズはTextのサイズに合わせて変更する他、ButtonのVertical Layout GroupコンポーネントのPaddingでも上下左右にパディングを追加できます。
また、TextオブジェクトにLayout Elementコンポーネントを追加し、その設定値からも最低サイズ等の設定が行えます。
