Xcode 新規タブアプリケーション作成
タブアプリケーション
Xcode12.3から以前のようにタブバーを使用するアプリを作ろうと思い、新規プロジェクトを立ち上げて『Tabbed Application』を選択しようとしても選択欄がなくなりました。
以前はこのように『Tabbed Application』を選択することができました。
今後はどのようにしてタブアプリケーションを使ったアプリを作ればいいのかわからなかったので、調べて解決したやり方を説明していきたいと思います。
このやり方は以前からあるXcodeのMain.storybordでのやり方です。
SwiftUIを使用したやり方ではありません。
SwiftUIを使用したタブバーの参考ページはこちら
【SwiftUI】タブ（TabView）を追加する詳細な手順
目次
新規プロジェクト作成
Xcode画面を開いて『Create a new Xcode project』をクリック。
以前のXcodeとはnew Xcode projectの選択画面が異なっています。
iOS→Appを選択してNextをクリック。
以前の『Single View App』の選択画面が今は『App』となっています。
Product Nameを『tabBarController』とします。
Interfaceは『Storyboard』にします。
入力と選択ができたら『Next』をクリック。
保存する画面が表示されます。
保存する場所はDesktopにしておきましょう。
Desktopを選択して『Create』をクリック。
これで新規プロジェクトが立ち上がります。
開発画面からtabBarControllerを作る
Xcodeの開発画面から『Main.storyboard』をクリックして、iPhoneの画面を表示させてください。
次にiPhone画面をクリックしてください。
クリックすると上に赤枠で囲んである『View Controller』などの３つのアイコンが表示されます。
この状態でXcodeと書かれている上記メニュー欄の『Editor』をクリックします。
『Editor』を選択後『Embed In』➡︎『Tab Bar Controller』をクリックしてください。
これで『Tab Bar Controller』画面が表示されました。
これだけではまだタブアプリケーションはできないので続きを説明していきます。
補足
最初にiPhone画面をクリックしないと手順通りに進めても『Tab Bar Controller』を選択することができません。
View Controllerを追加する
開発画面から上部にある『＋』のLibraryをクリックしてください。
『Objects』画面の中から『View Controller』を矢印の方向にドラッグ＆ドロップさせてください。
このように『Tab Bar Controller(本体)』とは別の画面を２つ表示できている状態にしてください。
現在の状態では、『Tab Bar Controller』右のiPhone画面しかつながっていません。
『Tab Bar Controller』と表示されているiPhoneを下の接続されていないiPhoneの方にMacの『control』ボタンを押しながらドラッグ＆ドロップしてください。
そうすると上の黒い画面が表示されるので『view controllers』をクリックしてください。
このように『Tab Bar Controller』のiPhoneと下のiPhoneに線がつながっていれば大丈夫です。
タブ画面と画面の色を変える
このままだとビルドしてもわかりづらいのでタブ画面タイトルと画像を変更したいと思います。
タブバー１にする上のiPhoneの赤く囲っているところをクリック。
そして、右上の矢印のある『Show the Attributes inspector』をクリックして『Bar Item』を表示します。
Bar Item欄の『Title』を『First』にしてImageは選択欄からお好きなものを適当に選んでください。
以上のようなやり方でもう一つのタブバー２画面には『Title』を『Second』にImageはFirstとは違う画像を選んでください。
iPhone１画面を変えるのはiPhone画面をクリックして右上の赤枠で囲んでいる『Show the Attributes inspector』になっていることを確認できたら、『Background』からお好きな色を選択してください。
以上のようにiPhone２画面には違う色を選択してください。
これでシュミレーターか実機でビルドすればタブアプリケーションの画面が変更されたアプリが確認することができます。
開発画面ではこのようになりました。
iPhone実機画面
『First』画面
『Second』画面
新規ViewController.Swiftの作り方
今のままだとプログラムを書き込んで両方動かすことができません。
なので新しく『ViewController.Swift』を追加する方法を説明していきます。
今の状態だとiPhone１画面のシステムしかつながっていません。
また、ViewController.Swiftの名前づけだとわかりづらいので新規で『FirstViewController』『SecondViewController』とした『ViewController.Swift』を作りたいと思います。
まず始めに赤枠の『ViewController.Swift』を削除します。
『ViewController.Swift』のところで右クリックをしてメニュー画面を表示させたら、『Delete』をクリックしてください。
この画面が表示されたら『Move to Trash』をクリックして削除してください。
一から作れるので大丈夫です。
新規の『ViewController.Swift』の作り方はXcodeのメニュー画面から『File』→『New』→『File』を選択してクリックして下さい。
このような画面が表示されたら、『iOS』→『Cocoa Touch Class』→『Next』をクリック。
この画面では『Class』を『FirstViewController』という名前付けにして下さい。
また、『Subclass』は『UIViewController』になっていることを確認して下さい。
そして、『Next』をクリック。
『Group』『Targets』が『tabBarController』になっていることを確認して『Create』をクリックして下さい。
左側の『FirstViewController』をクリックしてこの画面が表示されれば大丈夫です。
そして最後に『Main.storyboard』→『First』→『Show the Identity inspector』のCustom Classの『Class』を『FirstViewController』と選択して下さい。
Fと入力するとおそらく予測変換で『FirstViewController』と表示されるので決定して下さい。
これでコードを書いて反映される状態になりました。
『SecondViewController』の方も同じ手順でできますので名前付けを『SecondViewController』に変えて設定して下さい。
以上で終了です。
参考
UITabTBarControllerでのタブの切り替え、UINavigationControllerを用いた画面遷移
【Swift 初心者必見】いきなりアプリを作る！タブバーの作り方
【SwiftUI】タブ（TabView）を追加する詳細な手順
