iOS10 Swift 3 Mockup App

A Tutorial using StackView to set up the App UI.

Using Xcode 8.0 for Swift 3 / iOS 10.

Making my first tutorial. I’m on my way to making some apps for the app store. Having followed some app making courses, it’s time to start by making some of the pieces which may eventually make it into some of my apps

In this rough mockup, I’m going to create the UI of an app utilizing StackViews. I’m going to do this entirely in code without changing the storyboard.

Since we intend to localize our apps and make international (multi-language) apps, instead of using NSString, we always use NSLocalizedString.

The ViewController will contain a MapView , SegmentControl, several Labels and several Buttons. It will look something like this:

screenshot-2016-10-07-02-07-14

So let’s get started. In xcode, create a new project, choose iOS, choose Single View Application,  give it a Product Name of MockUp, choose Universal for Devices and store it somewhere.

Since we’re including maps, we need to turn Maps Capability on. On the left pane of xcode select the Project Navigator, select your project, then in the centre pane select Capabilities, scroll down to Maps and switch Maps to on:

screenshot-2016-10-07-22-27-15

Now select ViewController.swift after line import UIKit, add the line “import MapKit”.

  1. We put the labels and the button on the botton left side in a vertical StackView named bottomLeftStackView
  2. We put the labels and the button on the right side in a vertical StackView named bottomRightStackView.
  3. We put these two StackViews in a horizontal StackView named bottomStackView.
  4. We add a SegmentControl and two Buttons to the MapView.
  5. We put the MapView and the bottomStackView in a vertical StackView named mainStackView.

Add the following declarations for the UI elements before func viewDidLoad:

var mainStackView               = UIStackView()
var mapView                           = MKMapView()
var bottomStackView           = UIStackView()
var bottomRightStackView = UIStackView()
var bottomLeftStackView   = UIStackView()
var mapSegment                    = UISegmentedControl()
var plusButton                        = UIButton(type: .roundedRect)
var minusButton                    = UIButton(type: .roundedRect)
var questionLabel                  = UILabel()
var flagButton                        = UIButton(type: .roundedRect)
var answerLabel                    = UILabel()
var countdownLabel            = UILabel()
var scoreLabel                        = UILabel()
var playButton                       = UIButton(type: .roundedRect)

After function viewDidLoad add the following empty functions:

func setupStackViews()
{
/*
The vertical stackview for our viewcontroller consists of:
1. The mapView ( i.e. Top part of screen)
2. The bottom stackview
*/
}
func setupTopView()
{
/*
The Top View is a MapView also containing:
1. Segment Control for mapView
2. Zoom  in button
3. Zoom out button
*/
}
func setupBottomView()
{
/*
The bottom horizontal stackview consists of:
1. The bottom left stackview
2. The bottom right stackview
*/
}
func setupBottomLeftView()
{
/*
Bottom left vertical stackview consists of
1. Label asking you to find a city.
2. Flag of the country.
3. Label congratulating you when you find city.
*/
}
func setupBottomRightView()
{
/*
Bottom right vertical stackview consists of:
1. Game countdown timer label
2. Score label
3. Start button
*/
}
/*
Actions for buttons etc.
*/
func playTapped(sender: UIButton!)
{
// Start the Game
print(“playTapped”)
}
func flagTapped(sender: UIButton!)
{
// switch to another country
print(“flagTapped”)
}
func mapSegmentChanged(sender: UISegmentedControl!)
{
// change the type of mapView
print(“segmentControl”)
}
func zoomIn(sender: UIButton!)
{
print(“zoomIn”)
}
func zoomOut(sender: UIButton!)
{
print(“zoomOut”)
}

Add this graphic to your project, with the name uk.png :

uk

If you run the project at this stage you will only see a blank screen.

The xcode project at this stage can be downloaded from GitHub at MockupGitHub .

So let’s code the MapView, adding a Segment Control and two Buttons.
Add the following code to setupTopView:

let title0 = NSLocalizedString(“Stand”,  comment: “Abbreviation for Standard map”)
let title1 = NSLocalizedString(“Hybrid”, comment: “Abbreviation for Hybrid map”)
let title2 = NSLocalizedString(“Sat”,    comment: “Abbreviation for Satellite map”)
mapSegment.insertSegment(withTitle: title0, at: 0, animated: true)
mapSegment.insertSegment(withTitle: title1, at: 1, animated: true)
mapSegment.insertSegment(withTitle: title2, at: 2, animated: true)
mapSegment.addTarget(self, action: #selector(mapSegmentChanged), for: .valueChanged)
mapSegment.frame = CGRect(x: 20, y: 20, width: 200, height: 20)
plusButton.backgroundColor = UIColor.clear
let plusString = NSLocalizedString(“+”,comment:”map zoom in”)
plusButton.titleLabel?.font = UIFont.preferredFont(forTextStyle: .headline)
plusButton.setTitle(plusString, for: .normal)
plusButton.setTitleColor(UIColor.black, for: .normal)
plusButton.addTarget(self, action: #selector(zoomIn), for: .touchUpInside)
plusButton.frame = CGRect(x: 20, y: 60, width: 40, height: 40)
minusButton.backgroundColor = UIColor.clear
let minusString = NSLocalizedString(“-“,comment:”map zoom out”)
minusButton.titleLabel?.font = UIFont.preferredFont(forTextStyle: .headline)
minusButton.setTitle(minusString, for: .normal)
minusButton.setTitleColor(UIColor.black, for: .normal)
minusButton.addTarget(self, action: #selector(zoomOut), for: .touchUpInside)
minusButton.frame = CGRect(x: 20, y: 90, width: 40, height: 40)
mapView.addSubview(mapSegment)
mapView.addSubview(plusButton)
mapView.addSubview(minusButton)

Add the following code to setupStackViews:

setupTopView()
setupBottomView()
mainStackView.axis                = .vertical
mainStackView.alignment    = .fill
mainStackView.distribution = .fill
mainStackView.spacing         = 10.0
mainStackView.addArrangedSubview(mapView)
mainStackView.addArrangedSubview(bottomStackView)
mainStackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(mainStackView)
let viewsDictionary = [“stackView”:mainStackView]
let stackView_H = NSLayoutConstraint.constraints(withVisualFormat:
“H:|-20-[stackView]-20-|”,
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: viewsDictionary)
let stackView_V = NSLayoutConstraint.constraints(withVisualFormat:
“V:|-20-[stackView]-20-|”,
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: viewsDictionary)
self.view.addConstraints(stackView_H)
self.view.addConstraints(stackView_V)

Add the following code to viewDidLoad:

setupStackViews()

Check that the project compiles, builds and runs :

screenshot-2016-10-08-01-47-58

Let’s setup the UI elements in the bottom right StackView of the screen.

Add the following code to setupBottomRightView:

countdownLabel.backgroundColor = UIColor.clear
countdownLabel.textColor       = UIColor.black
countdownLabel.textAlignment   = .center
countdownLabel.text            = NSLocalizedString(“4:59”, comment: “game countdown”)
scoreLabel.backgroundColor = UIColor.clear
scoreLabel.textColor       = UIColor.black
scoreLabel.textAlignment   = .center
scoreLabel.text            = NSLocalizedString(“score:  10”, comment: “game score”)
playButton.backgroundColor = UIColor.lightGray
let buttonString = NSLocalizedString(“Start”,comment:”Play the game”)
playButton.setTitle(buttonString, for: .normal)
playButton.setTitleColor(UIColor.black, for: .normal)
playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
playButton.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
playButton.tintColor = UIColor.white
bottomRightStackView.axis         = .vertical
bottomRightStackView.alignment    = .trailing
bottomRightStackView.distribution = .fillEqually
bottomRightStackView.spacing      = 10.0
bottomRightStackView.addArrangedSubview(countdownLabel)
bottomRightStackView.addArrangedSubview(scoreLabel)
bottomRightStackView.addArrangedSubview(playButton)

Add the following code to setupBottomView:

setupBottomLeftView()
setupBottomRightView()
bottomStackView.axis         = .horizontal
bottomStackView.alignment    = .fill
bottomStackView.distribution = .fillEqually
bottomStackView.spacing      = 40.0
bottomStackView.addArrangedSubview(bottomLeftStackView)
bottomStackView.addArrangedSubview(bottomRightStackView)

Check that the project compiles, builds and runs :

screenshot-2016-10-08-02-14-38

Let’s setup the UI elements in the bottom right StackView of the screen.

Add the following code to setupBottomLeftView:

questionLabel.backgroundColor = UIColor.clear
questionLabel.textColor       = UIColor.black
questionLabel.textAlignment   = .center
questionLabel.text            = NSLocalizedString(“Find the capital of the UK”, comment: “Question find the capital of..”)
questionLabel.numberOfLines   = 2
questionLabel.frame = CGRect(x: 0, y: 0, width: 120, height: 60)
flagButton.backgroundColor = UIColor.lightGray
let image = UIImage(named: “uk.png”)
flagButton.setBackgroundImage(image, for: .normal)
flagButton.addTarget(self, action: #selector(flagTapped), for: .touchUpInside)
flagButton.frame = CGRect(x: 0, y: 0, width: 120, height: 60)
answerLabel.backgroundColor = UIColor.clear
answerLabel.textColor       = UIColor.black
answerLabel.textAlignment   = .center
answerLabel.text            = NSLocalizedString(“Congrats you found London, the Capital of UK”, comment: “Answer you found the capital”)
answerLabel.numberOfLines   = 2
answerLabel.frame = CGRect(x: 0, y: 0, width: 120, height: 60)
bottomLeftStackView.axis         = .vertical
bottomLeftStackView.alignment    = .leading
bottomLeftStackView.distribution = .fillProportionally
bottomLeftStackView.spacing      = 5.0
bottomLeftStackView.addArrangedSubview(questionLabel)
bottomLeftStackView.addArrangedSubview(flagButton)
bottomLeftStackView.addArrangedSubview(answerLabel)

Check that the project compiles, builds and runs :

screenshot-2016-10-08-02-31-53

The xcode project at this stage can be downloaded from GitHub at MockupFinalGitHub .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s