Swift

Swift: Storyboardを使わない画面遷移まとめ!


どうも、ささおです!

 

今回はStoryboardを使わない画面遷移の方法をまとめていこうと思います。

チームで開発しているとGit(Github)などを利用します。

しかし、StoryboardとGitの親和性が低いためよくコンフリクトを起こし、めんどくさいです。

なのでチームで開発する場合、Storyboardを使わない方法を取っている場合が多いです。

 

そこでStoryboardを使わない画面遷移の方法をまとめていきます。

(UITabbarを忘れた。ごめんなさい)

 

present

これは下からニュッと画面が出てくる画面遷移です。

それまで見ていた画面の上にドンッと乗っかり被さるのが特徴です。

ログイン画面へ行く画面遷移として利用されることが多いです。

「ここからはログインしないと利用できませんよ〜」みたいな感じでニュッと出てきます。

準備

画面遷移先のUIViewControllerを用意してください。

僕は「NextViewController」という名前でファイルを作成しました。なんでも大丈夫です。

まだ空っぽです。

 

次にViewControllerに画面遷移発火用のUIButtonを配置して、

画面遷移する関数を作成します。

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に記述していきます。

ほぼViewController.swiftと同じですが、戻る関数backが違います。

dismiss()はpresentでの画面遷移から戻るための関数です。

ニュッとpresentして

スッとdismissさせます。

 

NavigationControllerによる画面遷移

これはやや複雑ですが、一番よく見る遷移かもしれません。

左にスライドするように画面遷移し、このように左上に戻るボタンが出てくるのが特徴です。

presentとは違い、もぐりこむような画面遷移で、ツイッターで遊んでいる時の画面遷移の多くがこの画面遷移です。

準備

ここで難しいのはUINavigationControllerを使用しなければいけないというところです。

UINavigationControllerを利用した画面遷移は全てUINavigationController内で行われます。

つまりNextViewControllerとNext2ViewControllerはUINavigationControllerの子供にする感じです。

今回はViewControllerからNextViewControllerへpresentで画面遷移し、NextViewControllerからNext2ViewControllerへUINavigationControllerを利用した画面遷移をします。

 

先ほどと同じようにNext2ViewControllerを作成してください。(ダサダサネーミングは許してください・・・)

 

ViewController.swiftを編集

変更するのはgoNextだけです。

UINavigationControllerのroot(最初に表示させる)ViewControllerにnextVCを指定して、

そのnaviVCにpresentします。

なので、正確にはNextViewControllerに画面遷移するというよりも、UINavigationControllerに画面遷移します。

 

 

NextViewController.swiftを編集

戻るボタンの隣にnavigationで画面遷移するボタンを配置しました。

goNextがその関数です。

goNext

UINavigationControllerの画面遷移も記述的にはpresentと変わりません。

遷移先を作成:

Next2ViewController()

遷移先画面に色をつける(色をつけないと真っ黒になります):

view.backgroundColor = UIColor.blue

pushによる画面遷移:

UINavigationControllerでの画面遷移はpushViewControllerを使います。

 

戻る方法

実はUINavigationControllerを利用すると勝手に戻るボタンが配置させます。

一旦起動してみてみましょう。

「< Back」というボタンが左上にあるはずです。

 

ですが、一応戻るコードも載せておきます。

popViewControllerで戻ることができます。

 

 


コメントを残す

*