Swiftで遊ぼう! on Hatena

あしたさぬきblogでやってた初心者オヤジのiOSプログラミング奮闘記がHatenaに来ました

Swiftで遊ぼう! - 206 - ビューコントローラーにビューコントローラーを載せる

Swiftで遊ぼう!の古い記事-> Life-LOG OtherSide
2015年5月12日:編集

      • -

いままでHatenaの存在を知っていましたが、意識に上ることはありませんでした。Swift言語のシンタックス・ハイライトが使えるようになったというニュースをたまたま目にして飛びついたんです。その頃のブログ執筆の煩わしさと相まって移行の決断は早かったです。

地元で話題になることの多い「あしたさぬきブログ」には旧知のブロガーがいて、まとまったアクセス数もあったので、タグ付け、カテゴリー設定、イメージのアップなど面倒な作業も我慢していました。

しかし、Hatenaに来て楽になりました。移ってくるまで想像もできなかったことです。

結果としてプログラミングの勉強に没頭できるようになれました。

      • -

昨日の続きです。

SwitchingViewControllerを作ったので、2つのUIViewControllerを載せていきます。

載せていくという表現は正しくないでしょう。SwitchingViewControllerに2つのUIViewControllerをプロパティとして持たせます。

プロジェクト・ナビゲーターのMY Fourth Projectグループを選んで右クリック(Control + クリック)してメニューからNew File...を選びます。

iOS SourceCocoa Touch Classを選んでNextボタンを押して、Class名にBlueViewControllerを入力します。

Akso create XIB fileのチェックは外し、LanguageSwiftにして、Nextボタン、Createボタンと選択します。

同様にUIViewControllerクラスのOrangeViewControllerも作ります。

f:id:yataiblue:20150123214031j:plain

3つのViewControllerを並べて準備ができました。

次にSwitchingViewControllerにコードを加えて2つのViewControllerを切り替えられるようにしていきます。

まず、コードでViewControllerクラスのプロパティを持たせます。

普通は、Main.storyboardから明示的に(Ctrl + ドラッグ)してOutletを作成します。しかし、Main.storyboardに無いので、コードで書いてやらなければなりません。@IBOutletという枕詞は当然無く、privateキーワードでプロパティを作ります。privateということはSwitchingViewController外から呼べません。

class SwitchingViewController: UIViewController {
    private var blueViewController: BlueViewController?
    private var orangeViewController: OrangeViewController?
    
    @IBAction func switchViews(sender: UIBarButtonItem) {
        // Coding comes here.
    }
...
}

注意:上記コードにおいて、オリジナル本では、ビューコントローラーのプロパティ宣言に強制アンラップを意味する「!」を使っていましたが、オプショナル「?」が正しいと思われるため変更しましたm(_ _)m

少なくとも@IBキーワードの付いているOutletやActionはストーリーボード上のオブジェクトと繋がりがないといけません。

今は、コードだけ書いて後で繋げていきます*1

次はSwitchingViewControllerのコンテンツ・ビューを作っていきましょう*2

アプリを立ち上げた時、最初に現れるルートコントローラーは、SwitchingViewControllerで、そのコンテンツビューは、ビュー・コントローラー切り替えるボタンを画面下部にもつツールバーになります。

Main.storyboardを選び、Switching View Controllerを選択した後に。オブジェクト・ライブラリからToolbarを選んで画面の下端にドラッグ・ドロップします。

f:id:yataiblue:20150124142206j:plain

ストーリーボードにオブジェクトを設置してまずすることは、コンストレイントの設定です。

ツールバーは画面のサイズにかかわらず下端にへばりつかせます。

ピン留めしてやるのですが、Pinボタン*3を押すとポップアップウインドウが出てきます。

f:id:yataiblue:20150124144526j:plain

最初に、Constrain to marginsのチェックボックスを外します。このチェックマークを外すことで、このオブジェクトが載っているルート・ビューの端っこと距離を保つようになります。チェックマークが入ると、画面端にあるHIGで規定されたブルーラインから距離を保つようになります。距離を「0」にして、左右と下の赤い点線を実線に変えます。

Update FramesのポップアップメニューからItems of New Constraintsを選びます。

これを選択することで、Constraintsの設定と同時にオブジェクトをルール通りに動かします。

「Add 3 Constraints」ボタンを押します。

ラン(Cmd + R)して確かめてみると、どちらにローテーションしてもツールバーは下に位置します。

今日はここまで。

*1:ちゃんとXcodeではコネクションがあるかどうか確認できますアシスタント・エディタの@IB枕詞のついている行の頭に丸印が付いているのを確認してください。コネクションが無ければ白丸ですよね。private枕詞の頭には何も付いてませんね。

*2:UIViewControllerにはルートビューはデフォルトで設置されますが、その上にビューのサブビューになるツールバーをコンテンツビューとして載せます

*3:Pinボタンが分からなければ、「Swiftで遊ぼう! - 204 - フィリングを使ってレイアウト調整(Auto Layoutのまとめ)」の後半部分に説明はあるので確認してください。