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

この講座では、ほとんどのアプリに使われているナビゲーションバーを使ったアプリを作成します。

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

ざっくりとこんな感じのアプリを作っていきたいと思います。

NavigationControllerナビゲーションコントローラーとは?

ナビゲーションコントローラーとは、ナビゲーションバーを使って画面遷移することです。

ナビゲーションバーというのは、これです。

 

ナビゲーションコントローラーを使えば、画面遷移したときに、勝手に戻るボタンが作成されます。

 

このように簡単な画面遷移ができるのが、ナビゲーションコントローラーです。

アプリ開発手順

プロジェクトの作成

STEP.1
プロジェクト作成

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

STEP.2
プロジェクトの設定

①Product Name に、NavigationControllerと入力

②LanguageはSwiftを選択

③User Interfaceは、Storyboardを選択

④チェックなし

⑤Nextをクリック

STEP.3
プロジェクトの保存

前の講座で作ったiOSAppDevPracticeを選択しましょう。

②Createをクリック

完了

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

 

storyboard(画面レイアウト)の編集

STEP.1
ナビゲーションバーを設定

①Main.storyboardを

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

③Editor > Embed In > NavigationControllerを選択

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

STEP.2
実行

①シミュレーターの端末をiPhone11に変更

②再生ボタンで実行

STEP.3
確認

ナビゲーションバーがあることを確認しましょう。

この上の部分がナビゲーションバーです。

STEP.4
色を変更

①NavigationControllerのTitleをクリック

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

③Bar Tintを任意の色に変更(画像の色は、#4c84bc)

④Title Colorを白に変更

STEP.5
タイトルの名前を変更

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

 (Show the Attributes inspector)をクリック

③Titleにsatorikublogと入力

STEP.6
実行

実行してみましょう。

こんな感じになっていれば、成功です。

STEP.7
ViewControllerを配置

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

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

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

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

STEP.8
ボタンを配置

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

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

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

STEP.9
ボタンのレイアウトを調整

①ボタンを広げる

②ボタンのfontをSystem 30.0文言を進むに変更

③Backgroundのカラーを変更

STEP.10
画面遷移

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

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

Showを選択

ナビゲーションコントローラーで画面遷移したいなら、Showを選択します。

STEP.11
タイトルを変更

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

 (Show the Attributes inspector)をクリック

③Titleを次の画面に変更

STEP.12
画面を配置

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

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

②ViewControllerをクリック

STEP.13
Labelを配置

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

②Labelを三つ目の画面に配置

STEP.14
設定画面のレイアウト

①Labelを選択

 (Show the Attributes inspector)をクリック

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

STEP.15
ナビゲーションバーボタンを配置

①プラスボタン

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

ポイント!

ナビゲーションバーに配置するボタンは、Buttonではなく、bar Button Itemを使うようにしましょう。

STEP.16
ナビゲーションバー ボタンの文字変更

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

 (Show the Attributes inspector)をクリック

③Titleを設定に変更

STEP.17
ボタンの色を変更

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

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

 (Show the Attributes inspector)をクリック

③Tintをwhite Colorに変更

STEP.18
設定画面に遷移

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

Present Modallyを選択

ナビゲーションバーを使わない画面遷移にしたい時は、PresentModallyを使います。

完了
これでストーリーボード上の作業は終了です。

 

実行して確認

このように、進むを押したら、次の画面にスライドするような形で、遷移します。この遷移の仕方が、showです。

設定ボタンを押したら、設定画面が下かか出てきて遷移します。この遷移の仕方は、Present Modallyといいます。

 

コードからNavigationBarのプロパティを変更:準備

今までは、全てStoryboard上でナビゲーションバーのレイアウトを変更してきましたが、コードでもできます。

次は、コードでナビゲーションバーを変更していきましょう。

STEP.1
ボタンを複製

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

STEP.2
ボタンタイトルを変更

①ナビゲーション変更

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

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

STEP.3
コードと分割

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

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

STEP.4
紐づける

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

①NameにchangeNavBarItemActionと入力

②Connectをクリック

完了
これで準備は完了です。

コードからNavigationBarのプロパティを変更:コーディング

STEP.1
確認
import UIKit

class ViewController: UIViewController {

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

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

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

STEP.2
タイトルを変更

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

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 = "サトリクブログ"
    }
    
}

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

STEP.3
実行して確認

このように、ボタンを押すと、ナビゲーションバーのタイトルが変更されるはずです。

STEP.4
色を変更

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

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 = "サトリクブログ"
        //追加
        navigationController?.navigationBar.barTintColor = UIColor.orange
        navigationController?.navigationBar.tintColor = UIColor.red
    }
    
}

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

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

STEP.5
実行して確認

ボタンを押したらナビゲーションバーの色と、ナビゲーションバーのボタンの色が変わるようになります。

完了

これでアプリは完了です。

まとめ

学んだこと
  • ナビゲーションバーとは
  • Editor > Embed In > NavigationControllerで簡単にナビゲーションバーにできる
  • ナビゲーションバーの画面遷移の際は、showで接続する
  • ナビゲーションバーで画面遷移したくない場合は、PresentModallyで接続する
  • ナビゲーションバーの上に置くボタンをはButtonではなく、Bar Button Itemを置くこと
  • コード上でも見た目をいろいろ変えることができる。

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる