「ゴルトン社長」のはじめの一歩

すげーブログ

世の中のすげーを伝える！

【人生を変える】本を読めば、何でもできる！
トップ > PCスキル > 【iphoneアプリ開発_初心者必見】Segueの基礎・基本

【iphoneアプリ開発_初心者必見】Segueの基礎・基本

PCスキル 初心者向けiPhoneアプリ開発

最終更新日：2020年08月14日
f:id:BlueThree:20200814204123j:plain:w500
家に引きこもっている「ゴルトン社長」です。(twitter : @GoRuton_1stStep)

Segueの基礎・基本

  • Segue：「画面と画面の接続や遷移する際の演出を管理するもの」
  • Segueを使用するとstoryboard上で簡単に画面遷移の設定が出来ます。
  • 例えば「Buttonを押したら他のUIViewControllerに遷移する」という設定を簡単に行う事が出来ます。
  • 具体的にSegueが何を指し示すかというと、storyboardのUIViewControllerとUIViewControllerを繋ぐ矢印の事です。

人気の記事！

人生を変えたい人に向けて「はじめの一歩」を踏み出したい人にオススメ！

www.goruton.com www.goruton.com www.goruton.com www.goruton.com

1)Segueの種類

  • Manual Segueは画面遷移を表現するSegueです。
  • これらのSegueは現在のデバイスのSize Classや、コンテナビューコントローラの種類に応じて、異なる挙動をします。
    Show
  • UINavigationControllerの画面遷移で画面間に関連性(親画面から子画面へ遷移させるなど、階層的な画面構成)があるときの「次」「戻る」などに使い、現在のビューを押し出すようにビューが横から現れます。
    Show Detail
  • UISplitViewControllerのケースで、MasterViewとDetailViewの画面遷移を表示し、2分割されているビューの詳細ビューを置き換えます。
    Present Modally
  • 現在のviewの上に覆いかぶさるように新しいviewを表示します。
    Present As Popover
  • iPad用の種類で、現在の画面の上にポップアップviewを表示します。
    Custom

  • Segueに独自の画面遷移を実装する際に使用します。

  • Relationship Segue

    root view controller
  • NavigationControllerからViewControllerに接続する際に使用する。

2)画面遷移のActionを変更する

f:id:BlueThree:20190703000829p:plain
MainStoryBoard

画面遷移の際，下から上に覆いかぶさるように画面遷移します
この動作を変更するには以下の手順を行います。

①セグエをクリックして選択
②アトリビュートインスペクタを開く
③Transitionが最初は「Default」になっているので、好みの画面遷移方法に変更する。 (画像はPartical Curlです)

Transitionの種類には以下のものがあります。
・Default・・・下から上に覆いかぶさるように画面遷移する。
・Cover Vertical・・・下から上に覆いかぶさるように画面遷移する。Defaultと同じ
・Flip Horizontal・・・くるりと1回転して裏側になるように画面遷移する。
・Cross Dissolve・・・画面全体の色が変化するように画面遷移する。
・Partical Curl・・・下からページをめくるように画面遷移する。

3)遷移画面先から元の画面に戻る接続をする

注意点：画面を戻る場合は前回と同様の手順を行わない - セグエによる遷移方法は、「もとの画面の上に新しい画面を生成し表示する」という動作が基本です - そのため同じ手順を行ってしまうと、上に上にどんどんと画面が重ねられていってしまいます。 - もとの画面に戻る場合は、「上に重ねて表示された画面を取りのぞく」のが重要です

【方法１】dismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?)を使用
  • 引数は2つあり、flagはBOOL型なのでtrueかfalseを指定します。
  • true・・・画面遷移の際にアニメーションを行う
  • false・・・画面遷移の際にアニメーションを行わない
  • 実装したセグエの「Animates」にチェックが入っているか入っていないかの動作をこの引数で指定しています。
  • completionはクロージャと呼ばれるもので、画面遷移が終了した際に行う関数を指定できたりします。
  • その際に{}(中カッコ)で囲みます。何も行わなくて良い場合はnilを記述します。
  • 現在はdismiss(animated: true, completion: nil)で記述
import UIKit

class SecondViewController: UIViewController {   
    @IBAction func toPinkView(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }   
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }   
}

f:id:BlueThree:20190703003504p:plain
MainStoryBoard

【方法２】Unwind segueを使用
  • Unwind segueは画面遷移の「戻る」という動作をstoryboard上で実装できる仕組みです。
戻り先の画面のビューコントローラにコードを記述する
  • 戻り先の画面はピンク画面になりますので、PinkViewControllerクラス内にActionメソッドを記述します
import UIKit

class ViewController: UIViewController {
    /*@IBAction func backToPink(segue: UIStoryboardSegue) {
    }*/
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func backToPink(segue: UIStoryboardSegue) {   //ここの2行を追加
    }
}
  • Action接続をした際に自動的に生成されていたメソッドを記述
  • メソッド名を「backToPink」としていますが、ここは何を指定しても問題ありません。
  • また引数名も「segue」としていますがここも同様です。何を指定しても結構
  • しかし、そのsegueの引数の型は必ず「UIStoryboardSegue」
  • {}内には何も記述しなくてOK
  • このコードを記述することによってstoryboard上で「backToPink」のメソッドを扱うこと可能

f:id:BlueThree:20190703004316p:plain
MainStoryBoard

  • 画像のようにstoryboard上のExit欄に入っている作成したメソッドとボタンを紐づける
  • controlキーを押しながらこの「Exit」アイコンに向かってドラッグ＆ドロップしてください。
  • 「backToPink」メソッドが表示されているかと思いますので、それをクリック。
  • これで緑画面から「Exit」して、「backToPink」メソッドが記述されているビューコントローラに戻れる

f:id:BlueThree:20190703005342p:plain
MainStoryBoard

  • ピンク画面から緑画面に遷移する際にはstoryboard上に矢印が表示されるので、視覚的にわかりやすい
  • しかし，Unwind segueはstoryboard上で実装しており，矢印などは表示されません
  • 視覚的には見づらくなっていますので注意
  • 確認するには，画像のようにドキュメントアウトラインを表示して確認します。
Unwind segueのポイント
  • dismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?)メソッドでは，文字通り現在の画面を取り除くことしかできないので、1画面前にしか戻ることができません。
  • しかしUnwind segueを利用すると、今回のような2画面ではなくもっと複数の画面でアプリが作成されている場合でも、任意の画面に戻ることができます。

参考リンク

最後に！！

f:id:BlueThree:20200805191056j:plain:w500

最後までご覧いただき、本当にありがとうございます！！

最近は、たくさんの読者さんから「コメント」や「メッセージ」が届くようになりました！！
皆さんと会話できて嬉しいですし、コメントで毎日励まされています。

ありがとうございます！

これからも、ゴルトン社長は「毎日」ブログを更新しています！ www.goruton.com www.goruton.com www.goruton.com www.goruton.com www.goruton.com

皆さんから人気がある記事

www.goruton.com www.goruton.com www.goruton.com www.goruton.com www.goruton.com

まとめ記事

www.goruton.com www.goruton.com www.goruton.com www.goruton.com www.goruton.com www.goruton.com www.goruton.com