Lesson 3: How to Connect UI to Code
Welcome to Lesson 3 of iPhone Apps 101!
You're in the right spot if you've never written any Swift code (or any code for that matter) before. And if you're coming from an previous version of Swift, you'll learn how to write code that works with iOS 11 and Swift 4.
Today you will work to make the design that you implemented interactive, and you'll connect the UI (User Interface) to the code.
Outcomes
- How to connect UI and code
- How to write Swift 4 code basics
- How to hide the keyboard
- How to create modular code blocks
- How to animate the iPhone screen
First, Download the Resources and Sample Code for Lesson 3
The Lesson 3 download contains all of the design graphics, app mockups, and sample code (beginning and end) so that you can follow along.
UI Connections
Have you ever used an app that made you smile?
Apps are truly personal experiences that you can use to help or entertain people around the world.
To make your app interactive, you will need to setup some connections between the UI (user interface) that you designed and the related code files.
In Xcode you'll be working between two files: the Storyboard file and the ViewController.swift file.
Linking these two files together allows you to make buttons respond to user input and update labels with new information.
Connect the Storyboard UI to Swift 4 Code
If this is your first time writing code, or Swift code, make sure you follow along. If you get stuck, just pause the video and try to figure out what doesn’t match.
Important: Code is spelling and case sensitive!
If you can't figure it out start over again, and try it one more time.
Keyboard 101
Any time a user taps on a text field (UITextField) the keyboard will automatically appear.
Your app needs to tell the iPhone what to do when the user is finished typing (only you know!) and how to update your UI.
Depending on where the user is typing, you may find that keyboard covers part of your screen.
One easy way to fix the keyboard problem is to move your screen up, and I'll show you how to do that in this lesson.
Download the Swift 4 Code and Xcode Project
Challenges
Try doing the entire lesson again, but this time do it without watching the video. Start from scratch. Start with the "3.0 - Tip Calculator UI - Begin" Xcode project and do it again.
The more you practice going through the motions, the more it will make sense.
Bonus 1: Using the
print()statement, display a custom message with the value of thebillTextField.text!attribute for a UITextField (read the UITextField reference below).Bonus 2: Trying changing the value of a tip label dynamically when the Calculate Tip button is pressed. Just make it say "Hi" or something funny.
tip1.text = "hi"(read more about UILabels in the reference below).
Links
- UITextField Reference - text input areas for users to type in
- UILabel Reference - text that you can position any where on the iPhone screen
- UIButton Reference - a button to confirm or do an action
- NotificationCenter Reference - Used to listen for events about the keyboard
- Notification Programming Topics - additional reference materials on notifications
Summary
In this lesson you learn about working with text input and managing the user experience with the keyboard.
You learned how to make the keyboard dismiss using the UIControl's resignFirstResponder() method, and you learned how to animate the entire iPhone screen using keyboard events.
All of your UI is connected, and you can start working with values.
If you had any issues following along, send me an email: Paul@SuperEasyApps.com
-Paul
P.S. Check your email for Lesson 4 tomorrow where you will add the Swift 4 logic to control the tip calculations.