search
LoginSignup
57

More than 5 years have passed since last update.

posted at

updated at

MVCの第一歩!ControllerとViewを分ける!

こんにちわ。22日目担当の@bearcanionです。

僕はアプリ開発を始めてからMVCの概念を特に気にせず、全ての部品をストーリボードに乗せ、コードを全てViewControllerファイルに書いていました。

その結果がこちらです。
ストーリーボード
スクリーンショット 2015-12-20 16.12.21.png

1番大きいViewControllerファイル
スクリーンショット 2015-12-20 16.14.04.png
1387行の中に処理も部品レイアウトも画面遷移も全て書いてある状態!
大変わかりにくくなっております!!!

通常の開発ではMVC(モデル・ビュー・コントローラー)に分けて書くのが一般的です!
ですが、いきなり初心者にMVCを駆使して書けって言っても敷居が高すぎます。
なので今回はホントに簡単にxibファイルを使ってストーリーボードから部品を取り除きMVCで言うところのViewとControllerに分ける方法をご紹介します。

まずViewTestプロジェクトを作り、その中にControllerとViewというグループを作ります。
Controllerフォルダの中にViewController.swiftを入れてください。
そしてCustomView.swiftとCustomView.xibを作っていきます。
スクリーンショット 2015-12-20 16.22.54.png

まずはCustomView.swiftからです。
Cocoa Touch Classを選択し、
スクリーンショット 2015-12-20 16.24.37.png

UIViewを継承したCustomView.swiftを作ります。
スクリーンショット 2015-12-20 16.24.02.png

次はCustomView.xibです。
User InterfaceからViewを選択し、
名前をCustomView.xibで作ります。
スクリーンショット 2015-12-20 16.25.06.png

CustomView.xibを選択してください。
インスペクターのCustom ClassにCustomViewを指定します。
そしてUILabel をViewの上に乗せます。
Viewの色もわかりやすく変えておきましょう!
スクリーンショット_2015-12-20_16_26_10.png

CustomView.swiftを選択してください。
先ほどのUILabelをアウトレット接続しておきます。
さらにこのファイルに対応するxibファイルはどれなのかをコードで指定します。
スクリーンショット 2015-12-20 16.26.23.png
コードはこちら

class func instance() -> CustomView {
        return UINib(nibName: "CustomView", bundle: nil).instantiateWithOwner(self, options: nil)[0] as! CustomView
    }

そして最後にViewControllerのviewDidAppearメソッドにコードを書いていきます。
スクリーンショット 2015-12-20 16.26.42.png
コードはこちら

override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        let customView = CustomView.instance()
        customView.frame = self.view.frame
        self.view.addSubview(customView)
        customView.myLabel.text = "hogehoge"        
    }

シュミレーターで起動してみましょう!
スクリーンショット 2015-12-21 12.27.25.png

hogehogeでましたでしょうか??

こうすることでストーリーボードはスッキリしました!
今は難しい処理をしているわけではないですが、
データベースからデータを取ってきたり
データベースに保存したりするときに
MVCでいうモデルという概念も活用し、
処理の部分の切り分けもするとViewControllerがスッキリすると思います。
モデルにしておくと使いまわせるという利点もあります!

僕も全然MVCについてはまだまだ疑問なこともたくさんあるし、
結構難しいので一歩一歩進んで行きましょう!

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
What you can do with signing up
57