見出し画像

Swift 勉強11.ナビゲーションコントローラ👉画面の切り替え(1)

1.画面構成

1-1.NEWプロジェクトにナビゲーションコントローラを作る

1-2.ナビゲーションコントローラをストーリーボードに追加

1-3.ナビゲーションコントローラの上部をドラッグして選択する。右のインスペクター領域で[Attributes inspector]ボタンをクリックし、[Title]を"メイン画面"で入力する。

2.ビューの追加とバーボタンでビュー切り替え

2-1.ビューを追加する。ビューコントローラをドラッグして、メイン画面コントローラに置く。

2-2.[bat button item]を選択。システムアイテムの[Edit]を選択する。

3.ビューの切り替え作業

3-1.[Edit]バーボタンをマウスの右ボタンでクリックしたまま右のビューコントローラに持ってきておく。
3-2.[Action Segue]>[Show]を選択

3-3.右ビューコントローラのナビゲーションバーをドラッグして選択し、[Attributes inspector]で[Title]を[修正画面]に変える。

\ ここまで確認 /

[Edit]ボタンをクリックすると、[修正画面]に移動して、[メイン画面]ボタンをクリックすると、[メイン画面]に移動する。

4.ボタンを活用して、ビューの切り替え

4-1.修正画面に[Label]を追加&[完了]ボタンを追加とメイン画面で、[修正]ボタンを追加

4-2.ストーリーボードの中央にあるセグウェイを選択。[Attributes inspector]ボタンをクリックし、[editBarButton]に変更します。
(他のセグウェイと区別するために)

4-3.マウスの右ボタンでメイン画面の[修正]ボタンを選択して変更画面のビューコントローラに。[Action Segue]>[show]

4-4.修正ボタンが選択されているセグウェイを[editButton]に変更

5.ビューの切り替え区別する

5-1.スウィフトソースファイルを追加

5-2.マザーボードから[修正画面ビューコントローラを選択し、Class[EditViewControllor]を選択/ ストーリーボードのビューコントローラと「EditViewController.swift」ファイルがリンクされた。

6.アウトレット変数を追加する

6-1.Labelを選択した後エディタ領域にドラッグ。アウトレット変数を接続

6-2.アクション関数を追加する
Labelの右側にある[終了]ボタンをクリックした後、エディタ領域にドラッグ。ボタンのアクション関数を追加

7.ビューの切り替えを区別するためにコーディング作業
セグウェイを利用して、画面を切り替えるには、prepare関数をビューコントローラクラスの下に追加

override runc prepare(for segue:UIStoryboardSegue、sender:Any?){
}

8.セグウェイのIDに基づいて異なる動作をするように、if / elseを利用。各セグウェイごとに異なる文字列を送信

override runc prepare(for segue:UIStoryboardSegue、sender:Any?){
let editViewController = segue.destination as!
          EditeViewController
 if segue.identifier == "editButton" {
 //ボタンをクリックしたとき
 } else if segue.identifier == "editBarButton" {
 //バーボタンをクリックしたとき
 }
}

- 各セグウェイ名ごとに別の文字列を受け取って表示するためにEditViewController.swiftファイルを修正

ラベルのテキストを直接制御することができないため、文字列変数textWayValueを作る。

class EditViewController: UIViewController {
   var textWayValue: String = ""
   
   @IBOutlet var lblWay: UILabel!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
       lblWay.text = textWayValue
   }

- セグウェイをお持ちのeditButtonの場合、「segue:use button」の文字列を送信し、セグウェイアディ基editBarButton場合(バーボタンをクリックした場合)には、「segue:use bar button」の文字列を送信

override  func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  let editViewController = segue.destination asEditViewController
  if segue.identifier == "editButton" {
        editViewController.textWayValue = "segue : use button"
    } else if segue.identifier == "editBarButton" {
       editViewController.textWayValue = "segue : use bar button"
    }
}

- EditViewController.swiftを選択して変更画面の[完了]ボタンをクリックすると、メイン画面に移動するようにコードを入力

  @IBAction func btnDone(_ sender: UIButton) {
       _ = navigationController?.popViewController(animated: true)
   }

\ここまで/

メイン画面で[編集]ボタンをクリックすると、編集画面に移動し「segue:use button」が表示され、メイン画面で、[Edit]をクリックすると、編集画面に移動し「segue:use bar button」が表示される。