Edited at

【Swift】画面遷移の方法まとめ

今回はSwiftでの画面遷移についてまとめてみました!


1. Segueを使った画面遷移(コードを使わない方法)

Xcodeでボタンを押した時に画面遷移をさせたい場合は以下のようにStoryboardでSegueを用いてボタンと画面を繋ぐのが一般的です。こうすることでボタンをタップした時に画面遷移することができるようになります。

sample1.gif


2. Segueを使った画面遷移(コードを使用)

1の方法だと、例えばラベルに表示した数字が5になったら遷移させるといったことができません。このように、もし何らかの処理後に画面遷移させたい場合はSegueに加えてコードによる記述が必要です。以下の例ではラベルに表示した文字が5になったら次の画面に遷移しています(遷移先画面にはわかりやすいように背景色をつけてあります)。


1. ViewController同士をSegueで繋ぐ

遷移元のViewControllerから遷移先へとSegueを繋ぎます。この時、ボタンからではなくViewControllerからSegueを伸ばしている点に注意してください。

sample2.gif


2. Segueにidentifierをつける

identifierはSegueの名前のようなものです。コードを使って遷移をする場合はどのSegueを使って遷移を行うのか明示しなければならないため、忘れずにつける必要があります。

スクリーンショット 2019-06-11 9.20.40.png


3. コードを記述する

以下のコードが画面遷移部分です。withIdentifierの部分には2でつけたidentifierを入れます。

self.performSegue(withIdentifier: "toSecond", sender: nil)

以下コード全文

import UIKit

class ViewController: UIViewController {

@IBOutlet var numberLabel: UILabel!
@IBOutlet var addNumberButton: UIButton!

var number: Int = 0

override func viewDidLoad() {
super.viewDidLoad()

}

@IBAction func didTapButton() {
number += 1
numberLabel.text = String(number)
if number == 5 {
self.performSegue(withIdentifier: "toSecond", sender: self)
}
}
}

完成形はこんな感じになります。

sample3.gif


3. Segueを使わない画面遷移

1,2の方法はSegueを用いるので、パーツをコードで作成している場合はこの3番目の方法で画面遷移を行う必要があります。


1. StorybordIDをつける

Segueを使わない代わりにStoryboardの画面をインスタンス化するので、StoryboardIDをつけておく必要があります。UseStoryboard IDにチェックをつけるのを忘れないように注意してください。

スクリーンショット 2019-06-11 10.09.23.png


2. コードを記述する

以下の部分が画面遷移のコードです。withIdentifierの部分には1でつけたStoryboardIDを入れてください。

let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController

self.present(secondViewController, animated: true, completion: nil)

以下コード全文


import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

let addNumberButton = UIButton()
addNumberButton.backgroundColor = UIColor.blue
addNumberButton.setTitle("+", for: UIControl.State.normal)
let viewWidth = self.view.frame.width
let viewHeight = self.view.frame.height
addNumberButton.frame = CGRect(x: viewWidth/2, y: viewHeight/2, width: 160, height: 80)
addNumberButton.center = self.view.center
addNumberButton.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)
self.view.addSubview(addNumberButton)

}

@objc func didTapButton() {
let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController
self.present(secondViewController, animated: true, completion: nil)

}

}

完成形

ダウンロード.gif