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

サトリク

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

 

動作環境

item Version
Swift 5.3
Xcode 12.0.1

バージョンの確認方法

 

この講座の完成イメージ

この講座でナビゲーションコントローラーを使いこなせるようになりましょう。

今回作るアプリの機能はこんな感じです。

  • 「進むボタン」を押すと、次の画面に遷移する。
  • 「ナビゲーションバー変更ボタン」を押すと、ナビゲーションバーの色とタイトルが変更される。
  • 左上の「設定ボタン」を押すと、ナビゲーションバーを使わず設定画面に遷移する。

 

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

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

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

 

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

 

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

 

アプリ開発手順

プロジェクトの作成

STEP.1
プロジェクト作成

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

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

①「Product Name」に、NavigationControllerと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

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

Practiceを選択しましょう。

②「Create」をクリック

完了

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

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

まずは、Storyboardでレイアウトを完成させましょう。

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

Main.storyboardを選択

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

(Embed In)を選択

④「Navigation Controller」をクリック

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

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

STEP.2
実行

①iPhone11に変更

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

STEP.3
確認

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

少し見づらいですが、上の部分にナビゲーションバーがあります。

STEP.4
色を変更

①NavigationControllerの「Title」をクリック

(Show the Attributes inspector)をクリック

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

④「Title Color」をWhite Colorに変更

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

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

(Show the Attributes inspector)をクリック

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

STEP.6
実行

実行してみましょう。

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

STEP.7
ViewControllerを配置

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

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

ViewControllerをドラッグ&ドロップ

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

STEP.8
ボタンを配置

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

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

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

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

①ボタンを広げる

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

③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といいます。

まずは、この2つの画面遷移を覚えておきましょう。

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

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

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

STEP.1
ボタンを複製

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

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

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

(Show the Attributes inspector)をクリック

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

STEP.3
コードと分割

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

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

STEP.4
紐づける

16行目と17行目の間に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 = "HelloWorld"
    }
    
}

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

STEP.3
実行して確認

このように、ボタンを押すと、ナビゲーションバーのタイトルHelloWorldになるはずです!

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 = "HelloWorld"
        navigationController?.navigationBar.barTintColor = UIColor.orange
        navigationController?.navigationBar.tintColor = UIColor.red
    }
    
}


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

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

STEP.5
実行して確認

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

完了

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

まとめ

学んだこと
  • ナビゲーションコントローラーとは、ナビゲーションバーを使って画面遷移すること
  • Embed In>Navigation Controllerで簡単にナビゲーションバーにできる
  • ナビゲーションバーで画面遷移するときは、showで接続する
  • ナビゲーションバーで画面遷移したくない場合は、PresentModallyで接続する
  • ナビゲーションバーの上に置くボタンをはButtonではなく、Bar Button Itemを置くこと

 

サトリク

独学でアプリ開発は厳しくないですか?

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

気軽にご相談ください!

詳細はこちら

 

 

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


もっとみる