Be Swift: Code-only iOS app in Swift 4 for Xcode 9

At WWDC 2014, Apple announced a new direction with its innovative software programming language, named Swift, for future iOS and MacOS app development. The adoption of Swift has been phenomenal: open source language development, availability of an iPad Swift playground, language consistency, and numerous features in Xcode 9 to support app development using Swift. This post details the steps to create a Swift 4 code-only (i.e., no storyboards) project within Xcode 9.

Getting Started: Creating the Code-only App

  • Create a new Xcode project using the ‘Single View Application‘ as the iOS template. Select ‘Swift‘ as the language and a device. Leave unchecked ‘Use Core Data‘, ‘Include Unit Tests‘, and ‘Include UI Tests‘.

Removal of Main.storyboard

  • Delete the file ‘Main.storyboard‘ from the ‘Project Navigator‘ pane.
  • Select the project in the ‘Project Navigator‘ pane, then select the target in the middle editor pane, and finally, click on the ‘General‘ tab). Clear the ‘Main Interface‘ field.
  • Select the ‘Info‘ tab (located two tabs to the right of ‘General‘) and remove the line titled ‘Main storyboard file base name‘ located under the ‘Custom iOS Target Properties‘, if it exists. At this point, all evidence of a main storyboard are gone.

Launch Screen Options

There are three options for implementing the required launch screen: create launch images (one for each device and orientation) and place them in ‘Assets.xcassets‘, create a ‘LaunchScreen.storyboard‘ file, or create a ‘Launch.xib‘ file. Adding several launch images to cover all of the device and orientation combinations creates a logistics burden for the developer and consumes extra app memory making it not the best iOS app development practice for most applications. Of the two remaining options, I prefer the ‘Launch.xib‘ solution. Here are the steps to create and use a ‘Launch.xib‘:

  • Create a ‘Launch.xib‘ selecting ‘File -> New -> File‘, selecting ‘View‘ as the iOS user interface file type, and name the file (in this example: ‘cvcLaunch.xib‘).
  • Select the newly created ‘xib‘ file in the ‘Project Navigator‘ pane to view the configuration options in the various inspectors.
  • Set the configuration options in the various inspectors (‘file‘, ‘identity‘, ‘attributes‘, and ‘size‘) as shown in the example screenshots:

  • In the this example, I added a blue-gradient background image in the ‘cvcLaunch.xib‘ view resulting in a ‘cvcLaunch.xib that looks like this screenshot.
  • The last step assigns this newly created ‘cvcLaunch.xib‘ file as the launch image for the app. Select the project in the ‘Project Navigator‘ pane, then select the target in the middle editor pane, and finally, click on the ‘General‘ tab). Scroll down to the section titled ‘App Icons and Launch Images‘. Select the newly created ‘cvcLaunch.xib‘ file as the ‘Launch Screen File‘ file. At this point, the ‘LaunchScreen.storyboard‘ file isn’t needed anymore and can be deleted from the project pane.

Code Changes

Upon creation of the Swift 4 project within Xcode, two files were generated: ‘AppDelegate.swift‘ and ‘ViewController.swift‘. Both of these files require some edits to support a code-only Swift 4 iOS app in Xcode 9.

  • In the ‘AppDelegate.swift‘ file, I replaced the existing code with the following code to provide the start up functionality.
import UIKit

@UIApplicationMain

class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication,
                didFinishLaunchingWithOptions launchOptions:
                [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        let mainVC = ViewController()
        if let window = window {
            window.backgroundColor = UIColor.gray
            window.rootViewController = mainVC
            window.makeKeyAndVisible()
        }
        return true
    }
}
  • In the ‘ViewController.swift‘ file, I replace the existing code with the following code to provide the initial viewcontroller and view functionality. This initial functionality includes placeholder images that I copy into the project navigator.
import UIKit

class ViewController: UIViewController {
    
    let firstImageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: "uw-1024x1024.png"))
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 20
        return imageView
    }()
    
    let secondImageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: "amazon_500.png"))
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 20
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // placeholder setup for background on launch view
        self.view.backgroundColor = .white
        self.view = UIImageView(image: UIImage(named: "blue-background.png"))
        self.view.contentMode = .scaleAspectFill
        
        self.view.addSubview(firstImageView)
        self.view.addSubview(secondImageView)
    }
    
    override func viewWillLayoutSubviews() {
        firstImageView.frame  = CGRect(x: 128, y:  64, width: 256, height: 256)
        secondImageView.frame = CGRect(x: 512, y: 256, width: 256, height: 256)
    }
}

Compile and Run

At this point, the project should not show any errors or warnings and should compile. Select a device or simulated device, as appropriate, and compile/run. The app should launch and, in my case, display two small images on a blue-gradient background full-screen image as shown below. This makes an easy way to establish a starting point to develop a code-only app.

2017-12-28T18:28:39+00:00 By |Swift, Xcode App Dev|0 Comments

Leave A Comment