【Unity】Toggleを利用してメニューボタンを作る

スポンサーリンク
Unity
スポンサーリンク
スポンサーリンク

ToggleGroupを作成

Canvas下にUI->ImageでMenuという名のオブジェクトを作り、アンカーは横幅がストレッチ(青矢印)のものを設定します。
ToggleGroupとHorizontalLayoutGroupコンポーネントを追加します。これでToggleをまとめ、トグルボタンを横並びに自動整理する事ができます。
HorizontalLayoutGroupはSpacingを設定し、Control Child SizeはWidthにチェック、Child Force ExpandはWidthとHeightにチェックします。

Toggleボタンの追加

Menuの子にUI->Toggleを必要なだけ追加します。
デフォルトで選択させておきたいボタンのIs Onをチェックします。
Target Graphicにはボタンの背景画像(デフォルトでは配下のBackground)、Graphicにはボタン選択時の画像(デフォルトではトグルボタン配下のCheckmark)が選択されています。GroupはMenuを指定します。

Toggleボタンの編集

デフォルトのようにタップするとチェックマークが付くので良ければそのままで良いですが、ボタンをタップすると色が変わるようなデザインにしたい場合、

  • BackgroundとCheckmarkのサイズをボタン画像として適当なサイズに揃える
  • Backgroundの画像を非選択時のボタン画像、Checkmarkの画像を選択時のボタン画像にします。Backgroundの画像をそのまま流用し選択時用のColorを設定してもいいです。

最後にOn Value ChangedにToggleボタン押下時の処理を追加します。

1 Star2 Stars3 Stars4 Stars5 Stars (まだ投票されていません)
読み込み中...

コメント

タイトルとURLをコピーしました