Help us understand the problem. What is going on with this article?

TabbedApplicationを複数のstoryboardとコードによる画面遷移で実装する

More than 5 years have passed since last update.

storyboardファイルが複雑になるのがあまり好きではないので、前回の投稿に引き続き、今度はTabBarControllerを使ったタブベースのアプリを作るときのメモです。
前回に引き続き、画面遷移はコードで実装し、storyboardファイルはアプリの各画面毎に作成するものとします(需要があるか分かりませんが…)。また、TabBarControllerに追加するViewControllerはUINavigationControllerを使って扱うようにします。

今回の記事でやること
・アプリの各画面毎にstoryboardファイルを用意してデザインを作る
・TabBarを使ったアプリをつくる
・TabBarにUINavigationControllerをのせる
・コードでこれらの遷移を実装する

プロジェクトの設定とstoryboardの準備

Xcode6では新しくプロジェクト(SingleViewApplicationの場合)を作成すると、「Main.storyboard」が自動で作成され、プロジェクト設定の「General -> Deployment info -> Main Interface」の項目が「Main」と設定されています。今回はNavigationControllerによる画面遷移をコードからやりたいので、この項目は削除します。

次に、Xcodeの「File->New->File」から新たにstoryboardファイルを作成します(ここでは、「TabBarController.storyboard」とします)。作成後、InterfaceBuilderでファイルを開いてTabBarControllerを配置します。
前回の投稿で少し詳しく書いていますが、インスペクタの「Show the Atributes inspector」タブの「View Controller」にある「is Initial View Controller」のチェックを入れるのを忘れないようにします。

TabBarControllerに追加するViewを作る

同じように、Xcodeの「File->New->File」から新たにStoryboardファイルを作成し、InterfaceBuilderでViewControllerを配置します。今回は例として「FirstViewController.storyboard」と「SecodViewController.storyboard」の2つを作成します。

同様に、Xcodeの「File->New->File」からUIViewControllerのサブクラス「FirstViewVontroller.swift」「SecondViewController.swift」を作成しておきます。

作成後、「FirstViewController.storyboard」「SecondViewController.storyboard」それぞれで、設置したViewControllerを選択した状態で、インスペクタの「Show the Identity inspector」タブの「Custom Class」の項目にそれぞれFirstViewController、SecondViewControllerを設定します。

しつこいようですが、インスペクタの「Show the Atributes inspector」タブの「View Controller」にある「is Initial View Controller」のチェックを入れるのも忘れないようにします。これがないと下記コードでは動作しません。

Appdelegate.swift

AppDelegate.swiftで上記で作成したViewControllerを接続します。また、画面遷移を簡単にするため、作成したViewControllerはUINavigationControllerを使って扱うので、TabBarControllerにはUINavigatinControllerを追加して、そこに先ほど作成したViewControllerを追加します。

AppDelegate.swift
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    var tabbarController: UITabBarController?

    var navigationController1: UINavigationController?
    var navigationController2: UINavigationController?

    var storyboard: UIStoryboard = UIStoryboard()

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        // set up 1st tab page
        storyboard = UIStoryboard(name: "FirstViewController", bundle: NSBundle.mainBundle())
        var firstViewController: UIViewController = storyboard.instantiateInitialViewController() as UIViewController
        self.navigationController1 = UINavigationController(rootViewController: firstViewController)


        // set up 2nd tab page
        storyboard = UIStoryboard(name: "SecondViewController", bundle: NSBundle.mainBundle())
        var secondViewController: UIViewController = storyboard.instantiateInitialViewController() as UIViewController
        self.navigationController2 = UINavigationController(rootViewController: secondViewController)


        // set up tab bar controller
        storyboard = UIStoryboard(name: "TabBarController", bundle: NSBundle.mainBundle())
        tabbarController = storyboard.instantiateInitialViewController() as? UITabBarController
        tabbarController?.setViewControllers(NSArray(objects: navigationController1!, navigationController2!), animated: false)


        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        self.window?.rootViewController = tabbarController
        self.window?.makeKeyAndVisible()

        return true
    }

    // 省略・・・
}

TabBarのアイコンを変更したいときは、

var tabbarItem1 = UITabBarItem(title: "Item1", image: UIImage(named: "image"), selectedImage: UIImage(named: "image-selected"))
self.navigationController1?.tabBarItem = tabbarItem1

とすると変更できます。

各NavigationControllerから新たな画面に遷移したい場合は、同様に新たにstoryboardファイルを作るか、既存のstoryboardに新しくViewControllerを追加してstoryboard IDなどのIdentityプロパティを使ってstoryboardからViewControllerを取得してpushViewController()等のメソッドを用いて遷移することができます。

UIViewControllerを使って、新たにstoryboardで作成したViewControllerに遷移する方法についてはこちらの記事に簡単に書いてあります。

moshisora
新しく覚えたことを書き記しています。 初歩的な内容が多くなると思いますが、どしどし突っ込んでいただけると幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした