トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

タブ切り替えをuGUIのToggleで作る【Unity】

uGUIのToggleだけでタブ切り替えを作れるらしい!コード書かなくてもできるんだ!

fantom1x.blog130.fc2.com

できた

f:id:bibinbaleo:20200625174156p:plain

環境:Unity2019.3

構成

f:id:bibinbaleo:20200625174159p:plain

TabBackGround

背景

f:id:bibinbaleo:20200625174826p:plain

空のGameObject

空のGameObject

子にタブになるボタン(Toggle)を入れる。Rectがついている。タブの大きさにした。

f:id:bibinbaleo:20200625174156p:plain

これにToggleGroupと、必要ならタブのボタンをいい感じに並べるためのLayoutGroupをつける

f:id:bibinbaleo:20200625174334p:plain

Toggle

GameObjectの下にToggleを置く。

f:id:bibinbaleo:20200625174528p:plain

設定はこんな感じにした

f:id:bibinbaleo:20200625174202p:plain

Groupに親のToggleGroupをつける

最初にオンになるToggleはIsOnにする

見た目の調整

Unity2019.3なら、押したときに色が変わるだけでいいなら、Checkboxは要らない。

Toggleをボタンの大きさにして、BackgroundとLabelもstretchでその大きさに合わせる。

f:id:bibinbaleo:20200625180023p:plain

ToggleのSelectedColorを押したときの色にしたらいい。

f:id:bibinbaleo:20200625175900p:plain

Unity2018.4だとSelectedColorなかった;;なのでCheckboxは消さずに、あれの色を変える。

f:id:bibinbaleo:20200626090711p:plain

ボタンのImageはBackgroundについているImageのSpriteの形が反映される。角丸にした。

パネル

GameObjectの下にページのUIをおく。(どこでもいいけど)

f:id:bibinbaleo:20200625175020p:plain

 

Toggleのイベント

Toggleのイベントに、対応するページのUIを入れる

GameObject>SetActive(Dynamic boolの方)!!!

f:id:bibinbaleo:20200625172441p:plain

すると、Toggleが選択されている時はSetActiveがtrueになって、選ばれていない時はfalseになる!すごい!!そんな機能あったんだ

f:id:bibinbaleo:20200625172610p:plain

Dynamic boolについては下に書いてた。この本昔読んだな

uGUIではじめるUnity UIデザインの教科書 - 岩井雅幸 - Google ブックス

 

ただ、Startの時点では自動でfalseにはしてくれなかったので、最初にActiveじゃないUIは非アクティブにしないとダメ?

完成!

f:id:bibinbaleo:20200625175731g:plain

最後に

タブというのはこういうの。下のボタンを押したら画面が切り替わる

f:id:bibinbaleo:20200625224955p:plain

まとめました。

bibinbaleo.hatenablog.com