【Unity】タブ切り替えの UI をコードを書かないで作る

【Unity】タブ切り替えの UI をコードを書かないで作る　[⇒PCページへ]

2019年11月12日02:03 Unity

　今回はスクリプト無しでタブ切り替え（TabStrip, Tabs Widget）を作る方法を紹介しよう。と言っても私が考えたわけではなく、内容的には海外記事の翻訳したものを、自分なりにアレンジしたものだったりする(笑)。

・Unity UI: Easy Tabs (no scripting)

　タブの UI の実装に関しては、大抵スクリプトで画像を切替える方法がオーソドックスな気がするが、今回のように Toggle を上手く利用する方法もなるほどと感じたので、日本語記事にしておくと初心者にも役に立つんじゃないかと考えた（ググってもなぜかタブ実装の詳しい日本語記事が見つからなかったので）。それに何にしてもコードを書かずに済ませられるなら、それだけ労力を減らせるので、そういった方法は積極的に導入していくと良いと思う（アプリが大きくなるにつれ、大量のコードの管理・デバッグに時間を取られてしまうため）。

■タブの backgroud 画像を用意する
■タブの UI を作る

(※) Unity 2018.4.12f1 / Windows10(x64) で確認

■タブの backgroud 画像を用意する

　とりあえず、参考記事を真似して、もっと簡単な画像を用意したので、必要ならダウンロードして使って欲しい。もちろんダウンロードした素材は自由に加工して使って貰っても構わない（zip には psd と完成例の unitypackage も付けておく）。

＞＞サンプルの素材をダウンロード
(Google Drive を利用)

　プロジェクトビューで適当なフォルダを作ったら、zip に入っている「Tab_altas.png」をドラッグドロップなどして、インポートして欲しい（.unitypackage はこの記事の完成例となっている。プレファブ化して利用するのも良いだろう）。

　「Tab_altas.png」をインポートしたら、まずはインスペクタで「Texture Type」を「Sprite (2D and UI)」に、「Sprite Mode」を「Multiple」にしよう。これは１つの画像を複数のスプライトとして利用する設定だ。

　次にそのままインスペクタから「Sprite Editor」を開いて、上部の [Slice]を押して、「Type」で「Grid By Cell Size」で「Pixel Size」を 64x64 にして、[Slice] して欲しい。これでグリッド状に 64x64 でスプライトが等分割される。

　分割したら、各スプライトをクリックすると、右下に「Sprite」の設定が出るので、Name（名前）や Border（引き伸ばしの領域）を設定しておこう。名前は左から「Tab_panel」「Tab_item」（わかり易い名前なら何でも良い）と付けておき、Border は各スプライトの LRTB を全て 18 にしておいて欲しい。完了したら、右上の [Apply] を押しておく。画像の引き伸ばし領域の設定に関しては以下の記事がわかり易いだろう。

・UnityのSpriteを引き伸ばす際に綺麗に引き伸ばす方法 SpriteEditor

■タブの UI を作る

　スプライトの設定ができたら、本題のタブの UI を作っていこう。まずは背景のベースとなる画像（Image）を１つ置く。場所はどこでも良いが、とりあえず中央に置いておきたいので RectTransform の Pos を全て (0, 0, 0) にしておく。

　また、ついでに Image を置いたときに自動で追加された Canvas の「Canvas Scaler」を適当に設定しておく。ここでは「UI Scale Mode」を「Scale With Screen Size」に、「Reference Resolution」を「1920 x 1080」にしておいた。この辺りは自分の環境によって変えて欲しい。

　先ほど置いた Image も「TabPanel」と名前を変えておき、サイズも適当に決めておこう。ここでは 600 x 500 にしておいた。そして Image に「Tab_altas」の分割スプライトの「Tab_panel」を設定しておく

　次にタブの画像を並べるレイアウト用の空オブジェクトを作ろう。「TabPanel」をヒエラルキーで選択して、右クリックで「Create Empty」して、名前を「TabContainer」としておく。そして、[Add Component] から「Toggle Group」と「Horizontal Layout Group」を追加しておく。設定は自分の環境に合わせればよいが、「Child Control Size」と「Child Force Expand」をオンにしておけば、自動でレイアウトしてくれる。

また「TabContainer」の RectTransform は Pivot や引き伸ばしなどの設定をしておこう。これも画像などのサイズによるので、自由に設定しても構わない。設定例はキャプチャを参考にして欲しい。

　TabContainer を適当に設定したら、次に各タブを作っていこう。TabContainer を右クリックして、Toggle を置く。初期位置がおかしくなってたりしたら、一旦 Toggle をオフ→オンにすると自動レイアウトになっている場合、再配置される（セーブなど何らかの操作をすると再計算される）。

　置いた Toggle はわかり易いように「Tab 1」とでも名前を変えておき、「Toggle」コンポーネントの「Group」に、先ほど「TabContainer」にアタッチした「Toggle Group」を登録しておく。

　そして「Tab 1」を展開し、「Bacground」の Image にスプライト「Tab_atlas」の「Tab_item」を設定する。Color も A（アルファ）を下げておく。RectTransform は適当で良いが、上下ストレッチを設定しておこう。

　また、更に下の階層の「Checkmark」にも「Tab_item」を設定し、同じように RectTransform をストレッチ設定にしておく。あとはテキストとなる「Label」も適当に設定しておくと良いだろう。

　タブが１つできたら、「Tab 1」を [Ctrl + D] で適当に複製しよう。名前は適当に付けて欲しい。また複製したタブの「Toggle」コンポーネントの「IsOn」は全てオフにしておく（これも設定したら、一旦オブジェクトをオフ→オンすると再描画できる）。

　タブを並べたら、次に切り替える内容を作ろう。これも自分の環境によって何でも構わないが、「TabPanel」以下に適当に同じサイズの空オブジェクトをタブと同じ数だけ作り、内容を各オブジェクトに入れておく、ここでは「PageContainer」を作って「Page 1～3」を作ってテキストを入れておいただけだ。好きにやって貰って構わない。これらも「Page 1」以外は非表示にしておく（タブのオン/オフの初期状態に合わせておく）。

　Page 1～3 を作ったら、各対応タブに戻り、「Toggle」コンポーネントの「On Value Changed (Boolean)」にコールバックを設定しよう。これは Toggle.IsOn のオン/オフ状態が変化したときに、実行されるメソッドなどを登録するものだ。ここに各対応する「Page」の表示/非表示を設定する。具体的には「Tab 1」には「Page 1」の「GameObject.SetActive (Dynamic)」をセットし、同様に「Tab 2」には「Page 2」を、「Tab 3」には「Page 3」をセットする。ここでは表示の切り替えだけなのでコードを書く必要はないが、色々コールバックに仕込みたいなら以下の記事を参考にして欲しい。

・【Unity】【C#】UnityEvent, Action, delegate, interface でのコールバック実装方法とインスペクタでの登録