Good-bye Storyboard

iOSのチーム開発を妨げるものとして、GitHub管理がし辛いという理由でStoryboard(xib)ファイルが挙げられます。

その打開策ということで、実際の開発現場ではStoryboardを使わない開発が多く見受けられます。

この記事では、実際にどうやってStoryboardを使わずに開発していくかを紹介していきます。

Githubにコードを公開しているので、よろしければ参照してください!

github.com

WHY

  • Storyboardのコンフリクトを解決するのが面倒なので無くしたい
  • ViewControllerの生成が面倒、Segueとか使いたくない
  • GUIでいじるより、CUIで全部行いたい

HOW

今回は上のデザインを使って、実際にStoryboardを使わないでどう開発していくかを紹介します。

Storyboardを使わないプロダクトを立ち上げる際の手順については詳しい記事があるので、それを参考にしてください。

StoryBoardを使わないでプロジェクト作成(Xcode8,Swift3)

https://qiita.com/rika-tawashi/items/d975c2d9f85e8bb4aef5

ViewController

Initialize

上記のように、Storyboardからの呼び出しではfatalError()を発生させ、自前で用意するinitializerでは、

super.init(nibName: nil,bundle: nil)を呼ぶようにします。

nibName, bundleは、nibファイルを探すために使われる引数です。

Layout

ここでは簡単な右のスプラッシュ画面を作ってみます。要素はUILabel一つにUIActivityIndicatorView一つです。

Layoutを組む際にSnapKitを用いているのでご了承下さい。

  1. 画面構成に必要なViewの評価式を書いていく
  2. それぞれのViewをaddSubviewしていく
  3. それぞれのViewごとConstraintを作っていく

完成!

遷移の方法

とても簡単です。UINavigationControllerの関数を使います。

Push

Present

TableView

TableView

先ほどと同じように、tableViewの評価式を書いていきます。

ここでは、UITableView#registerを拡張しています。

詳細を知りたい方は、以下の記事を参考にしてください。

masegi.hatenablog.com

TableViewCell

Initialize

ViewControllerのときと同様に、init?(coder:)ではfatalError()を返すようにします。

init(style:, reuseIdentifier:)をOverrideして、Layoutを行うようにsetupSubviews()を呼び出します。

Layout

ViewControllerとほどんど同じなので省略していきます。

完成!

終わりに

Storyboardを使わない開発は、初めのうちは慣れずに時間がかかってしまうこともありますが、

慣れてしまえば、Storyboardを使うより断然楽に開発を行えます。

アニメーションを入れる際も、『どの位置からどの位置まで』という情報がわかりやすいので、とても便利だと思います。

既存のプロダクトへの導入も、画面単位、View単位で行えるので難しくありません。

この機会にぜひ使ってみてはいかかでしょうか?

Welcome pull request, issue and review!!!

github.com