徒然エンジニアブログ

徒然エンジニアブログ

理系東大生がプログラミングを中心に様々なことについて情報発信していきます!

【Swift】NavigationControllerを使った画面の遷移の方法(storyboardを使わない)

今回はNavigationControllerを使った画面遷移を見ていきたいと思います。
以前説明したようにstoryboardは使わない方が個人的には良いと思っているので今回も使いません。
storyboardを使わない方がいい理由については以前書いたのでこちらを見てください。
turedureengineer.hatenablog.com

コードを見た方が早いと思うのでまずは見てみてください。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    var navigationController = UINavigationController(rootViewController: ViewController())
}

AppDelegate.swiftの中にあるこの関数はアプリの開始時に呼ばれるのでここでnavitionControllerの設定をしておくと良いと思います。
rootviewとはその名の通り画面遷移するときに起点となりviewのことです。

今回はデフォルトで存在するviewController()を設定します。

実際に遷移させてみる

そして遷移先のViewController2.swiftも作っておきましょう。
new fileからcocoaTouchを選択してサブクラスをUIViewControllerとします。


遷移したのがはっきりわかるようにViewController.swiftのviewDidLoadの中に
self.view.backgroundColor = UIColor.red


ViewController2.swiftのviewDidLoadの中に
self.view.backgroundColor = UIColor.yellow
と書いておきましょう。

viewControllerからviewController2に遷移するためのボタンをナビゲーションバーの右に作っていきます。

navigationItem.rightBarButtonItem = UIBarButtonItem(title: "遷移する", style: .plain, target: self, action: #selector(move))

これで「遷移する」という文字が右上に出るようになります。

そしてこれを押されたときにmove関数が呼ばれます。
move関数の中で遷移先のviewをインスタンス化して実際に遷移させます。

func move(){
    let view2 = ViewController2()
    navigationController?.pushViewController(view2, animated: true)
}

こんな感じです。

titleのところをいじるとボタンに表示させる文字を変えることができます。
これで右上のボタンを押すと遷移するようになります。


実際に遷移させてみるとわかりますが、遷移した後のviewの左上に自動で戻るボタンができて押すと戻ることができます。



さて基本はこれで完成なので次はカスタマイズの方法について見ていきましょう。

色々なカスタマイズ

タイトルを表記

タイトルの表記は非常に簡単です。

navigationItem.title = "viewの名前"

これでおっけいです。
viewDidload関数の中にでも書いておくといいでしょう。

ナビゲーションバーの色の変更

self.navigationController?.navigationBar.barTintColor = UIColor.red

ナビゲーションアイテム(戻るとかのこと)の色の変更

 self.navigationController?.navigationBar.tintColor = UIColor.white

ナビゲーションタイトルの表示

self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]

これをコピペするだけでおっけいです。
全てviewDidload関数の中でおっけいです。

色は好きなように変えてください。
ナビゲーションバーの色を変えた場合デフォルトのままだと文字が見にくいかもしれないのでそこも適宜調整してください。