【アプリ開発ファーストステップ】Mainの画面をStroyBoardではなく自作のものを表示する

「Main.storyboard じゃない画面を使って、アプリの勉強を進めたい」と思ったら、次を試してみてください。

XcodeでiOSアプリのテンプレートから、新しいプロジェクトを作成。

ここから実際に動かしてみると、真っ白の画面が表示されます。

この真っ白な画面を簡単に、自作のViewControllerを表示させてみます。

実現したいもの

プロジェクトからMain.storyboardファイルを消す

最初に不要なファイルを削除します。テンプレートから実際に動かした時の真っ白な画面は、この Main.Storyboardが表示されています。Deleteで消してしまいましょう。

Info.plist ファイルから不要なものを消す

次にInfo.plistファイルから余計なプロパティを削除します。このファイルでは、アプリに関する基本的な設定情報(プロパティ)を管理しています。削除した Main.Storyboard を最初の画面にする設定があるので、削除してしまいます。

• Main storyboard file base name を - で削除する

• Application Session Role の中にある Storyboard Name を - で削除する

ViewControllerを置き換える

削除した Main.storyboardの代わりになるViewControllerを作成します。

(名前をViewControllerからFirstViewControllerへ変えています。)

今回は次の仕様をもつ画面を表示させたいと思います。

【仕様】

①背景色 : 青
②タイトル : 白 (Navigationバーで白のタイトルを表示 / 今後他のViewControllerへ遷移させることを想定)
③メイン : 中央に「1」を表示

【置き換え前】

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

【置き換え後】

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ①: 青色で背景を設定
        view.backgroundColor = .blue
        
        // ②: 白色でタイトルを表示
        title = "First View"
        navigationController?.navigationBar.titleTextAttributes = [
          NSAttributedString.Key.foregroundColor: UIColor.white
        ]
        
        // ③: 中央に「1」を表示
        let label = UILabel()
        label.text = "1"
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 100)
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

AppDelegate / SceneDelegate を書き換える

• AppDelegateの書き換え

アプリ起動した時の最初の設定を行うfunc application(_:didFinishLaunchingWithOptions:) を書き換えます。

ここでは、初期のUIViewControllerの構築も行います。

今後他のViewControllerへ遷移させることを想定し、NavigationControllerを使ってrootViewControllerを更新します。

【書き換え前】

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // Override point for customization after application launch.
  return true
}

【書き換え後】

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // 今後を考えてUINavigationControllerを設定
  let navigationController = UINavigationController(rootViewController: FirstViewController())
  let window = UIWindow(frame: UIScreen.main.bounds)
  window.rootViewController = navigationController
  // アプリのエントリーポイント(主画面)を指定
  window.makeKeyAndVisible()
        
  return true
}

• SceneDelegateの書き換え

iOS 13 以降のマルチウィンドウサポート向けた設定を、AppDelegate 同様に対応します。

【置き換え前】

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
  // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
  // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
  // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
  guard let _ = (scene as? UIWindowScene) else { return }
}

【置き換え後】

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
  guard let windowScene = (scene as? UIWindowScene) else { return }
  let navigationController = UINavigationController(rootViewController: FirstViewController())
  
  window = UIWindow(windowScene: windowScene)
  window?.rootViewController = navigationController
  window?.makeKeyAndVisible()
}

実際の表示

アプリを実行してみると、何もしていなかった時の真っ白の状態から、青い背景の画面が表示されるようになります。