Swift And Painless

Jan 21, 2015

Designing User Interfaces in Playgrounds

Note: Updated for Swift 2.0 and Xcode 7 beta 4

I have an on-off relationship with the Interface Builder. In the last projects I tried to use it and I like it a lot for prototyping. But the more complex a project gets the more I hate it. It does take to long to load and often I have to search for the one setting in the different inspectors to get what I want.

One of the thinks I miss, when I don't use the Interface Builder is the interface preview one get while working on the interface. I have started now to use Playgrounds for this.

Let's for this post assume you want to create a login screen for an app. Open a Playground and put in the code:

import UIKit
import XCPlayground

let hostView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))

hostView.layer.borderWidth = 1
hostView.layer.borderColor = UIColor.grayColor().CGColor
hostView.backgroundColor = .whiteColor()

XCPShowView("Host View", view: hostView)

Go to View/Assistant Editor/Show Assistant Editor. You should see something like this:

The app is going to have a navigation bar on the login screen. So add the following code at the end of the Playground:

let navigationBar = UINavigationBar(frame: CGRect.zeroRect)
navigationBar.setTranslatesAutoresizingMaskIntoConstraints(false)
navigationBar.setItems([UINavigationItem(title: "Login")], animated: false)
hostView.addSubview(navigationBar)

let views = ["navigationBar": navigationBar]
var layoutConstraints = [NSLayoutConstraint]()
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("|[navigationBar]|", options: [], metrics: nil, views: views)
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("V:|[navigationBar(64)]", options: [], metrics: nil, views: views)
NSLayoutConstraint.activateConstraints(layoutConstraints)

In the Assistant Editor you should see this:

To add a text field add the code

let usernameTextField = UITextField(frame: CGRect.zeroRect)
usernameTextField.setTranslatesAutoresizingMaskIntoConstraints(false)
usernameTextField.placeholder = "Username"
usernameTextField.borderStyle = .Line

hostView.addSubview(usernameTextField)

before the definition of the constrains. Change the constraints to

let views = ["navigationBar": navigationBar, "usernameTextField": usernameTextField]
hostView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[navigationBar]|", options: nil, metrics: nil, views: views))
hostView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[usernameTextField]-|", options: nil, metrics: nil, views: views))

hostView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[navigationBar(64)]-20-[usernameTextField(30)]", options: nil, metrics: nil, views: views))

The preview then looks like this:

Uh!?! That looks really bad! In fact this is a bug in Playground. To fix this, either don't use Auto Layout, add the statement usernameTextField.contentMode = .Redraw or add usernameTextField.setNeedsDisplay() at the end of the Playground.

If you have to use different code in the Playground than later in the real app the Playground is kind of useless. For a quick and very dirty fix add usernameTextField.setNeedsDisplay() at the end of the Playground.

The textfield now looks like it should:

After adding a second text field for the password and a button for the login action the code looks like this:

import UIKit
import XCPlayground

let hostView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))

hostView.layer.borderWidth = 1
hostView.layer.borderColor = UIColor.grayColor().CGColor
hostView.backgroundColor = .whiteColor()

XCPShowView("Host View", view: hostView)

let navigationBar = UINavigationBar(frame: CGRect.zeroRect)
navigationBar.translatesAutoresizingMaskIntoConstraints = false
navigationBar.setItems([UINavigationItem(title: "Login")], animated: false)

let usernameTextField = UITextField(frame: CGRect.zeroRect)
usernameTextField.translatesAutoresizingMaskIntoConstraints = false
usernameTextField.placeholder = "Username"
usernameTextField.borderStyle = .Line

let passwordTextField = UITextField(frame: CGRect.zeroRect)
passwordTextField.translatesAutoresizingMaskIntoConstraints = false
passwordTextField.placeholder = "Password"
passwordTextField.borderStyle = .Line
passwordTextField.secureTextEntry = true

let loginButton = UIButton(type: .System)
loginButton.translatesAutoresizingMaskIntoConstraints = false
loginButton.setTitle("Login", forState: .Normal)

hostView.addSubview(navigationBar)
hostView.addSubview(usernameTextField)
hostView.addSubview(passwordTextField)
hostView.addSubview(loginButton)

let views = ["navigationBar": navigationBar, "name": usernameTextField, "password": passwordTextField, "button": loginButton]
var layoutConstraints = [NSLayoutConstraint]()
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("|[navigationBar]|", options: [], metrics: nil, views: views)
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("|-[name(password,button)]-|", options: [], metrics: nil, views: views)
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("V:|[navigationBar(64)]-20-[name(30)]", options: [], metrics: nil, views: views)
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("V:[name(30)]-10-[password(30)]-20-[button]", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: views)
NSLayoutConstraint.activateConstraints(layoutConstraints)

hostView.subviews.map { $0.setNeedsDisplay() }

The result in the Assistant Editor looks like this:

Tweet in iOS using Swift

First import `Accounts`, `Social` and get the account store

import Accounts
import Social

...

    override func viewDidLoad() {
        super.viewDidLoad()

        accountStore = ACAccountStore()
    
    }

Present the user a table view with all the Twitter account which are set in the Settings app

let accountType = accountStore!.accountTypeWithAccountTypeIdentifier(ACAccountTypeIdentifierTwitter)
        
println("accountType: (accountType)")
        
accountStore!.requestAccessToAccountsWithType(accountType, options: nil, completion: { [unowned self] (granted, error) in
    println("granted: (granted)")
    self.accounts = self.accountStore?.accounts
    dispatch_async(dispatch_get_main_queue(), { () -> Void in
        self.tableView.reloadData()
    })
})

When the user selects an account she wants to user for tweeting, save the account id in
NSUserDefaults:

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    let account = accounts![indexPath.row] as ACAccount
    if activeAccountId == account.identifier {
        activeAccountId = nil
    } else {
        activeAccountId = account.identifier
    }
    NSUserDefaults.standardUserDefaults().setObject(activeAccountId, forKey: kActiveAccountIdKey)
    NSUserDefaults.standardUserDefaults().synchronize()
    tableView.reloadData()
}

Now you are ready to tweet. Get the account and make a tweet request:

if let accountIdentifier = NSUserDefaults.standardUserDefaults().stringForKey(kActiveAccountIdKey) {
    let parameters = ["status" : "Awesome Tweet!"]
    let tweetRequest = SLRequest(forServiceType: SLServiceTypeTwitter, requestMethod: .POST, URL: NSURL(string: "https://api.twitter.com/1.1/statuses/update.json"), parameters: parameters)

    let account = accountStore?.accountWithIdentifier(accountIdentifier)
    tweetRequest.account = account
    tweetRequest.performRequestWithHandler { (tweetData, tweetResponse, tweetError) in
        println("error: (tweetError)")
        println("tweetResponse: (tweetResponse)")
    }
}

Done.

If you have any comments about this post, you can find my on [Twitter](https://twitter.com/dasdom) or [App.net](https://app.net/dasdom).

Designing User Interfaces in Playgrounds

Phy Update Diary: @3x

Phy Update Diary: Fill The Realm Database

Phy Update Diary: Setup

Updating Phy

Open Files In Swift Playgrounds

Building iOS8 Apps Without Interface Builder

Accessing the Keychain in Swift

Tweet in iOS using Swift

Adjust for the Keyboard in iOS Using Swift