Swift4 コードでレイアウトを組む①

はじめに

初めまして、株式会社ウェルクスのエンジニアの佐山と申します。
業務ではフロントエンド、バックエンド、インフラ・iOSアプリ開発を担当しています。

Github
github.com

Qiita
qiita.com


今回は最近本格的に学習を進めているiOSアプリ開発について書きたいと思います。
弊社ではほいくらいふというアプリを運営しています。
ダウンロードは以下よりお願いします。

ほいくらいふ

ほいくらいふ

  • WELKS Co.,Ltd.
  • ライフスタイル
  • 無料

このアプリの開発を引き継ぐことになったのですが、一つ問題がありました。

それは、Storyboardが使われていない!!!ということです。
コードベースでのサンプルがとても少ないので、Storyboardを使わないコードベースのアプリ開発について書いていきたいと思います。

入門といったらまずはHello Worldということで、Storyboardを使わずに「Hello World」を出すだけのアプリを作っていきます。

環境

実行環境は以下です

  • Swift4
  • xcode9.3

プロジェクトを作成

xcodeを起動し、「Create new Xcode Project」をクリックします。

f:id:sayamaken0402:20180514182847p:plain

「Single View App」を選択します。

Product Nameを適当に「codebaseApp」として、「next」で続けてください。

storyboardの設定を破棄

左のサイドバーから、「Main.storyboard」を選択した状態で、deleteキーを押すと以下のようになります。

f:id:sayamaken0402:20180514183326p:plain

次にinfo.plistを選択し、「Main storyboard file base name」の欄を削除してください。

f:id:sayamaken0402:20180515091655p:plain

AppDelegate.swift

AppDelagate.swiftを編集していきます。

AppDegate.swiftとは何をするファイルかについてはこちらの記事がとてもわかりやすいです。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        
  // ナビゲーションの設定
  let viewController: ViewController = ViewController()
  let navigationController = UINavigationController(rootViewController: viewController)
      
  // ビューの設定
  self.window = UIWindow(frame: UIScreen.main.bounds)
  self.window?.backgroundColor = UIColor.white
  self.window?.rootViewController = navigationController
  self.window?.makeKeyAndVisible()
        
  return true
}

上記を記述したら、「再生マーク」のボタンを押してビルドをし、シュミレーターを立ち上げて見ましょう。

command+Rで同様のことをショートカットで実行できます。

f:id:sayamaken0402:20180515093626p:plain

ビルドが成功すると、以下のようにまっさらなアプリが立ち上がるかと思います。

f:id:sayamaken0402:20180515093834p:plain

ViewController.swift

次は、ViewController.swiftを編集して、「Hello World」と出るようにして見ましょう。

ViewControllerの役割についてはこちらを参照ください。

ViewController.swiftを開いて見ましょう。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

以上が初期状態のViewController.swiftの中身です。

UILabelを設置する

まずは、「Hello World」と表示させるためのUILabelを用意してあげます。

import UIKit

class ViewController: UIViewController {

    // UILabelインスタンスの生成
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Viewが読み込み終わった後に実行されるviewDidLoadメソッド内に処理を書いていきます。

import UIKit

class ViewController: UIViewController {

    // UILabelインスタンスの生成
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // viewの幅と高さを変数に格納
        let viewWidth = self.view.bounds.width
        let viewHeight = self.view.bounds.height
        
        // UILabelの表示位置や幅・高さを設定
        label.frame = CGRect(x: viewWidth / 4, y: viewHeight / 2, width: viewWidth / 2, height: 40)
        // 表示させるテキスト
        label.text = "Hello World"
        // フォントサイズ
        label.font = UIFont.systemFont(ofSize: 30)
        // テキストのセンター寄せ
        label.textAlignment = .center
        // labelをUIViewのサブビューに追加
        self.view.addSubview(label)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

以上を記述したら、ビルドして見ましょう。

f:id:sayamaken0402:20180515095631p:plain

以上のようになるかと思います。

とりあえず完成!

問題点

...完成と思いきや実はこのやり方には問題があります。

バイスを横向きにした時に、以下のように表示位置が崩れてしまうのです。

f:id:sayamaken0402:20180515095816p:plain

次回は、Viewを構造体に分けて上記の問題を解決する方法について書いていきたいと思います。