12
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

極力StoryBoardを使わないXcodeによるSwiftでのiOS開発 2

Last updated at Posted at 2017-09-20

前回「極力StoryBoardを使わないXcodeによるSwiftでのiOS開発 1」の続き
今回は,ViewからViewの遷移を行なっていきます.Home画面のボタンをタップしたら次の画面に遷移させます.
題名にあるように,Storyboardは極力使わず,XIBを使用します.

#環境
私は下記の環境で開発を行なっております.

  • 端末: Macbook Air
  • OS: macOS Sierra
  • 言語: Swift 3

#Cordingに入る前に
様々なWebサイトや参考書をみると,Storyboardを使いこなして,iOSアプリを作成しています.しかし,この手法で行くと,機能ごとに切り分けて開発するときに,とても不便であると感じます.そこでXibファイルを多用して開発していきます.

#それでは,本題に.まずは準備から
私は今現在,下記の画像のようなファイル構造になっています.

スクリーンショット 2017-09-18 16.35.42.png

###では,Swift_work上に[HomeViewController.swift]と,[HomeViewController.xib]を作成してください.

  1. [New File]を選択
  2. iOSタブの[Cocoa Touch Class]を選択 -> [Next]
  3. Class名[HomeViewController] Subclass[UIViewController] Also create XIB fileにチェックし,Language[Swift] -> [Next]

スクリーンショット 2017-09-18 16.59.07.png
4. 次の画面で[Create]

###同様に[HomeView.swift]を作成します.

  1. [New File]を選択
  2. iOSタブの[Cocoa Touch Class]を選択 -> [Next]
  3. Class名[HomeView] Subclass[UIView] Language[Swift] -> [Next]
  4. 次の画面で[Create]

これで[HomeViewController.swift]と,[HomeViewController.xib]と,[HomeView.swift]が作成されました.

HomeViewController.swiftとHomeView.swiftの邪魔なコメント文を削除すると下記のコードになっていると思います.この作業は何万回と繰り返すので,覚えてください.こんな丁寧に今後記述いたしません.

HomeViewController.swift
port UIKit

class HomeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
HomeView.swift
import UIKit

class HomeView: UIView {

}

ちなみにHomeViewController.xibを開くと下記のような画面が表示されます.

スクリーンショット 2017-09-18 17.20.15.png

###XibファイルとViewを紐付けします.

  1. HomeViewController.swiftの画面でViewを選択する(iPhone画面を一回タップする)
  2. [Show the identity inspector]のタブを選択して,[Custom Class]の[Class]をHomeViewにする.

スクリーンショット 2017-09-18 17.26.31.png

以上の手順を踏まえることで,XibとViewが紐付けされ,Xib <-> Viewの相互関係が構築されるわけです.これで,一通りのファイル作成の手順とViewとController,Xibの関連付けが完了いたしました.

#画面遷移後のViewとそのControllerの作成
上記で行なったことと同様の操作をして, [NextViewController.swift],[NextViewController.xib][NextView.swift]を作成してください.Xib <-> Viewの関連付けを忘れないでくださいね.下記のようなファイル構成になっていればOKです.

スクリーンショット 2017-09-18 17.50.14.png

#画面遷移の手順について
今回は,HomeView上のButtonをタップしたら,NextViewに遷移するようにいたします.
では,処理の流れを説明いたします.

  1. HomeViewのButtonをタップ
  2. Buttonのタップをアクションをトリガーとして,HomeViewControllerの画面遷移メソッドが実行
  3. NextViewControllerが呼び出され,NextViewControllerがNextViewを表示

つまり,HomeView.swift -> HomeViewController.swift -> NextViewController.swift -> NextView.swiftといった順番で呼び出されて行くわけです.

細かいところは,別の機会に説明するので,この場ではとりあえず画面遷移できるようにしちゃいます.

#HomeViewに画面遷移トリガー用のButtonを設置
HomeViewcontroller.xibの画面で,下記のようにButtonを設置してください.
スクリーンショット 2017-09-18 18.06.57.png

ButtonとHomeView.swiftをConnectします.下記の@IBAction func tapButton(_ sender: UIButton) {の部分ですね.このtapButtonメソッド内部でControllerで呼び出すメソッドを書きます.

HomeView.swift
import UIKit
// とりあえず,書いといて
protocol HomeViewDelegate {
    func tapButtonToNextView()
}

class HomeView: UIView {
  //とりあえず,書いといて
    var homeViewDelegate: HomeViewDelegate? = nil
    
  //Buttonをタップ後の処理
    @IBAction func tapButton(_ sender: UIButton) {
        //下記のように記述すると,HomeViewControllerのtapButtonToNextViewが実行される
        if let homeViewDelegate = homeViewDelegate {
            homeViewDelegate.tapButtonToNextView()
        }
        
    }
}

その他の部分はおまじないみたいなものだと思ってください.別の機会に説明します.

#NavigationControllerを設定
ここだけ不本意ながら,Storyboardを使います.
下図のような構成とします.詳細を説明いたします.

  • 図を見るとわかると思いますが,Viewを削除し,Controllerのみにしてあります
  • Navigation ControllerとHome View ControllerのRelationShip Segue -> Root View Controllerにしてあります
  • Navigation Controllerを[is initial View Controller]にしてます.

スクリーンショット 2017-09-18 22.58.32.png

#HomeViewControllerを編集 -> 画面遷移完了
下記のようにコードを書いてください.
これで実行すると,HomeViewからNextViewに画面遷移されます.

HomeViewController.swift

import UIKit

class HomeViewController: UIViewController {
  //HomeViewをConnect
    @IBOutlet var homeView: HomeView!
}

//Lifecycle
extension HomeViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        //とりあえず,書いといて
        homeView.homeViewDelegate = self
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

//Delegate
extension HomeViewController: HomeViewDelegate {
    
    //Buttonをタップした後の処理メソッド
    func tapButtonToNextView() {
        //次の画面のControllerを呼び出す
        let nextViewController: NextViewController = NextViewController()

        //UINavigationControllerを使って,次の画面のControllerに遷移
        if let navigationController = navigationController {
            navigationController.pushViewController(nextViewController, animated: false)
        }
    }
}

#これにて画面遷移ができたはず...
ちょっと,後半にて走り書きとなりましたが,わからない場所があれば,コメントいただければ,可能な限り答えていきます.
ViewとControllerの連携として,私はDelegateを使用しております.詳細な説明は,次回に外伝として説明する予定です.

それでは,ご閲覧いただき,ありがとうございました.

12
18
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?