どうも、ささおです！
今回はStoryboardを使わない画面遷移の方法をまとめていこうと思います。
チームで開発しているとGit(Github)などを利用します。
しかし、StoryboardとGitの親和性が低いためよくコンフリクトを起こし、めんどくさいです。
なのでチームで開発する場合、Storyboardを使わない方法を取っている場合が多いです。
そこでStoryboardを使わない画面遷移の方法をまとめていきます。
（UITabbarを忘れた。ごめんなさい）
Contents
present
これは下からニュッと画面が出てくる画面遷移です。
それまで見ていた画面の上にドンッと乗っかり被さるのが特徴です。
ログイン画面へ行く画面遷移として利用されることが多いです。
「ここからはログインしないと利用できませんよ〜」みたいな感じでニュッと出てきます。
準備
画面遷移先のUIViewControllerを用意してください。
僕は「NextViewController」という名前でファイルを作成しました。なんでも大丈夫です。
まだ空っぽです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import UIKit class NextViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } |
次にViewControllerに画面遷移発火用のUIButtonを配置して、
画面遷移する関数を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let nextButton = UIButton(frame: CGRect(x: 0,y: 0,width: 100,height:100)) nextButton.setTitle("Go!", for: .normal) nextButton.backgroundColor = UIColor.blue nextButton.addTarget(self, action: #selector(ViewController.goNext(_:)), for: .touchUpInside) view.addSubview(nextButton) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } @objc func goNext(_ sender: UIButton) {// selectorで呼び出す場合Swift4からは「@objc」をつける。 let nextvc = NextViewController() nextvc.view.backgroundColor = UIColor.blue self.present(nextvc, animated: true, completion: nil) } } |
UIButton(frame: CGRect(x: 0,y: 0,width: 100,height:100))
ここでボタンを作成しています。
ボタンの大きさ、置く座標を指定しています。
今回は左上に、横幅100、縦幅100の正方形のボタンを用意しています。
setTitle(“次へ行こう！”, for: .normal)
ボタンに表示する文字を指定しています。
.normalは通常時を表します。
他にも、.highlightでタップした瞬間の表示する文字を指定することができます。
addTarget
これによってタップした時の処理を指定しています。
addSubview
これまでのコード色をつけたりカスタマイズしてきたボタンを配置するための関数です。
goNext関数
この関数での流れは
遷移先を作成：
NextViewController()
↓
遷移先画面に色をつける（色をつけないと真っ黒になります）：
view.backgroundColor = UIColor.blue
↓
presentによる画面遷移：
present(遷移先, ニュッの動くを出すか, 遷移時の処理を追加するか)
このように指定します。
戻る方法
戻るための記述をNextViewController.swiftに記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import UIKit class NextViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let backButton = UIButton(frame: CGRect(x: 0,y: 0,width: 100,height:100)) backButton.setTitle("back！", for: .normal) backButton.backgroundColor = UIColor.white backButton.addTarget(self, action: #selector(NextViewController.back(_:)), for: .touchUpInside) view.addSubview(backButton) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } @objc func back(_ sender: UIButton) {// selectorで呼び出す場合Swift4からは「@objc」をつける。 self.dismiss(animated: true, completion: nil) } } |
ほぼViewController.swiftと同じですが、戻る関数backが違います。
dismiss()はpresentでの画面遷移から戻るための関数です。
ニュッとpresentして
スッとdismissさせます。
これはやや複雑ですが、一番よく見る遷移かもしれません。
左にスライドするように画面遷移し、このように左上に戻るボタンが出てくるのが特徴です。
presentとは違い、もぐりこむような画面遷移で、ツイッターで遊んでいる時の画面遷移の多くがこの画面遷移です。
準備
ここで難しいのはUINavigationControllerを使用しなければいけないというところです。
UINavigationControllerを利用した画面遷移は全てUINavigationController内で行われます。
つまりNextViewControllerとNext2ViewControllerはUINavigationControllerの子供にする感じです。
今回はViewControllerからNextViewControllerへpresentで画面遷移し、NextViewControllerからNext2ViewControllerへUINavigationControllerを利用した画面遷移をします。
先ほどと同じようにNext2ViewControllerを作成してください。（ダサダサネーミングは許してください・・・）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import UIKit class Next2ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } |
ViewController.swiftを編集
変更するのはgoNextだけです。
UINavigationControllerのroot（最初に表示させる）ViewControllerにnextVCを指定して、
そのnaviVCにpresentします。
なので、正確にはNextViewControllerに画面遷移するというよりも、UINavigationControllerに画面遷移します。
|
1 2 3 4 5 6 |
@objc func goNext(_ sender: UIButton) {// selectorで呼び出す場合Swift4からは「@objc」をつける。 let nextVC = NextViewController() let naviVC = UINavigationController(rootViewController: nextVC) nextVC.view.backgroundColor = UIColor.blue self.present(naviVC, animated: true, completion: nil) } |
NextViewController.swiftを編集
戻るボタンの隣にnavigationで画面遷移するボタンを配置しました。
goNextがその関数です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import UIKit class NextViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let backButton = UIButton(frame: CGRect(x: 0,y: 0,width: 100,height:100)) backButton.setTitle("back！", for: .normal) backButton.backgroundColor = UIColor.white backButton.addTarget(self, action: #selector(NextViewController.back(_:)), for: .touchUpInside) view.addSubview(backButton) let goButton = UIButton(frame: CGRect(x: 100,y: 0,width: 100,height:100)) goButton.setTitle("Go！", for: .normal) goButton.backgroundColor = UIColor.red goButton.addTarget(self, action: #selector(NextViewController.goNext(_:)), for: .touchUpInside) view.addSubview(goButton) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } @objc func back(_ sender: UIButton) {// selectorで呼び出す場合Swift4からは「@objc」をつける。 self.dismiss(animated: true, completion: nil) } @objc func goNext(_ sender: UIButton) { let next2vc = Next2ViewController() next2vc.view.backgroundColor = UIColor.red self.navigationController?.pushViewController(next2vc, animated: true) } } |
goNext
UINavigationControllerの画面遷移も記述的にはpresentと変わりません。
遷移先を作成：
Next2ViewController()
↓
遷移先画面に色をつける（色をつけないと真っ黒になります）：
view.backgroundColor = UIColor.blue
↓
pushによる画面遷移：
UINavigationControllerでの画面遷移はpushViewControllerを使います。
|
1 |
self.navigationController?.pushViewController(next2vc, animated: true) |
戻る方法
実はUINavigationControllerを利用すると勝手に戻るボタンが配置させます。
一旦起動してみてみましょう。
「< Back」というボタンが左上にあるはずです。
ですが、一応戻るコードも載せておきます。
|
1 |
self.navigationController?.popViewController(animated: true) |
popViewControllerで戻ることができます。
ささお
一番わかりやすいコードでの画面遷移情報でした。