【Swift/Xcode超入門】ナビゲーションコントローラーを使ったアプリを作ってみよう

いつも通り、Create a new Xcode project>Appでプロジェクトを作成します。

①「Product Name」に、NavigationControllerと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

①Practiceを選択しましょう。

②「Create」をクリック

これでプロジェクト作成が完了です。

①Main.storyboardを選択

②画面の上のバーをクリック

③ (Embed In)を選択

④「Navigation Controller」をクリック

これだけで、ナビゲーションバーを設定できました。

左側にもう一つボードが配置されましたが、そのボードはナビゲーションバーのレイアウトを変更するためのボードです。ナビゲーションバーのレイアウト一括で変更したい場合は、そのボードでレイアウトを変更します。

①iPhone11に変更

②左上の再生ボタンで実行

①NavigationControllerの「Title」をクリック

② （Show the Attributes inspector）をクリック

③「Bar Tint」を任意の色に変更(画像の色は、#516C9D)

④「Title Color」をWhite Colorに変更

①画面のナビゲーションバーをクリック

② （Show the Attributes inspector）をクリック

③「Title」に1つ目の画面と入力

実行してみましょう。

次に、遷移先の画面を作成します。

①プラスボタンをクリック

②ViewControllerをドラッグ&ドロップ

これで遷移先の画面を配置できました。

画面遷移する際のボタンを作成します。

①プラスボタンをクリック

②Buttonを画面の真ん中にドラッグ&ドロップ

①ボタンを広げる

②ボタンの「Title」を進むに「Font」をSystem 30.0に、「TextColor」をWhiteColorに変更

③Backgroundのカラーを任意の色に変更

進むボタンを押したら、もう一つの画面に遷移するようにしましょう。

controlを押しながら、右の画面にドラッグ&ドロップ

①右側の画面のナビゲーションバーをクリック

② （Show the Attributes inspector）を選択

③「Title」を次の画面に変更

次は、アプリでよくある設定画面を作成します。

①プラスボタンをクリック

②ViewControllerをクリック

①プラスボタンをクリック

②Labelを下に配置した画面に配置

①Labelを選択

② （Show the Attributes inspector）をクリック

③Textを設定画面に変更、FontをSystem 30.0に変更

①プラスボタンをクリック

②Bar Button Itemをナビゲーションバーの左側にドラッグ&ドロップ

①ナビゲーションバーボタンを選択

② （Show the Attributes inspector）をクリック

③「Title」を設定に変更

ボタンが見にくいので色を変更します。

①NavigationControllerのナビゲーションバーをクリック

② (Show the Attributes inspector)をクリック

③「Tint」をwhite Colorに変更

設定ボタンをcontrolを押しながら、設定画面にドラッグ&ドロップします。

Optionを押しながらドラッグ&ドロップすると、オブジェクトを複製できます。

①ナビゲーション変更を選択

② （Show the Attributes inspector）をクリック

③Titleをナビゲーションバー変更に変更

①1つ目の画面のバーを選択

②command + option + control + enterでコード画面と2分割

16行目と17行目の間にcontrolを押しながらドラッグ&ドロップ

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func changeNavBarItemAction(_ sender: Any) {
        //ボタンを押したときに呼ばれる場所
    }
    
}

先ほど接続したchangeNavBarItemActionの中に処理を書くと、ボタンを押したときに呼ばれ、処理が行われます。

この中に書いていきましょう。

以下のように、編集しましょう。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func changeNavBarItemAction(_ sender: Any) {
        navigationItem.title = "HelloWorld"
    }
    
}

navigationItem.title = "HelloWorld"この1行で、ナビゲーションバーのタイトルを変更することができます。

では次は色を変更してみましょう。

以下のように書き換えましょう。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func changeNavBarItemAction(_ sender: Any) {
        navigationItem.title = "HelloWorld"
        navigationController?.navigationBar.barTintColor = UIColor.orange
        navigationController?.navigationBar.tintColor = UIColor.red
    }
    
}

navigationController?.navigationBar.barTintColor = UIColor.orangeは、ナビゲーションバーの色をオレンジにするコードです。

navigationController?.navigationBar.tintColor = UIColor.redは、ナビゲーションバー上のボタンの色を赤にするコードです。

これで、今回作りたいアプリが完成しました！