post Image
Storyboardを出来るだけ使わずに書き始める

Storyboardを出来るだけ使わずに書き始める

昔は普通にこんな感じで既知な話なのですが、時代が進むにつれ各所で何で?
と聞かれる時のための忘備録として書捨てておきます。

Storyboard is 何

人が見てもよくわからないxmlのかたまり。
xibも似たようなものですので、同列に扱っていきます。

Storyboardの利点

  • デフォルトで入ってくる
  • ぱっと見わかりやすそう

これぐらいですかね。

Storyboardの問題点

  • プロパティが分散する

各種プロパティがsotryboardに直接記述されてしまうので、後々の修正が大変になります。
例えば、ラベルの色やフォントを統一して変更したいとなると、コード上でしたら定義しておいた一箇所の変更などで済む話が、Storyboard上に散りばった全てのラベルをGUIでちくちく探り出し変更していくといったことになります。
重労働な上にミスる可能性が非常に高く、また変更差分を見たところで、どこのどのviewの値を変えた話なのかさっぱりわかりません。

androidのように、変数定義が出来れば少しは改善されるかもしれませんが。
まぁ、あの手この手を使えばなんとか出来ないこともないですが、そこまで我を通すのは no thank you です。

  • viewが増えてくると何かわからなくなる

GUIなので、WYSIWYGなレベルだとまだよいのですが、状況別やエラー等などisHiddenをon/offしたりなどして貼り付けまくったviewcontrollerなど開いたところで何がなんだかわかないものになってきます。

  • 変えていないのにどこか変わる

開いて閉じただけでgitの差分が。
何が変わったかわからない差分をとりあえずdiscartdする気分ったら。

  • バージョン毎で形式が変わる

Xcodeのバージョンが変わると形式の一部が変わってしまいます。
xibなど、1,2バージョン前ぐらいなら自動変換も効きますが、
それ以上となるともう手作業で移植するしかなくなります。
(もうあんなことはしたくない…)

  • 使い方の説明が意外に難しい

GUIとしてviewを並べるまではよいとしても、コードと連結において、AssistantEditorを開き、右クリックで何かを選び、コード上のどこかにドラッグして繋げる、とか文章で書いても使い方を説明するのが難しいです。
VB6時代ぐらいクリックしてそこにクリックされた時のコード書け、なんて簡単だったらよかったのですが。
TouchUpInsideとかTouchUpOutsideとか普通に間違えますから。
アシスタント機能でコードが追加されても、じゃあ削除は?、とかなるとさらに説明が難しくなります。

  • 重い/狭い

MacPro買えというわけでもなく、こんなことする割に重いのです。

プロジェクト作成からことはじめまで

Storyboard/xib使わないならどうすれば?、単にコードで書けばよいのです。
謎のxmlをGUIで書くか、まだ見た目でわかるコードで書くか程度の違いです。

最近のXcodeではプロジェクト作成からstoryboardが入ってきますので、
まずはこれを抜いた状態を作ります。

プロジェクト作成

Xcode9.xあたりの話となります。将来はまた変わるでしょう。
まずは、Xcode -> File -> New -> Project 、Single View App でプロジェクトを一つ作ります。
初期の構成はこんな感じでしょうか。

AppDelegate.swift
ViewController.swift
Main.storyboard
LaunchScreen.storyboard
Info.plist
Assets.xcaseets

この時点で、Main.storyboard と LaunchScreen.storyboard が作成されます。

いきなり日和りますが、LaunchScreen.storyboard はそのまま使います。
Launchの設定状況により対応するデバイス解像度の種別が変わり、
storyboardで無い場合、かなり多くのファイルを作らなければならなくなります。
憎いわけではなく楽したいだけなのです。
UIImageViewでも適当に画面の真ん中に追加して起動時の雰囲気を高めておきます。
どうしても憎ければ、Assets.xcassetsに New iOS Launch image を作成してTARGETに刺せばOKです。

Main.storyboard

置いといてもいいですが、決別の意として消します。

これで実行すると、本来 ViewController.swift にある class ViewController が表示されるところが、
1行目からSIGABRTで落ちてくれます。

気分が折れる前にViewControllerを表示するまでの少々のコードを加えます。

まず、TARGETにある、Deployment Info / Main Interface にある Main を空欄にします。
起動時にここあるstoryboardを前提として処理を開始するので、断ち切ります。

これで落ちることはなくなりますが、ViewController が起動しません。
起動時にこれを起動するコードを追加します。
AppDelegate.swift にて

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    window = UIWindow(frame: UIScreen.main.bounds)
    window?.rootViewController = ViewController()
    window?.makeKeyAndVisible()

    return true
}

windowに新しいUIWindowを追加して、rootViewControllerに起動時のViewControllerを追加して、入力受け付けるようにして、というだけです。

これでViewControllerは起動していますが、見た目に透明&真っ黒でわからないので、ViewController.swiftにて背景色に白を追加してみます。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
    }

はい、これで起動時においてstoryboardから決別できました。

view in viewcontroller

はい、次はUILabel貼って定番の Hello world ですよね。
storyboardだとGUIで直接ラベルを貼ってわーい、なのですが、コードでいきます。
やっていることは UILabelを作って、viewに貼るだけのことです。

class ViewController: UIViewController {

    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        label.text = "Hello World"
        label.textAlignment = .center
        view.addSubview(label)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        label.frame = view.bounds
    }
}

こんなところですね。
色々なやり口はあるのですが今回は手短に、storyboardよろしくまずさっさとクラス作成時点で let label = UILabel() にてlabelを作ってしまいます。

そして、viewDidLoad() の時点で、labelの各プロパティ設定及びviewへの貼付けを行います。

frameについては、viewDidLayoutSubviews() で行ってしまいます。
勿論、viewDidLoadなどでframeを設定してもよいのですが、デバイスの縦横やsafeAreaのことを考えると、レイアウト更新のところで状況に従って更新した方が素直になります。

レイアウトの話はautolayout云々の話が絡んできますのでまた別途楽なやり方の話で。

extension UIColor {
    static let normalText = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
}

extension UIFont {
    static let normalText = UIFont.systemFont(ofSize: 14)
}

class ViewController: UIViewController {

    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        label.text = "Hello World"
        label.textAlignment = .center
        label.textColor = UIColor.normalText
        label.font = UIFont.normalText
        view.addSubview(label)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        label.frame = view.bounds
    }
}

コードになってしまえば、こんな感じなりでフォントや色の統一も共通化したものを用意して使っていくなどやり方は自由です。
storyboardでラベルが何十個となってきたら、変更要求の度に全部GUIでちくちくと考えると辛いです。

Simulator Screen Shot - iPhone 5s - 2018-04-23 at 15.19.56.png

ViewController遷移

はい次は、viewcontrollerからviewcontrollerへの遷移、segueとか面倒なので、さっさと行きます。

まずはよくある UINavigationCtonroller + UITableViewControllerの組み合わせ

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    window?.rootViewController = UINavigationController(rootViewController: UITableViewController(style: .plain))
    window?.makeKeyAndVisible()
    return true
}

これだけでナビゲーションバーとテーブルが表示されて雰囲気は出ます。
気分だけでも仕方ないので、テーブル&セルをタップしたら詳細画面ぐらいを出来るだけ短くいきます。

import UIKit

class ListViewController: UITableViewController {
    override func tableView(_: UITableView, numberOfRowsInSection _: Int) -> Int {
        return 100
    }

    override func tableView(_: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
        cell.textLabel?.text = "row \(indexPath.row)"
        return cell
    }

    override func tableView(_: UITableView, didSelectRowAt indexPath: IndexPath) {
        let vc = DetailViewController()
        vc.label.text = "row \(indexPath.row)"
        navigationController?.pushViewController(vc, animated: true)
    }
}

class DetailViewController: UIViewController {
    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        label.textAlignment = .center
        view.addSubview(label)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        label.frame = view.bounds
    }
}

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_: UIApplication, didFinishLaunchingWithOptions _: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = UINavigationController(rootViewController: ListViewController(style: .plain))
        window?.makeKeyAndVisible()
        return true
    }
}

詰め詰めの1ファイルに書いてこんなところですかね。
本来こんな書き方はするべきではないですが、ちょっとした動作確認ぐらいってなら数分なのでいいでしょう。
AppDelegate.swiftを上に差し替えるだけでOKです。
dequeueReusableCellでのcell使い回しも無しのイケイケですが、cell自体の作成が軽ければさしたる問題ではないでしょう。

ポイントは didSelectRowAt で DetailViewController を作成してさっさと pushViewController しているところですね。
segueのどこでどうコールされて何が起こってるかなど考える前に、見たまんまに処理しておしまいです。

Simulator Screen Shot - iPhone 5s - 2018-04-23 at 14.48.44.png
Simulator Screen Shot - iPhone 5s - 2018-04-23 at 15.19.27.png

ViewController間の遷移、基本手段としては

UINavigationControllerからなら

行き

func pushViewController(_ viewController: UIViewController, animated: Bool)

ex) navigationController?.pushViewController(vc, animated: true)

戻り

ユーザーがBackタップ
もしくは navigationController?.popViewController(animated: Bool)

Modalなら

行き

func present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Swift.Void)? = nil)

ex) present(vc, animated: true, completion: nil)

戻り 子ViewControllerにてなんらかのアクションとして

func dismiss(animated flag: Bool, completion: (() -> Swift.Void)? = nil)

ex) dismiss(animated: true, completion: nil)

値の引き渡しは、これらをコールする前にViewControllerに渡せばOKです。

next

楽したいだけなんだけれども、
謎な方面などからあんまり嫌われなさそうならまた続きを書くかも知れません。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。