はじめに

今回は画面の移動について説明します。iPhoneアプリでは複数の画面があってボタンを押すと次の画面が出ることが多いですね〜 その画面の移動を解説します。

Main.storyboardで画面遷移(画面の移動)の設定をする

プロジェクトの作成

まずはプロジェクトを作成しましょう!プロジェクト名は「SegueTest」にしています。Main.storyboardでの画面遷移の方法を「Segue(セグエ)」といいます。プロジェクトの作成方法は以下を参考にしましょう。

Xcodeの基本的な開発の流れ – Xcodeの使い方1

 

View Controller(新しい画面)を追加する

プロジェクトを作成したらInterface Builderから新しい画面を追加しましょう。ナビゲータエリアからMain.storyboardを選択しユーティリティエリアから「View Controller」をInterface Builderにドラッグして新しい画面を配置します。

スクリーンショット_2015-11-30_21_26_05

 

このままだと最初の画面と新しい画面が大きいのでユーティリティエリアからSizeをiPhone5のサイズにして最初の画面のタイトルを「FirstView」新しい画面のタイトルを「SecondView」に設定します。

スクリーンショット_2015-11-30_22_30_33

スクリーンショット_2015-11-30_22_33_56

スクリーンショット_2015-11-30_22_34_15

 

新しい画面のプログラムを記述するSwiftファイルを作成する

今回はプログラムは記述しませんが新しい画面を作成したら必ずその画面のプログラムの記述を行うSwiftファイルの作成を行ってください。そうしないと新しい画面でのプログラム、Outlet、Actionなどの記述ができないです。

Swiftファイルの作成はXcodeのメニューから「File」→「New」→「File…」を選択します。

スクリーンショット 2015-11-30 22.00.35

 

「iOS」→「Source」から「Swift File」を選択してください。

スクリーンショット 2015-11-30 22.00.49

 

ファイル名を「SecondViewController」にして「Create」を選択します。下図は「SecontViewController」にしてしまいましたがツヅリの間違いです^^;;

スクリーンショット 2015-11-30 22.01.12

 

作成した「SecondViewController.swift」に最低限のコードを記述します。簡単は方法は「ViewController.swift」のコードをコピーして「SecondViewController.swift」に貼り付けた後、クラス名を「ViewController」から「SecondViewController」変更します。記述したコードは以下のコードになります。

//
//  SecondViewController.swift
//  SegueTest
//
//  Created by t-higashi on 2015/11/30.
//  Copyright © 2015年 t-higashi. All rights reserved.
//

import UIKit

class SecondViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }   
}

 

新しい画面と「SecondViewController.swift」を関連付けるには下図の設定を行えば終了です。

スクリーンショット_2015-11-30_22_58_22

 

2つの画面にLabelとButtonを配置する

以下の2つの画面のようにLabelとButtonを配置しましょう!オブジェクトの配置の方法は以下の記事を参考にしてください。

Xcodeの基本的な開発の流れ – Xcodeの使い方1

スクリーンショット 2015-11-30 22.25.01

 

Buttonをタップすると画面遷移するように設定する

いよいよ画面遷移の設定をしますね〜 最初の画面のボタンをcontrolキーを押しながら新しい画面にドラッグすると選択肢が表示されるので「Present Modally」を選択します。

スクリーンショット_2015-11-30_21_44_13

 

設定が上手くいくと矢印が表示されます。新しい画面のボタンも同じように設定します。

スクリーンショット_2015-11-30_23_10_59

 

画面遷移の際のアニメーションは作成された矢印を選択してユーティリティエリアの「Transition」から設定できます。いろいろ設定して実行すればどういうアニメーションをするかわかるはずです。

スクリーンショット 2015-11-30 21.53.17

 

実際に実行してみる

設定が完了したら実際に実行してみましょう。最初の画面でボタンをタップすると2つ目の画面が表示され2つ目の画面のボタンをタップすると最初の画面が表示されれば成功です!お疲れ様でした!

スクリーンショット 2015-11-30 21.52.12

スクリーンショット 2015-11-30 21.52.24

 

まとめ

  • Main.storyboardでの画面遷移の仕組みを「Segue(セグエ)」という
  • まず新しいView Controllerを配置しそれに対応したSwiftファイルを作成して新しい画面と関連付ける
  • 画面遷移を行うボタンを配置して遷移先の画面にcontrolキーを押しながらボタンをドラッグする

次回もXcodeについてガンガン解説していきます!

 

エンジニアのためのQ&Aサイト【teratail】