NEW: Master Swift design patterns with my latest book! >>

< Previous: Setting up   Next: Writing somewhere safe: the iOS keychain >

The basic text editor

Open Main.storyboard in Interface Builder, and embed the default view controller inside a navigation controller. Now place a text view inside (not a text field!) so that it fills up all the space and use Editor > Resolve Auto Layout Issues > Add Missing Constraints to place Auto Layout constraints.

Delete the "Lorem ipsum" text in the text view, give it a white background color if it does not already have one, then use the assistant editor to make an outlet for it called secret. That's us done with the storyboard for now; switch back to the standard editor and open ViewController.swift.

We need to add the same code we used in project 16 to make the text view adjust its content and scroll insets when the keyboard appears and disappears. This code is identical apart from the outlet is called secret now rather than script. First, put this into viewDidLoad():

let notificationCenter = NotificationCenter.default
notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name: Notification.Name.UIKeyboardWillHide, object: nil)
notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name: Notification.Name.UIKeyboardWillChangeFrame, object: nil)

As a reminder, that asks iOS to tell us when the keyboard changes or when it hides. As a double reminder: the hide is required because we do a little hack to make the hardware keyboard toggle work correctly – see project 16 if you don't remember why this is needed.

Here's the adjustKeyboard() method, which again is identical apart from the outlet name to that seen in project 16:

@objc func adjustForKeyboard(notification: Notification) {
    let userInfo = notification.userInfo!

    let keyboardScreenEndFrame = (userInfo[UIKeyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
    let keyboardViewEndFrame = view.convert(keyboardScreenEndFrame, from: view.window)

    if notification.name == Notification.Name.UIKeyboardWillHide {
        secret.contentInset = UIEdgeInsets.zero
    } else {
        secret.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: keyboardViewEndFrame.height, right: 0)
    }

    secret.scrollIndicatorInsets = secret.contentInset

    let selectedRange = secret.selectedRange
    secret.scrollRangeToVisible(selectedRange)
}

None of that is new, so you're probably bored by now. Not to worry: we're going to fix up our storyboard in preparation for authentication, so re-open Main.storyboard.

Place a button over the text view, give it the title "Authenticate" and dimensions 100 wide by 44 high. For constraints, give it fixed width and height constraints, then make it align horizontally and vertically with its superview. Now use the assistant editor to create an action for it called “authenticateTapped”.

Before you leave Interface Builder, you need to do something we haven't done yet, which is to move views backwards and forwards relative to each other. When the user has authenticated, we need to show the text box while making sure the button is no longer visible, and the easiest way to do that is to place the button behind the text view so that when the text is visible it covers up the button.

To move the text view to the front, select it in the document outline then go to the Editor menu and choose Arrange > Send To Front. When you do this the button will disappear on the canvas, but that's OK – it's still there, and we can still use it.

The last thing to do is ensure the text view starts life hidden, so select it in Interface Builder, choose the attributes inspector, and check the Hidden box – it's near the bottom, not far below Tag. That's our layout complete!

Upgrade to premium

The Hacking with Swift guide book helps you learn faster, plus get an Xcode tips and tricks video and Swift wall chart.

< Previous: Setting up   Next: Writing somewhere safe: the iOS keychain >
Click here to visit the Hacking with Swift store >>