![\"Light](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P0-intro/assets/light_flow.png\" "\\"\\"")
\n This is the second tutorial of Make School's iOS app tutorial series. In this tutorial, we'll learn core concepts for creating UI layouts by building a tip calculator.
In the US, it's customary to leave a tip for waiting staff like bartenders and waiters. An accepted range for the tip, also known as gratuity, is between 15% to 20% of your total bill.
Instead of having to do the math in your head, we'll build a simple tip calculator to calculate the tip for us.
"},{"id":"T0E6OlNlY3Rpb24tOTQ=","title":"Who Is This For?","htmlContent":"iOS Beginners with a basic understanding of navigating and using Xcode. This tutorial will focus on building intermediate-level UI with Interface Builder.
This tutorial builds on key concepts from the first Make School tutorial on building a Magic 8-Ball. You should have a understanding of the fundamentals of how to build simple iOS apps and how to navigate Xcode.
If you're a complete beginner and looking for your first introduction to iOS development, it's recommended to first complete the previous Make School tutorial on building a Magic 8-Ball.
3 hours
"},{"id":"T0E6OlNlY3Rpb24tOTU=","title":"What We're Building","htmlContent":"At the end of this tutorial, you'll have built your own tip calculator!
Your tip calculator will be able to:
By the end of this tutorial, you will:
Getting stuck when coding (and debugging) is a natural part of the programming process. If you find yourself stuck on a problem or lost, pause for a moment and take a breath. Maybe take a walk. Then retrace your steps (in the tutorial, not the walk). Make sure you've follow each step of the tutorial. It's easy to make typos or to accidentally skip over important steps.
If you want to compare your code to the solution, you can find it here.
"}]},"next":{"id":"T0E6OlBhZ2UtMzY=","slug":"design-breakdown","title":"Design Breakdown"},"previous":{"id":"T0E6OlBhZ2UtMzY=","slug":"design-breakdown","title":"Design Breakdown"}},{"id":"T0E6OlBhZ2UtMzY=","title":"Design Breakdown","slug":"design-breakdown","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tOTg=","title":"Design Breakdown","htmlContent":"Before we jump into Xcode, we'll first take some time to review and breakdown our tip calculator design. We'll learn to visually break apart designs into smaller chunks that we can code one at a time.
\nIn this tutorial, we'll often refer to the terms UI (user interface) and view. Both terms refer to building the app's user interface, or the visual elements on the screen that the user interacts with.
\nLet's take another look at the designs for the tip calculator app that we're going to build:
Listing the steps for each screen above (left to right):
The user also can toggle the app's color theme from light-mode to dark-mode using the switch in the top-right corner. In dark-mode, our tip calculator will look like:
We've reviewed our app designs. Next, let's learn to visually breakdown our design into smaller parts.
"},{"id":"T0E6OlNlY3Rpb24tMTAw","title":"Design Breakdown","htmlContent":"Implementing an app design without any planning can be overwhelming. It's hard to know where to start.
Instead, let's take our designs and visually break down elements into smaller groups that we can implement one at a time.
If you're doing this process on your own, it's helpful to use pen and paper.
At this point, you might be thinking, \"Why did we group each of the UI elements in the way we did?\" Why not any of the other following options?
To answer this question, we'll have to learn about the basic UI building block, UIView.
The UIView class is an object that represents a rectangular area on your iPhone screen. Your entire UI (with few exceptions), is built from multiple UIView objects.
To better understand this, let's take a look at Square Cash, an app that allows you to send and receive money.
As you can see, the whole screen has a base UIView (blue color) that we've named the root view. This will usually be the root view of the respective active UIViewController.
On top of the root, you can add subviews. These subviews are UIView objects or UIView subclasses. In the Square Cash app, the UI consists of buttons and labels but there are many other type of UI objects UIKit provides.
\nWhat is UIKit?
\n\nUIKit is a framework that provides pre-built objects and functionality that you can use to build iOS apps. This includes a lot of under-the-hood functionality (handling your app's lifecycle and resource management) as well as commonly used UI components (buttons and labels).
\nIdentify each of the UIView objects in the tip calculator design. You can reference the design below:
\nIf you break down the tip calculator design into it's individual subviews you should get the following:
\n\n\n\nYou'll notice many new UI components that we're using from UIKit. Each of these UI objects either are or inherit from UIView. We'll formally introduce each of these UI objects later in this tutorial.
It's common to organize our subviews in groups. Although you can technically group subviews however you'd like, usually groups are based on how you plan to position and layout your UI (more on this later).
Using our Square Cash example, you might group each of the subviews in the following manner:
This makes it easier to re-position entire groups of views. i.e. repositioning the entire header up or down a few pixels
Let's apply the steps we just took with the Square Cash app to our own tip calculator design.
\nGroup each of the view elements together using where you left off from the previous challenge. Check your answer in the solution when you're done. You can reference the design below:
\n\n\n\nYou should have grouped each of the individual view objects from the previous challenge as follows:
\n\n\nIn the previous section we identified each of the UIView objects and grouped them into 4 main groups:
Now, we'll go through and introduce all of the UI components we'll use from UIKit. These UI objects are meant to be basic building blocks to create your app's UI.
The header is a custom view on the view controller's root view.
As you can see, the header is a UIView placed on top of the root view. Additionally, it has two subviews place on top of the header view itself: a label and switch.
UILabel directly subclasses UIView and is used to display text on the iOS device's screen.
The UILabel class can be configured from it's many properties. (i.e. text, font, text color, number of lines, etc).
In our case, we use this label to display title text for our tip calculator app.
The UISwitch object is a subclass of UIControl, which is a subclass of UIView.
class UISwitch : UIControl, NSCoding { ... }\n\nclass UIControl : UIView { ... }\n
All UI objects that we'll use from UIKit will inherit from the UIView class.
A switch is the default UI component for toggling between an on and off state. You can think of it as the iOS version of a light switch.
When toggled on, the switch will change the color theme of the app from light to dark.
The next group of views allows the user to provide input to calculate the bill amount and tip percentage for the bill.
As with the header view, we'll break down this group of UI components into its individual components.
We've already covered the UILabel class, so we won't cover it again.
\nIdentify the UILabel(s) objects on the tip input card view.
\nBoth labels are on the left-side on the tip input card view: \n ![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tip_input_labels.png\")
\n
The UITextField provides a text field where the user can input text with the iOS keyboard.
When a user taps a text field, the text field will become active (referred to as the first responder) and the device keyboard will appear.
We'll need the text field for the user to input their bill amount.
Similar to the switch, the UISegmentedControl class provides a UI object that allows the user to toggle between different options. The main different being that a segmented control can have 2+ different states, while a switch can only toggle in-between an on and off state.
In addition to 2+ toggle states, switches can also have each option name labeled. Let's take a look at the segmented control we'll use in our tip calculator.
Our tip calculator will need a segmented control so that the user can choose the tip percentage they want to use for calculating gratuity.
The tip output group provides the output tip amount and total bill amount of the tip calculator.
We've already introduced all of the UI objects in this group.
\nIdentify all of the different UIKit objects in the tip output group.
\n\nThe entire tip output group is made up of a card view that is a UIView with 4 UILabel for each respective title and amount.
Next, we'll introduce the last UIKit object that we'll need for our tip calculator: UIButton.
Simple enough, this grouping will consist only of a single element: a button.
The UIButton, along with labels, is one of the most common objects for building your UI. A user can interact with a button by tapping it and triggering an event. This event can be tied to calling a function and running code.
Our reset button will allow a user to clear the current input from our tip calculator and reset it to an empty state.
\nYou don't need to memorize all of the UIKit objects we've just covered. Just remember that there are pre-made UI components that you can use to build your UI. If you're trying to build any type of visual element, check UIKit to see if there's a base UI object you can use to build off of.
We've reviewed and learned about many new UI objects in UIKit. You'll use these objects as basic building blocks for creating various UI for your app. If you're ever looking for a comprehensive guide of all of the UIKit objects, you can reference Apple's developer docs by clicking here.
Moving forward, we'll start building tip calculator in Xcode and look at how to use each of these UI components.
"}]},"next":{"id":"T0E6OlBhZ2UtMzc=","slug":"getting-started","title":"Getting-Started"},"previous":{"id":"T0E6OlBhZ2UtMzc=","slug":"getting-started","title":"Getting-Started"}},{"id":"T0E6OlBhZ2UtMzc=","title":"Getting-Started","slug":"getting-started","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTAz","title":"Getting-Started","htmlContent":"In this section, we'll get introduced to our new Xcode project and start working on implementing our tip calculator design.
We'll get started by downloading a Xcode starter project. You can download the .zip file by clicking here.
After downloading the starter project, open the project in Xcode. You should see something the following:
Build and run the current starter project in a simulator or iPhone device of your choice.
\nRun the new starter project to make sure there are no compilation errors. If all goes well, your project should run successfully and display an empty white screen (we haven't built anything yet!)
\n\n\n\nAlternatively, if you have a few warnings pop up (which can happen as XCode and Swift are constantly growing, changing, and updating), you can move forward with clicking the Perform Changes button.
\n\n\n\n[action]\nYou may also have a warning to convert the starter project to the latest Swift version. The warning will look similar to the following. Feel free to move forward with the update.
\n\n\nNext, let's take a look inside our starter project.
First, we'll start with our view controller.
\nUsing the Project Navigator, open the ViewController.swift source file. You should see the following code:
class ViewController: UIViewController {\n\n // MARK: - View Lifecycle\n\n override func viewDidLoad() {\n super.viewDidLoad()\n }\n}\n\n
Just boilerplate code, nothing is happening yet. We'll eventually write our tip calculator logic in here later.
Let's move onto our storyboard.
\nOpen Main.storyboard from your Project Navigator. You'll see the following:
Right now there's an empty, white view controller. (The one we saw in our simulator remember?)
Let's review how our storyboard view controller is connected to our .swift file.
\nClick on the view controller representation in your storyboard. With your storyboard view controller selected, navigate to the Class Inspector in the Utilities area.
\n\nYou'll notice that the ViewController.swift source code is paired with the View Controller object in your Main.storyboard.
Next we'll take a look at our project's assets.
Your project assets contain your media: images, movies, app icons, etc.
\nOpen Assets.xcassets to see your project assets. \n ![\"Project](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/project_assets.png\" "\\"\\"")
\n
In your asset catalog, you should see an app icon that's already set for you and two folders containing pre-defined color sets for the different color themes we'll implement later.
To pair with our custom colors in our asset catalog, your project also contains a UIColor extension that allows you to access each of the app's colors through code.
\nOpen UIColor+TC.swift from your Project Navigator. If you don't see it, you'll have to expand the Supporting Files folder in your Project Navigator. You should see the following:
import UIKit.UIColor\n\nextension UIColor {\n\n // MARK: Theme Colors\n\n static var tcDarkBlue: UIColor {\n return UIColor(named: \"tcDarkBlue\")!\n }\n\n static var tcOffWhite: UIColor {\n return UIColor(named: \"tcOffWhite\")!\n }\n\n static var tcHotPink: UIColor {\n return UIColor(named: \"tcHotPink\")!\n }\n\n static var tcCharcoal: UIColor {\n return UIColor(named: \"tcCharcoal\")!\n }\n\n static var tcAlmostBlack: UIColor {\n return UIColor(named: \"tcAlmostBlack\")!\n }\n\n static var tcMediumBlack: UIColor {\n return UIColor(named: \"tcMediumBlack\")!\n }\n\n static var tcBlueBlack: UIColor {\n return UIColor(named: \"tcBlueBlack\")!\n }\n\n static var tcSeafoamGreen: UIColor {\n return UIColor(named: \"tcSeafoamGreen\")!\n }\n\n static var tcBlack: UIColor {\n return UIColor(named: \"tcBlack\")!\n }\n\n static var tcWhite: UIColor {\n return UIColor(named: \"tcWhite\")!\n }\n}\n\n
This file pairs each of the class variables to the custom color sets defined in our asset catalog.
Once we start coding, we'll be able to access each respective color through the UIColor class variable:
let selectedColor = UIColor.tcSeafoamGreen\n
Notice that we prefix each of our custom colors with tc to avoid namespace conflicts and make our colors easier to find with Xcode autocomplete.
\nIn this project, your custom colors have been defined in your asset catalog, however this is just one of many ways for defining custom colors. You can also create custom colors programmatically or through Interface Builder.
\nTo wrap up our new project tour, let's briefly take a look at our App Delegate.
\nOpen AppDelegate.swift from your project navigator:
import UIKit\n\n@UIApplicationMain\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n\n var window: UIWindow?\n\n // MARK: - App Lifecycle\n\n func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {\n // Override point for customization after application launch.\n return true\n }\n}\n\n
\nFor this tutorial, you won't need to change or modify the App Delegate. However, it's helpful to know about it's purpose for when you start writing your own apps.
\nEach iOS Xcode project must have an AppDelegate.swift file which is responsible for the app's lifecycle. The app delegate specifies what happens when app lifecycle events are triggered. Common example events are app launch, receiving a push notification, app termination, etc.
In our tip calculator's app delegate, we don't add any code other than the boilerplate application(_:didFinishLaunchingWithOptions:) method that comes by default in each Xcode project template.
We've just taken a look at the files in our new Xcode starter project. Throughout this tutorial, we'll continue to build on this project to create our final tip calculator.
Let's get started by diving into storyboard and creating our views for our UI.
"}]},"next":{"id":"T0E6OlBhZ2UtMzg=","slug":"ui-layout","title":"UI Layout"},"previous":{"id":"T0E6OlBhZ2UtMzg=","slug":"ui-layout","title":"UI Layout"}},{"id":"T0E6OlBhZ2UtMzg=","title":"UI Layout","slug":"ui-layout","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTA1","title":"UI Layout","htmlContent":"We'll start building our app by implementing the UI in Interface Builder. For reference, here are the tip calculator designs:
"},{"id":"T0E6OlNlY3Rpb24tMTA2","title":"Creating Views","htmlContent":"We'll get started by creating our header view with a UIView.
\nUIKit has it's own header-like bar called the UINavigationBar. To keep things simple, we'll start from scratch and create our own header view instead of using iOS's UINavigationBar.
\nOpen Main.storyboard from your project navigator. You should see your single view controller. \n ![\"Starting](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/starting_storyboard.png\" "\\"\\"")
\n
Next, we'll add a UIView and reposition/resize it to be our header view.
\nCreate a header view by dragging an UIView object from the Object Library to the top of the view controller. Don't worry too much about the perfect size and position for now. We'll handle that later.
The new UIView object that we just added is going to be our custom header view. We'll add other subviews onto it later.
You might notice, that our header view is a little hard to see because it's the same color as the view controller's root view: white. Let's change the color of our root view to add some contrast.
\nChange the view controller's root view to off-white:
\n\n![\"Design](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/design_breakdown.png\" "\\"\\"")
\n ![\"Light](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/light_flow.png\" "\\"\\"")
\n ![\"Dark](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/dark_flow.png\" "\\"\\"")
\n ![\"Design](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/design_breakdown_groups.png\" "\\"\\"")
\n ![\"Other](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/alternate_ui_groups.png\" "\\"\\"")
\n ![\"Square](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/square_cash_uiviews.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_design_reference.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_view_breakdown.png\" "\\"\\"")
\n ![\"Square](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/square_cash_groups.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_view_grouped.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/header_overview.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/header_title_label.png\")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/header_switch.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/header_dark.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tip_input_outline.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tip_input_text_field.png\" "\\"\\"")
\n ![\"Active](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_active_text_field.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tip_input_segmented_control.png\" "\\"\\"")
\n ![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_output_outline.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tip_output_views.png\" "\\"\\"")
\n ![\"Reset](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/tc_reset_outline.png\" "\\"\\"")
\n ![\"Reset](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P1-Design-Breakdown/assets/reset_button.png\" "\\"\\"")
\n ![\"Open](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/open_starter_project.png\" "\\"\\"")
\n ![\"Empty](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/white_screen.png\" "\\"\\"")
\n ![\"Build](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/00_build_warnings.png\" "\\"\\"")
\n ![\"Build](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/01_conversion_warning.png\" "\\"\\"")
\n ![\"Build](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/03_finish_warnings.png\" "\\"\\"")
\n ![\"Starting](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/starting_storyboard.png\" "\\"\\"")
\n ![\"Storyboard](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P2-Getting-Started/assets/storyboard_vc_class.png\" "\\"\\"")
\n ![\"Design](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/tc_view_breakdown.png\" "\\"\\"")
\n View Controller Scene tree. Make sure you're not selecting the header view by accident. \n ![\"Select](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/select_root_view.png\" "\\"\\"")
\n \n![\"Open](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/open_attributes_inspector.png\" "\\"\\"")
\n \nBackground Color field. \n ![\"Click](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/click_bg_color_dropdown.png\" "\\"\\"")
\n \nOff-White color under the Named Colors subheader in the dropdown menu. \n ![\"Select](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/select_off_white.png\" "\\"\\"")
\n \nWe've changed the background color attribute of the root view to a different color. The Off White color we chose was pre-defined in our Assets.xcasset asset catalog.
Before we add more views or configure more properties, let's learn about the iOS coordinate system and the frame attribute of UIView and it's subclasses. We'll need to learn about the iOS coordinate system to properly position and size our views.
You can think of your phone screen as a coordinate system with it's origin in the top-left corner.
As we've previously discussed, view can be represented as rectangles drawn on our device's screen. This rectangle can be represented by it's starting point (top-left corner of the rectangle) along with it's size (width and height). Let's look at an example:
\nIn the image above, what is the red view's starting point? What about it's size?
\n\nAs you can see from the numbered X and Y axis, the view rectangle starts at the point (27, 48) in the iOS coordinate system and has a width of 50pts and a height of 35pts.
\nIn Swift, we have the CGPoint and CGSize data types to represent coordinate points and sizes respectively. A CGPoint value is a pair of X and Y values. A CGSize value is a pair of width and height values.
Additionally, these two data types can be combined into CGRect data type (X, Y, width, height) that represents a rectangle represented by it's point and size properties.
Each UIView has a property called it's frame of type CGRect. You can use each view's frame property to manipulate it's position and size.
\nAt some point, you'll come across another view property named bounds that's also a CGRect. The frame of a view represents the view's rectangle in it's super view's coordinate system while it's bound property refers to the rectangle using the view's top-left corner as the origin of it's coordinate system. In other words, the bounds property of a view will always have an (x, y) of (0, 0) and retain it's size.
With our new knowledge, let's properly re-position and re-size our header view.
Looking back at our design, we can determine the CGRect of our header view.
\nWhat should the CGRect (x, y, width, height) of our header view be?
\nThe frame of our header view is (0, 0, 375, 105).
\nLet's change our current header view's frame in storyboard.
\nIn Main.storyboard perform the following:
![\"iOS](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/ios_coord_system.png\" "\\"\\"")
\n ![\"Coord](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/coord_example.png\" "\\"\\"")
\n ![\"Frame](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/frame_vs_bounds.png\" "\\"\\"")
\n Frame Rectangle fields. Change the X, Y, Width and Height values in the size inspector to the value of the rect in the solution above.Let's see if our changes worked! Build and run the app in the iPhone 8 simulator by clicking the run button in the toolbar.
\nYou should see the custom header view against your off-white root view in the simulator. Nothing fancy yet!
But what happens if we run our app in a simulator with a different size screen?
"},{"id":"T0E6OlNlY3Rpb24tMTA4","title":"Handling Different Screen Sizes","htmlContent":"Let's revisit our previous diagram explaining a view's frame within the iOS coordinate system.
What would happen if our app was ran across multiple different screen sizes?
As you can see, the frame of the UIView needs to be different for each device with a different screen size.
\nCan you think of some ways of how we could solve this problem?
\nOne way we could solve different frames for each screen size is by programmatically calculating and setting each view's frame. However, that would be super messy and lead to us having to write a lot of code just make sure each view is the right size for each screen.
To solve this problem, Apple created a relative positioning tool called Auto-Layout. With Auto-Layout, we define constraints.
Constraints are rules where you can define the relative positioning or size between two views. Auto-Layout will then calculate all the math and set our view's frame so that all of the constraints (rules) are followed. This allows us to build dynamic view layouts that re-position and re-shape for any screen size.
For example, we could give our example view the following constraints:
\nNote the positive and negative values that are based on the direction of the iOS coordinate system.
\nNow if the screen changes, let's see how our view will react:
See how auto-layout calculates the view's frame based on our constraints for each different screen size?
If instead, we wanted give the view a fixed width or height, we can also add constraints as fixed constants. Let's give our example view a new set of constraints:
Auto-layout and constraints give us an easy way to build dynamic view layouts for any iOS device.
Let's set our first constraints by changing our header view in Interface Builder to make use of constraints.
\nWhat constraints should we set for our header view? \n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/nav_bar_dimensions.png\" "\\"\\"")
\n
\nOur header view would have the following constraints:
\n\nLooks pretty good. Let's look at our header view with these constraints across each device:
Hold on. Not so fast. With the introduction of the iPhone X, the sensor housing (the top notch) requires to add some additional thought to our header view frame.
Because the top notch, we'll need to make calculate the header view's height based on the bottom of the top notch for the iPhone X.
To help us handle this, Apple has provided us with the Safe Area.
The Safe Area provides us with valuable layout information to help us properly create constraints for our views. In our case, the top Safe Area provides us with the bottom of the Status Bar for each device:
Revise our original constraints, we'll need to replace our height constraint with a bottom constraint that is -85 from the top Safe Area. Now our header view dynamically calculate it's layout correctly across each device.
It might be a little hard to see, but the height of the header view is slightly bigger for the iPhone X because of it's top notch.
With our correct constraints, let's set them in Interface Builder.
Let's set our constraints in Interface Builder. First we'll start by adding our top, leading (left) and trailing (right) constraints.
\nOpen Main.storyboard from your Project Navigator. Select your header view (UIView) and add the following constraints:
With our header view selected, we click on the Add New Constraints button and set each of the edge constraints:
\n\nCurrently, our header view has a incomplete set of constraints. We haven't added a constraint to define the view's height yet. If we run the app now, we won't see our header view because it's height will be 0. Xcode and Interface Builder try to warn us of this:
You'll notice above:
Let's add the final constraint to define the header view's height.
\nAdd a constraint from the bottom edge of the header view to the top edge of the Safe Area:
\n\nTo add the constraint in the video, follow the steps below:
\n\n![\"Fixed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/fix_nav_bar_rect.png\" "\\"\\"")
\n ![\"Fixed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/fixed_nav_bar_simulator.png\" "\\"\\"")
\n ![\"Fixed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/fixed_nav_bar_diff_screens.png\" "\\"\\"")
\n ![\"Constraints](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/constraints_example.png\" "\\"\\"")
\n ![\"Constraints](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/constraints_example_diff_screens.png\" "\\"\\"")
\n ![\"Fixed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/fixed_size_constraint_example.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/nav_bar_w_fixed_height_constraint.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/nav_bar_fixed_height_problem.png\" "\\"\\"")
\n ![\"Safe](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/safe_area.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/nav_bar_correct_height.png\" "\\"\\"")
\n ![\"Constraint](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/constraint_errors.png\" "\\"\\"")
\n UIView) in the Document Outline.Congrats, we've added our first set of constraints to our header view. Try running your app in multiple different simulators and see if our header view properly adjusts it's frame to each device.
It works! Next, we'll dive deeper into auto-layout and the different kind of constraints that are available to use.
"},{"id":"T0E6OlNlY3Rpb24tMTA5","title":"Different Types of Constraints","htmlContent":"To properly setup constraints for our header view, we've only used one type of constraints but there are many different types of constraints that you can use to build complex UI layouts. Before setting up constraints for any of our other fews, let's look at common constraints we can use to build dynamic layouts with auto-layout.
First, let's review our relative positioning constraint. Relative positioning allows to position a view relative to another view. For example, we can create a constraint that positions the blue view 45pts from the trailing (right) side of the red view:
Positive and negative values (relative to the iOS coordinate system) denote the direction of the constraint. For example, we can instead add a constraint that positions the blue view -75pts from the trailing (right) side of the red view:
\nWhen you're creating relative positioning constraints, you'll need to keep in mind which view's edge the constraint is starting from, the other view's edge where the constraint is ending at and the position or negative value (direction) of the constraint.
\nWhen you're setting your relative positioning constraints, make sure you're aware of what they're relative to. For example, let's set the blue view 20pts below the red view:
But is that what we wanted? In the case above, we set our blue view to have a constraint of 20pts below the red view but relative to the wrong edge of the red view!
This is probably what we really intended:
As you can see, it's a very common mistake to accidentally set constraints relative to the wrong edge or sometimes even the wrong view!
\nIt's also important to take the Safe Area into consideration when setting a view relative to the root view. If you're setting the top edge of your view to the top edge of the root view, you'll need to verify that you don't accidentally set it to the top edge of the Safe Area instead, or vice versa.
\nAs we briefly discussed earlier, it's also possible to set fixed constant constraints. These are used to set a fixed width or height of a view. For example, we can give a view a fixed width and height of 100pts:
In this case, the red view will always remain the same size (100x100) regardless of changing screen sizes.
\nIf you run into a situation where you've added your constraints but don't see your view, you might have forgotten to add certain constraints. Remember, each view's frame must be able to be determined by it's auto-layout constraints.
\n\nIn the previous example, if we forgot to add the height constraint, our view wouldn't show up because the height of it's frame is 0.
\nAnother positioning constraint we can use is aligning center axes vertically or horizontally. For example, we can create a constraint that vertically aligns the blue view's center to red views:
Or we horizontally align the two views:
You can also choose to offset (positive or negative to determine direction) from the superview:
Aspect ratio constraints are also available. You can set the height to be a ratio of the width or vice versa. This can be useful if you want to make sure the view is always a square (1:1 aspect ratio) or if you decide that the height will always be 1/2 of the width (1:2 aspect ratio).
In the following example, we set the aspect ratio to (1:3) where the height is a third of the width:
The last constraint that we'll cover is the ability to set constraints relative to the ratio of another constraint. This is useful when we want certain views to size themselves relative to other views. For example, we can set the height of the blue view to be (1:2), or half, of the red view:
In our tip calculator, we'll use this constraint to size the input and output cards to be of equal heights.
"},{"id":"T0E6OlNlY3Rpb24tMTEw","title":"Setting Auto-Layout For Our View Grouping","htmlContent":"Let's take an other look at our design:
Next, we're going to setup the main views (and their constraints) for each UI group. In other words, we'll add the objects and constraints below:
We've already finished implementing the foundation for our header view. We'll repeat a similar process for each of our remaining UI groups.
With our header complete, let's move on to implementing the tip input card.
\nOpen Main.storyboard. Add a new UIView and set the following constraints:
Step by step:
\n\n![\"Auto-Layout](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/dynamic_nav_bar_diff_devices.png\" "\\"\\"")
\n ![\"Relative](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/relative_positioning_positive.png\" "\\"\\"")
\n ![\"Relative](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/relative_positioning_negative.png\" "\\"\\"")
\n ![\"Relative](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/relative_positioning_top_edge.png\" "\\"\\"")
\n ![\"Relative](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/relative_positioning_bottom_edge.png\" "\\"\\"")
\n ![\"Fixed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/fixed_size_constraints.png\" "\\"\\"")
\n ![\"Centers](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/centers_vertically_aligned.png\" "\\"\\"")
\n ![\"Centers](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/centers_horizontally_aligned.png\" "\\"\\"")
\n ![\"Centers](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/centers_vertically_aligned_offset.png\" "\\"\\"")
\n ![\"Aspect](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/aspect_ratio.png\" "\\"\\"")
\n ![\"Relative](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/relative_ratio.png\" "\\"\\"")
\n ![\"TC](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/tc_design_reference.png\" "\\"\\"")
\n ![\"UI](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/ui_groups_with_dimensions.png\" "\\"\\"")
\n UIView from the Object Library onto the root view.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.At this point, you'll see an auto-layout error because your new (input card) view is missing a height constraint. Ignore this warning for now, we'll fix this soon.
Next, we'll add our output card and it's constraints.
\nIn storyboard, add a new UIView and set the following constraints:
Step by step:
\n\nUIView from the Object Library onto the view controller's root view, below the input card.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.We'll also add an equal height constraints between both input and output card views.
\nAdd an equal heights constraint between both input and output cards:
\n\n\n\nStep by step:
\n\nAdd New Constraints button at the bottom right corner of the Interface Builder Editor window.Equal Heights and add the selected constraint.Xcode should still show an auto-layout error because we haven't added enough constraints for it determine the height of each card view. Ignore this warning for now, this will be fixed once we add our reset button.
\nIn storyboard, add a new UIButton and set the following constraints:
Step-by-step:
\n\nUIButton from the Object Library onto the view controller's root view, below the output card.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.By default, our button has a clear background color. To make our reset button easier to see, let's change it's background color from Clear to tcDarkBlue.
\nChange the Background color of the reset button:
\n\n\n\nStep-by-step:
\n\nBackground field. This field allows you to set the button's background color.Clear to tcDarkBlue.\nOur auto-layout warning is gone! After adding our reset button and it's constraints, auto-layout can calculate the height of each input/output card using the equal heights constraint.
\nWe've finished implementing the main view for each of our respective UI groups. For each group, we added the appropriate UIView object and set it's corresponding constraints.
Before moving on, let's test that everything looks as expected.
"},{"id":"T0E6OlNlY3Rpb24tMTEx","title":"Testing Our Constraints","htmlContent":"To catch bugs or missteps early, it's always good to build and run your code often. Let's go ahead and do that now to test that our constraints are working correctly.
\nIn the toolbar, click the Run button.
\nIf everything goes as expected, you should see the following in your simulator:
Try running our project on different simulators. You'll notice that our view dynamically adjust and re-size for any screen size:
In this section, we learned about how to layout our UI; first with frames and later with auto-layout. We learned about constraints and their importance in building dynamic view layouts for multiple devices. And finally, we put our knowledge into practice by implementing a scaffolding for our tip calculator design.
In the next section, we'll build off of our UI by fully implementing and styling each of our UI groups.
"}]},"next":{"id":"T0E6OlBhZ2UtMzk=","slug":"implementing-subviews","title":"Implementing Subviews"},"previous":{"id":"T0E6OlBhZ2UtMzk=","slug":"implementing-subviews","title":"Implementing Subviews"}},{"id":"T0E6OlBhZ2UtMzk=","title":"Implementing Subviews","slug":"implementing-subviews","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTEy","title":"Implementing Subviews","htmlContent":"In the previous section, we implemented a skeleton of each of the UI groups in storyboard. If you build and run your project, your app should look like the following:
In this section, we'll finish building each of our view groups:
To finish implementing each of our view groups, we'll need to the process below:
![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/finished_ui_groups.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P3-UI-Layout/assets/finished_ui_groups_diff_devices.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/finished_ui_groups.png\" "\\"\\"")
\n UIKit objectsIBOutlets and IBActions\nLet's start by finishing the first UI group: our header.
"},{"id":"T0E6OlNlY3Rpb24tMTEz","title":"Header View","htmlContent":"In our previous step, we've already added a base view (UIView) for our header. In it's current state, our header view looks like the following:
To finish implementing our header view, we'll need to identify and add the remaining subviews.
\nUsing the design below, can you identify the views we'll need to finish building the UI for our header view?
\n\n\n\nWe'll need the following view objects to build our header:
\n\n![\"Current](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/current_nav_bar.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_design.png\" "\\"\\"")
\n UILabel: title labelUISwitch: theme color switchAfter identifying both of the view objects we'll need to add, we'll need to add them and set each of their respective constraints. Let's start with the title label!
Before we starting adding constraints in storyboard, let's take a step back and think of all the constraints we'll need for our title label.
\nUsing the design below, identify each of the auto-layout constraints for your title label. Write each of the constraints down on a sheet of paper.
\n\nHint: the red area represents the frame of the label.
\n\n\nCheck your answer with the solution below.
\nBased on our design, our label will need the following constraints:
\n\n\n\nConstraints:
\n\nAfter identifying our constraints, we can use Interface Builder to add our new UILabel and it's constraints.
\nOpen Main.storyboard and implement your title label and it's constraints:
Step-by-step:
\n\n![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_label_dimensions.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_label_constraints.png\" "\\"\\"")
\n UILabel from the Object Library and drop it on top of your header view (UIView).UILabel selected, click the Add New Constraints button.Add New Constraints popup:\n\nUILabel in the Document Outline.UILabel selected, hold control (ctrl) and click-drag to the Safe Area object in the Document Outline.Vertical Spacing. Wait a second, our new Vertical Spacing constraint isn't not properly configured.Vertical Spacing and click on it. You should see it's attributes appear in the Attributes Inspector.Label.Bottom to Top\n-85 to 0\n\nIdentifying and setting the auto-layout constraints for each view object can be tricky for newbies. If you find yourself struggling, slow down and try to break down your layout problem into smaller chunks. As you continue to practice, working with constraints will become easier and easier.
\nNice! We've added a title label to our header. If you build and run your project, you'll see the following:
But... it's still off. Our title label still doesn't look like our final design.
That's because we'll need to use the Attribute Inspector to set the UILabel attributes to match our designs.
\nIn Main.storyboard, select your header view's title label. Navigate to the Attributes Inspector in the Utilities area and change the following attributes:
After configuring each of the attributes above, your title label should look like the following:
Looks pretty good huh? Let's move on to our UISwitch.
Identify constraints. Add object and set constraints. Configure attributes. Rinse. Repeat.
We'll going to repeat this process many times before this tutorial is over. Get used to this, as it's the same process you'll need to use if when you're building your own apps.
Let's start by identifying the constraints needed for our UISwitch.
\nUsing the design below, identify each of the auto-layout constraints for your theme switch. Write each of the constraints down on a sheet of paper.
\n\nHint: the red area represents the frame of the switch.
\n\n\nCheck your answer with the solution below.
\nBased on our design, our UISwitch will need the following constraints:
Constraints:
\n\nLet's go ahead and add these constraints to our UISwitch.
\nOpen Main.storyboard and implement your UISwitch and it's constraints:
Step-by-step:
\n\n![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_label_no_styling.png\")
\n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/set_nav_bar_label_text.png\" "\\"\\"")
\n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/set_nav_bar_label_font.png\" "\\"\\"")
\n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/set_nav_bar_label_text_color.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_label_w_styling.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_switch_dimensions.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_switch_constraints.png\" "\\"\\"")
\n UISwitch from the Object Library and drop it next to your header title label.UISwitch selected, click the Add New Constraints button.Add New Constraints popup:\n\nEqual to Greater Than or Equal.UISwitch to select it again. Make sure you're not selecting the constraint from the previous step.UISwitch to the UILabel.Center Vertically to vertically align your switch's center to the label's center.Nice! We've added and set our constraints for our UISwitch. Now, let's configure the switch's attributes.
\nIn Main.storyboard, select your header view's switch. Navigate to the Attributes Inspector in the Utilities area and change the following attributes:
Attributes:
\n\n![\"Switch](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/switch_attrs.png\" "\\"\\"")
\n On to Off\nDefault to tcSeafoamGreen\nWhen you're done, your custom header view should look like the following:
We're almost finished with implementing our first UI group! To finish up, we'll need to create our IBOutlets and IBActions.
IBOutlets and IBActions allow our Swift code receive events and interact with our storyboard views.
IBOutlets create an instance variable that we can reference in our Swift code. This allows us interact with our title label and switch programmatically.
IBActions create a function that will execute code when triggered. These functions are triggered by user interaction with your UI elements. A common example is a user tapping a button. When the button is tapped, it triggers an IBAction that will run any code within it's corresponding function.
We'll need both of these connections later to implement our tip calculator logic.
Let's get started by creating our first IBOutlet for our header view (UIView).
\nOpen your Main.storyboard and ViewController.swift files side-by-side using the Assistant Editor:
To create IB connections, we'll need to first open our storyboard and view controller source code side-by-side:
\n\n![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/nav_bar_w_styling.png\" "\\"\\"")
\n Main.storyboard in your main editor.ViewController.swift file in your Project Navigator. This will open your view controller in your Assistant Editor.With our Main.storyboard and ViewController.swift files side-by-side, let's create an IBOutlet for our header.
\nCreate an IBOutlet for your header called headerView:
Step-by-step:
\n\nUIView) in the Document Outline.ViewController class definition.headerView.IBOutlet.You should see a new IBOutlet instance variable in your ViewController class:
class ViewController: UIViewController {\n\n @IBOutlet weak var headerView: UIView!\n\n // MARK: - View Lifecycle\n\n override func viewDidLoad() {\n super.viewDidLoad()\n }\n}\n
As you can see, we can now reference our header view as headerView in our Swift code.
Awesome! Repetition is the mother of learning. Let's do it again.
\nCreate an IBOutlet for your header view's title label called titleLabel:
Step-by-step:
\n\nUILabel) in your storyboard view controller.ViewController class definition.titleLabel.IBOutlet.\nNotice that last time we created an IBOutlet by ctrl-dragged from our header view in the Document Outline. This time we created our IBOutlet by ctrl-dragged directly from the label's storyboard object. Both ways of creating IBOutlets are valid.
At this point, we've walked through creating an IBOutlet twice. It's your turn.
\nCreate an IBOutlet for your UISwitch named themeSwitch. If you get stuck, go back and reference the steps we used to create the previous two IBOutlets.
\nAfter creating an IBOutlet for your switch, your ViewController.swift file should look like the following:
class ViewController: UIViewController {\n\n @IBOutlet weak var headerView: UIView!\n @IBOutlet weak var titleLabel: UILabel!\n @IBOutlet weak var themeSwitch: UISwitch!\n\n // MARK: - View Lifecycle\n\n override func viewDidLoad() {\n super.viewDidLoad()\n }\n}\n\n
After checking your solution, let's move on to creating our first IBAction.
We'll need to create an IBAction for our switch. This will allow us to execute code each time our switch is toggled from off to on and vice versa.
\nOpen both your Main.storyboard and ViewController.swift file using the Assistant Editor. Create a new IBAction for your switch:
Step-by-step:
\n\nUISwitch) in the Document Outline.ViewController class.Outlet to Action. Changing this property allows us to create a different type of IB connection.themeToggled.Any to UISwitch.Value Changed. If not, use the dropdown to set it to Value Changed.IBAction.\nAfter creating your switch's IBAction, you can close the Assistant Editor. If don't have a lot of screen space, it's helpful to open and close the Assistant Editor as you need it.
Let's give our new IBAction a test run to see that it's working correctly.
\nOpen ViewController.swift from your Project Navigator and add the following code in your themeToggled function:
@IBAction func themeToggled(_ sender: UISwitch) {\n if sender.isOn {\n print(\"switch toggled on\")\n } else {\n print(\"switch toggled off\")\n }\n}\n\n
After adding the code above we can test our IBAction.
\nBuild and run your project. Toggle your switch on and off a couple of times. If you look at your Xcode Debugger area you should see the following print statements in your console each time you toggle your switch:
\n\n\nWe've finished implementing the UI and IB connections for our header view. Side-by-side, your Main.storyboard and ViewController.swift files should look like the following:
If you build and run your project, you app should look like:
If you're looking for more practice, good news! We'll need to repeat the same steps again for our input card, output card and reset button views. Onwards!
\nAs you get more advanced, you'll learn about creating custom view objects that abstract all of it's subview components. Creating custom views makes your custom views re-usable and decouples your code. This is a little more advanced and out of the scope of this tutorial.
\nThe next UI group we'll complete is our input card. Let's take another look at our design:
For our input card, we'll need to add the following UI components:
We'll need two labels, a text field, and a segmented control. Next, let's think about how to use auto-layout to build our design.
To build our header view, we used constraints to create our dynamic view layout. This time, we'll introduce a new tool called UIStackView.
UIStackView allows us to create horizontal or vertical stacks of views. This is especially useful for easily organizing rows or columns layouts.
Let's take a look at what that looks like:
In both cases, you can see that each stack view contains multiple subviews. The UIStackView automatically handles calculating the frame of each subview within it.
We'll use stack views to easily layout our input subviews without having to add the constraints ourselves.
Let's look at how we'll use a horizontal stack view to group our first row of views.
As you can see, both our Bill Amount Title Label and Bill Amount Text Field are added to a single UIStackView. The purple area in the image above shows the stack view's frame.
Similarly, we can use another horizontal stack view to layout our Tip Percent Title and Tip Segmented Control subviews. Let's look at what the would look like:
Each UIStackView calculates the frame of each subview within it. However, we'll still need to somehow define the frame of each UIStackView.
To position both of our horizontal stack views in the center of our input card, we'll use our existing knowledge of stack views and constraints.
First, we'll add a vertical stack view containing both horizontal stack views:
Next, we'll use constraints to dynamically center the outer stack view:
We add the following constraints to our outer stack view:
We'll need to add a few more width constraints to guarantee each view is of the correct width.
We'll start by adding an equal width to both inner (horizontal) stack views:
In the image above, we add the following two constraints:
As the name suggests, these two Equal Widths constraints define the widths of the inner stack view to be the same as the outer stack view.
Last, we need to add a width constraint for our UITextField and UISegmentedControl respectively.
Our width constraints:
Whew! Those are the final constraints we'll need for our input card.
As you can see, the combination of stack views and constraints give developers a lot of power to create complex UI layouts.
Now that we've figured how we're going to implement the layout for our input card, let's start building!
As you can see, the layout for our input card is pretty complex. To make things easier, we'll break our implementation into smaller steps.
We'll start with the inner top stack view: the Bill Amount Stack View.
First, we'll need to add our stack view's sub-elements.
\nIn Main.storyboard, add an UILabel and UITextField to your view controller:
Step-by-step:
\n\n![\"Switch](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/switch_console_print.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/finished_header_project_snapshot.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/finished_header_app_snapshot.png\" "\\"\\"")
\n ![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_design.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/tip_input_subviews.png\" "\\"\\"")
\n ![\"Horizontal](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/hor_and_ver_stack_views.png\" "\\"\\"")
\n ![\"Bill](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/bill_amount_stack_view.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/tip_percent_stack_view.png\" "\\"\\"")
\n ![\"Outer](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/outer_stack_view.png\" "\\"\\"")
\n ![\"Outer](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/outer_stack_view_constraints.png\" "\\"\\"")
\n ![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_equal_widths.png\" "\\"\\"")
\n ![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_input_width_constraints.png\" "\\"\\"")
\n UILabel from the Object Library and drop it on top of your input card view (UIView).UITextField from the Object Library and position it next to your previous label.Next, let's create our first UIStackView from our two new views.
\nCreate the Bill Amount Stack View using the label and textfield:
\n\n\n\nUILabel) in your storyboard.UITextField. This allows you to select multiple items at the same time.Embed In Stack button near the Add New Constraints button. It's located in the bottom right corner of your Editor area.UIStackView. If you expand your stack view in your Document Outline you can see each of the stack view's subviews.Your storyboard should look like the following:
Needs some work huh? We won't worry about the styling yet. Let's move onto creating the inner bottom stack view.
First, we'll add the Tip Percent Stack View's subviews.
\nIn Main.storyboard, add an UILabel and UISegmentedControl to your view controller:
Step-by-step:
\n\n![\"Bill](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/bill_amount_stack_view_unstyled.png\" "\\"\\"")
\n UILabel from the Object Library and drop it below the first label.UISegmentedControl from the Object Library and position it so that it's next to the new label and below the text field.Now we'll move on to create our second inner stack view.
\nCreate the Tip Percent Stack View using the label and segmented control:
\n\n\n\nUILabel) in your storyboard.UISegmentedControl. This allows you to select multiple items at the same time.Embed In Stack button near the Add New Constraints button. It's located in the bottom right corner of your Editor area.UIStackView. If you expand your stack view in your Document Outline you can see each of the stack view's subviews.Your storyboard should look like the following:
Both stack views should still be unstyled. We'll get to that once we finish adding all our constraints.
Next, let's create our outer stack view.
\nCreate the Outer Stack View using both inner (horizontal) stack views:
\n\n\n\nStep-by-step:
\n\n![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/tip_percent_stack_view_unstyled.png\" "\\"\\"")
\n Embed In Stack button.Your storyboard should now look like the following:
With our inner and outer stack view constraints created, we'll need to add a few more constraints so auto-layout can determine each stack view's frame.
Let's start with remaining outer stack view constraints.
\nSet the outer stack view's frame with the following constraints:
\n\n\n\nStep-by-step:
\n\n![\"Outer](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/outer_stack_view_unstyled.png\" "\\"\\"")
\n Add New Constraints button.Add New Constraints popup:\n\nCenter Vertically In Container to create a new constraint. This will vertically align the outer stack view's center with it's super view's center.Next, we'll add our equal width constraints to make sure the width of our outer and inner stack views are equal.
\nSet equal widths constraints for each stack view:
\n\n\n\nStep-by-step:
\n\nAdd New Constraints button.Equal Widths checkbox and click Add 2 Constraints to create your equal width constraints.Our progress so far:
Let's add our final width constraints for our text field and segmented control respectively.
\nSet a width constraint for the Bill Amount Text Field:
\n\n\n\nStep-by-step:
\n\n![\"Stack](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/stack_view_equal_widths_unstyled.png\" "\\"\\"")
\n UITextField object in the Document Outline.Add New Constraints button.Finally, we'll need to add a fixed width constraint for our UISegmentedControl. Try to see if you can implement it by yourself.
\nAdd a width constraint for your Tip Percent Segmented Control object. Set the width to 173pts. If you have trouble or get stuck, look at the previous example of adding a width constraint to our text field.
\nCheck your solution below.
\nWe set a width constraint for our Tip Percent Segmented Control with the following:
\n\n\n\nStep-by-step:
\n\nUISegmentedControl object in the Document Outline.Add New Constraints button.We've come a long ways from where we first started. We've finished adding all of our stack views and each view's constraints.
As you can see, our input card is starting to look more and more like our design. Next, we'll work on configuring our input card view attributes.
At this point, you should be familiar with setting the attributes of a storyboard object using Interface Builder.
We'll quickly go through one together for review and let you do the rest on your own.
\nSet the Input Card's background color to tcDarkBlue:
Step-by-step:
\n\n![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_finished_constraints_unstyled.png\" "\\"\\"")
\n UIView).White Color to tcDarkBlue.Now it's your turn.
\nSet each of the following attributes for each respective element:
\n\nOuter Stack View:
\n\n0 to 35\nBill Amount Title Label (Inner Top Stack View):
\n\nLabel to Bill Amount\nSystem 17.0 to System 20.0\nDefault to tcWhite\n--- to Left Aligned\nBill Amount Text Field (Inner Top Stack View):
\n\n--- to Center Aligned\n$0.00\nDefault to No\nDefault to Decimal Pad\nDefault to Light\nDefault to tcHotPink\nTip Percent Title Label (Inner Bottom Stack View):
\n\nLabel to Tip %\nSystem 17.0 to System 20.0\nDefault to tcWhite\n--- to Left Aligned\nTip Percent Segmented Control (Inner Bottom Stack View):
\n\n2 to 3\nDefault to tcHotPink\nThe last attribute we'll need to set is the title for each segment our segmented control.
\nFor each segment of your segmented control, set the title attribute to 15%, 18%, 20% respectively:
Let's build and run our project to see our progress.
Bam! Our app matches our design (with exception of the rounded corners of course).
\nRounded corners (and shadows) make use of our view's layer property. We'll cover this later in this tutorial.
\nLet's continue by creating the IB connections needed for our input card.
We've done this before with our header view. Let's get some more practice creating IB connections.
We'll do another together for review.
Let's create an IBOutlet for our input card (UIView).
\nCreate an IBOutlet for the input card view:
Step-by-step:
\n\n![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_styled.png\" "\\"\\"")
\n Main.storyboard in your Editor area.ViewController.swift in your Project Navigator to open it in your Assitant Editor.UIView).ViewController class.inputCardView and click connect to create your new outlet.\nNow it's your turn to practice. If you find yourself stuck, look back on how we implemented our previous IBOutlets to refresh your memory.
Create the following IBOutlets:
UITextField named billAmountTextField\nUISegmentedControl named tipPercentSegmentedControl\nFinally, we'll need to create an IBAction for our segmented control.
\nTry implementing an IBAction for your UISegmentedControl. Set the Name as tipPercentChanged and check that the Event type is Value Changed. If you get stuck, you can look back in the tutorial or check the solution (only if you're really stuck!)
\nCreating an IBAction is similar to creating an IBOutlet:
Step-by-step:
\n\nUISegmentedControl) in the Document Outline.ViewController class.Outlet to Action.tipPercentChanged.Any to UISegmentedControl.Value Changed. If not, use the dropdown to set it to Value Changed.IBAction.When you're done, your storyboard and Swift code should look like the following:
If everything looks right, on to the next! If something's off, let's go back in the tutorial and make sure we didn't accidentally skip any steps.
"},{"id":"T0E6OlNlY3Rpb24tMTE1","title":"Output Card View","htmlContent":"We've gone through the process of implementing each of our subviews for two of the four UI groups. We'll need to do it once again. This time we'll be more hands-off to give you practice doing it yourself.
Let's take another look at our design:
For our output card, we'll need to add the following UI components:
We'll need to add four new labels. Next, let's think about how we'll layout our views.
Similar to our input card, we'll use a combination of stack views and constraints to implement our layout.
First, we'll have two horizontal stack views:
Next, we'll create a outer (vertical) stack view from the two inner stack views.
Just like the input card's outer stack view, we'll add the following constraints to set the frame of the outer stack view:
Finally, we'll add a few more constraints to make sure our subview widths are the correct size:
\nLook back on how we implemented the input card for more details if you're wondering why we've added any of the constraints.
\nWe've already had practice with using stack views and constraints. This time, try practicing on your own. If you get stuck, look back on how we implemented the layout for our input card.
\nCreate the inner top stack view with two UILabel views.
![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/input_card_ib_connections.png\" "\\"\\"")
\n ![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_card_design.png\" "\\"\\"")
\n ![\"Tip](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/tip_output_subviews.png\" "\\"\\"")
\n ![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_outer_stack_view.png\" "\\"\\"")
\n UILabel objects side-by-side from the Object Library.We'll also need to create the inner bottom stack view.
\nCreate the inner bottom stack view with two UILabel views.
UILabel objects side-by-side from the Object Library. Make sure both labels are below the previous stack view.Next, let's create our outer stack view.
\nCreate the Outer Stack View using both inner (horizontal) stack views.
\nEmbed In Stack button to create your outer stack view.Your storyboard should now look like the following:
Next, let's add the constraints for our outer stack view.
\nSet the outer stack view's frame with the following constraints:
\n\n![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_card_outer_stack_view_unstyled.png\" "\\"\\"")
\n Add New Constraints button.Add New Constraints popup:\n\nCenter Vertically In Container to create a new constraint. This will vertically align the outer stack view's center with it's super view's center.To finish up, we'll add the remaining width constraints.
\nSet each of the width constraints for each respective view:
\n\n\nTo create both equal width constraints:
\n\nAdd New Constraints button.Equal Widths checkbox and click Add 2 Constraints to create your equal width constraints.To create each title label's fixed width constraint:
\n\nUILabel object in the Document Outline. Make sure you're selecting the correct label.Add New Constraints button.Whew! That was a lot of work in a short time. Nice job! When you're finished adding all stack views and view constraints your storyboard should look like the following:
Next, we'll configure our output card view attributes so that it matches our designs.
\nSet each of the following attributes for each respective element. Remember, if you get stuck you can look back to the previous steps in the tutorial for reference.
\n\nOutput Card View:
\n\n![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_card_finished_constraints_unstyled.png\" "\\"\\"")
\n White Color to tcWhite\nOuter Stack View:
\n\n0 to 35\nTip Amount Title Label (Inner Top Stack View):
\n\nLabel to Tip Amount\nSystem 17.0 to System Light 20.0\nDefault to tcCharcoal\n--- to Left Aligned\nTip Amount Label (Inner Top Stack View):
\n\nLabel to $0.00\nSystem 17.0 to System Medium 20.0\nDefault to tcBlack\n--- to Right Aligned\nTotal Amount Title Label (Inner Bottom Stack View):
\n\nLabel to Total\nSystem 17.0 to System Light 20.0\nDefault to tcCharcoal\n--- to Left Aligned\nTotal Amount Label (Inner Bottom Stack View):
\n\nLabel to $0.00\nSystem 17.0 to System Medium 20.0\nDefault to tcBlack\n--- to Right Aligned\nLet's build and run our project to see our progress.
Our app is really starting to come along! Let's finish by creating the IB connections needed for our output card.
\nAdd the following IB connections. If you find yourself stuck, look back on how we implemented our previous IBOutlets to refresh your memory.
Use the diagram below for reference:
\n\n\n\nCreate the following IBOutlets:
![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_card_styled.png\" "\\"\\"")
\n UIView named outputCardView\nUILabel named tipAmountTitleLabel\nUILabel named tipAmountLabel\nUILabel named totalAmountTitleLabel\nUILabel named totalAmountLabel\nWhen you're done, your storyboard and Swift code should look like the following:
"},{"id":"T0E6OlNlY3Rpb24tMTE2","title":"Reset Button","htmlContent":"Let's finish our last UI group: the reset button. Unlike the other UI groups, we won't need to add any subviews or extra constraints. We'll just need to styling our button and add it's IB connections.
\nYou know the drill. Set each of the following attributes for the reset button:
\n\nReset Button:
\n\n![\"Output](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/output_card_ib_connections.png\" "\\"\\"")
\n System to Custom\nButton to RESET\nSystem 15.0 to System Bold 13.0\nDefault to tcWhite\nYour reset button should look like the following when you're done:
Last, we'll need to add the button's IB connections.
\nUse the Assistant Editor to add the following IB connections to your ViewController class:
![\"Reset](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/reset_button_styled.png\" "\\"\\"")
\n IBOutlet for the reset button named resetButton.IBAction for the reset button with the name resetButtonTapped with Event type of Touch Up Inside.When you're done, your storyboard and view controller source code should look like the following:
Let's make sure that our IBAction is working as expected.
\nAdd a print statement in your resetButtonTapped function to test that it's working:
@IBAction func resetButtonTapped(_ sender: UIButton) {\n print(\"reset button tapped\")\n}\n\n
Build and run your project. Tap the reset button a couple of times and verify that your print statement is being output to the debug console. Each time you tap the reset button, you should see the following:
"},{"id":"T0E6OlNlY3Rpb24tMTE3","title":"Conclusion","htmlContent":"That's a wrap! We've learned a ton about implementing complex layouts with auto-layout, constraints and stack views. In the process, we've gotten a lot of practice and implemented the majority of our UI. In the next section, we'll work on implementing the logic for our tip calculator.
"}]},"next":{"id":"T0E6OlBhZ2UtNDA=","slug":"tip-calculator-logic","title":"Tip Calculator Logic"},"previous":{"id":"T0E6OlBhZ2UtNDA=","slug":"tip-calculator-logic","title":"Tip Calculator Logic"}},{"id":"T0E6OlBhZ2UtNDA=","title":"Tip Calculator Logic","slug":"tip-calculator-logic","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTE4","title":"Tip Calculator Logic","htmlContent":"At this point, we've finished building our tip calculator's UI. However, if we launch our app and try to use it, nothing happens. Hmm... not particularly useful.
To prevent one star reviews, let's make our tip calculator work by writing code that:
Let's start by figuring out how to access our user's original bill amount as input!
"},{"id":"T0E6OlNlY3Rpb24tMTE5","title":"Reading Bill Amount Input","htmlContent":"To calculate our output, we'll first need the user to input their original bill amount.
When the user taps on the Bill Amount Text Field, the decimal pad keyboard will be displayed for user input. However, after the user is done typing their bill amount, there's no way for them to dismiss the keyboard.
We'll fix this first, by implementing a Calculate Button that will appear right above the keyboard.
\nTo keep things simple, there's a bit of magic that happens behind these scene for our soon-to-be calculate button. We've abstracted the majority into a custom UITextField subclass which will replace our current UITextField. Even if you don't fully understand how our calculate button is being displayed, bear with us for now!
\nOpen BillAmountTextField.swift from your Project Navigator. You should see the following:
The biggest thing to note, is that BillAmountTextField.swift is a custom subclass of UITextField. Our custom text field has an input accessory view, or a view that will be positioned just above the keyboard.
Don't worry too much about the code in this file for now. In short, it creates our Calculate Button, positions it within the's text field's input accessory view. We'll see that in a second.
To use our subclass, we'll need to replace our current UITextField with our BillAmountTextField subclass.
\nOpen Main.storyboard and set BillAmountTextField as our Bill Amount Text Field's custom class:
![\"Select](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/select_text_field.png\" "\\"\\"")
\n \n![\"Open](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/open_identity_inspector.png\" "\\"\\"")
\n \n![\"Reset](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/reset_button_ib_connections.png\" "\\"\\"")
\n ![\"Reset](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P4-Implementing-Subviews/assets/reset_button_debug_print.png\" "\\"\\"")
\n ![\"Bill](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/bill_amount_input.png\" "\\"\\"")
\n ![\"Bill](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/bill_amount_text_field_swift.png\" "\\"\\"")
\n BillAmountTextField. As you start typing, auto-complete should complete the class you're looking for. If it doesn't, something's gone wrong! \n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/set_text_field_class.png\" "\\"\\"")
\n \nNext, we'll need to update our text field's corresponding IBOutlet in our Swift code.
\nOpen ViewController.swift and find the IBOutlet for your text field. Update your type of billAmountTextField from UITextField to BillAmountTextField:
class ViewController: UIViewController {\n\n // ...\n\n @IBOutlet weak var billAmountTextField: BillAmountTextField!\n\n // ...\n\n}\n\n
That's it! We've set our text field to a custom UITextField subclass. Let's test our changes.
\nBuild and run your project. Tap on and select your billAmountTextField. The keyboard should slide up and you should see the following:
Do you see it? Right above the keyboard, you can see our new calculate button!
Next, we'll need to figure out a way to execute code when the Calculate Button is tapped.
Open BillAmountTextField.swift from your Project Navigator.
Look for the calculateButtonAction property:
class BillAmountTextField: UITextField {\n\n // ...\n\n var calculateButtonAction: (() -> Void)?\n\n // ...\n\n}\n
calculateButtonAction is a optional closure of type (() -> Void)?. Next, if you look for the calculateButtonTapped(_:) function, you'll see that calculateButtonAction is called each time the Calculate Button is tapped:
class BillAmountTextField: UITextField {\n\n // ...\n\n @objc private func calculateButtonTapped(_ sender: UIBarButtonItem) {\n calculateButtonAction?()\n }\n}\n
By setting the calculateButtonAction property of our custom text field, we can pass a closure that is executed each time the Calculate Button is tapped.
\nYou might be scratching your head, wondering how calculateButtonTapped(_:) is set up to be called each time the Calculate Button is tapped. We won't dive into too much details in this tutorial, but in short we've setup the equivalent IBAction programmatically with the following line of code:
let calculateButton = UIBarButtonItem(title: \"Calculate Tip\", style: .done, target: self, action: #selector(calculateButtonTapped))\n\n
Let's work on setting calculateButtonAction to execute a closure with a print statement.
\nOpen ViewController.swift. Add the following code to viewDidLoad:
override func viewDidLoad() {\n super.viewDidLoad()\n\n // 1\n billAmountTextField.calculateButtonAction = {\n // 2\n print(\"calculate button tapped\")\n }\n}\n\n
Step-by-step:
\n\n![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/finished_custom_text_field.png\" "\\"\\"")
\n calculateButtonAction variable of our billAmountTextField object to a new closure. To refresh your memory, a closure is a nameless function.\nWhat is the viewDidLoad function and what does it do?
viewDidLoad is one of many view controller lifecycle functions. These functions are inherited from the UIViewController object. Each lifecycle function defines important events such as a view controller appearing or disappearing from screen. In particular, viewDidLoad is called when the view controller's view hierarchy (the root view and it's subviews) are loaded into memory.
Other common view controller lifecycle functions include:
\nfunc viewWillAppear(_ animated: Bool) // Called when the view is about to made visible. Default does nothing\n\nfunc viewDidAppear(_ animated: Bool) // Called when the view has been fully transitioned onto the screen. Default does nothing\n\nfunc viewWillDisappear(_ animated: Bool) // Called when the view is dismissed, covered or otherwise hidden. Default does nothing\n\nfunc viewDidDisappear(_ animated: Bool) // Called after the view was dismissed, covered or otherwise hidden. Default does nothing\n\nfunc viewDidLayoutSubviews() // Called just after the view controller's view's layoutSubviews method is invoked. Subclasses can implement as necessary. The default is a nop.\n\n
For our case, viewDidLoad is useful for calling any setup code that we want to happen the first time the view controller's view loads.
Let's test that the closure we've set in our viewDidLoad method is called after tapping the Calculate Button.
\nBuild and run your project:
\n\nbillAmountTextField.After tapping the Calculate Button a couple times, check that the print statement appears in your debug console.
\n\n\nNice! So far, we've successfully executing our print statement each time the Calculate Button is tapped. Last, let's change our print statement to print out the actual bill amount that the user has input in the Bill Amount Text Field.
Just like all our other view objects, the UITextField is a class with many instance variables and functions. Since our BillAmountTextField is a custom subclass of UITextField it inherits all of it's instance functions and variables.
open class UITextField : UIControl, UITextInput, NSCoding, UIContentSizeCategoryAdjusting {\n\n open var text: String?\n\n @available(iOS 6.0, *)\n @NSCopying open var attributedText: NSAttributedString?\n\n open var textColor: UIColor?\n\n open var font: UIFont?\n\n // ...\n}\n
Looking at the class definition of UITextField, you can see that accessing the text within a text field is a simple as reading it's text variable.
Let's try it out!
\nChange the code in your viewDidLoad to the following:
override func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n guard let billAmountText = self.billAmountTextField.text\n else { return }\n\n print(\"Bill Amount: \\(billAmountText)\")\n }\n}\n\n
Notice in the code above, we use the guard keyboard to make sure text is a non-nil value. If the text value of our billAmountTextField is nil, the guard statement will return and the rest of the code in our closure won't be executed.
Let's test our code again.
\n\n![\"Calculate](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/calculate_button_console_print.png\" "\\"\\"")
\n billAmountTextField.As you can see, the correct bill amount now prints in our debug console!
"},{"id":"T0E6OlNlY3Rpb24tMTIw","title":"Calculating Tip","htmlContent":"Now that we've successfully read our user's bill amount input, we're going to implement the logic to calculate our outputs (tip amount + total amount).
To calculate our outputs, we'll need to do the following:
![\"Bill](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/bill_amount_console_print.png\" "\\"\\"")
\n String to Double. The Bill Amount value should be rounded to the 2 nearest decimal places.First, let's convert our bill amount input value from a String to a Double. We can do this using Swift's built-in type initializers.
Let's take a a look:
\nOpen ViewController.swift and change viewDidLoad to the following:
override func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n // 1\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n print(\"Bill Amount: \\(billAmount)\")\n }\n}\n\n
As you can see, Swift provides us with type initializers that allow us to easily convert from one type to another. In this case, we use the Double(_:) initializer to convert our billAmountText value from String to Double. If the string is an invalid value that can't be converted to a double, our initializer will fail and return nil.
Next, let's clean up our bill amount input by rounding the value to the nearest two decimal places. We can use the rounded() function on type Double like the following:
\nSanitize the bill amount value by rounding to the nearest 2 decimal places:
\noverride func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n // 1\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n print(\"Bill Amount: \\(roundedBillAmount)\")\n }\n}\n\n
With our correctly formatted bill amount, we can calculate the tip amount of the bill. To start, let's use a fixed tip percent of 15%. While we're at it, let's also sanitize our tip amount by rounding to the nearest 2 decimal places.
\nIn the future, we'll use the segmented control to allow the user to select a dynamic tip percent.
\n\nCalculate and sanitize the tip amount:
\noverride func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n // 1\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n // 2\n let tipPercent = 0.15\n let tipAmount = roundedBillAmount * tipPercent\n let roundedTipAmount = (100 * tipAmount).rounded() / 100\n\n print(\"Bill Amount: \\(roundedBillAmount)\")\n print(\"Tip Amount: \\(roundedTipAmount)\")\n }\n}\n\n
To wrap up our logic, we can calculate our total amount by adding together our tip and bill amounts.
\nCalculate the total amount:
\noverride func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n // 1\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n // 2\n let tipPercent = 0.15\n let tipAmount = roundedBillAmount * tipPercent\n let roundedTipAmount = (100 * tipAmount).rounded() / 100\n\n // 3\n let totalAmount = roundedBillAmount + roundedTipAmount\n\n print(\"Bill Amount: \\(roundedBillAmount)\")\n print(\"Tip Amount: \\(roundedTipAmount)\")\n print(\"Total Amount: \\(totalAmount)\")\n }\n}\n\n
Let's test our logic to see if it's working as expected.
\nBuild and run your project. Test a couple values and verify that the print statements in the debug console are correct.
\n\n\nWe'll need to update the UI with the output values that we've calculated. But first, we'll need to dismiss the keyboard so it isn't covering the output card.
\nIn ViewController.swift, add the following lines of code in viewDidLoad:
billAmountTextField.calculateButtonAction = {\n // dismiss keyboard if it's displayed\n if self.billAmountTextField.isFirstResponder {\n self.billAmountTextField.resignFirstResponder()\n }\n\n // ...\n}\n\n
If you build and run your project again. Now, after tapping the Calculate Button, the keyboard will be dismissed.
Now that our output card is no longer being hidden, we can work on updating the UI.
If you take a look at the UILabel class definition, you'll see the following:
class UILabel : UIView, NSCoding, UIContentSizeCategoryAdjusting {\n\n var text: String?\n\n var font: UIFont!\n\n var textColor: UIColor!\n\n // ...\n\n}\n
To update the text that a UILabel displays, we can use the text property of each UILabel. Let's update our calculateButtonAction closure so that it sets the output card's tip amount and total amount labels.
\nIn ViewController.swift, update your code update the output card's labels:
override func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n // dismiss keyboard if it's displayed\n if self.billAmountTextField.isFirstResponder {\n self.billAmountTextField.resignFirstResponder()\n }\n\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n let tipPercent = 0.15\n let tipAmount = roundedBillAmount * tipPercent\n let roundedTipAmount = (100 * tipAmount).rounded() / 100\n\n let totalAmount = roundedBillAmount + roundedTipAmount\n\n // Update UI\n self.billAmountTextField.text = String(format: \"%.2f\", roundedBillAmount)\n self.tipAmountLabel.text = String(format: \"%.2f\", roundedTipAmount)\n self.totalAmountLabel.text = String(format: \"%.2f\", totalAmount)\n }\n}\n\n
The code we just added, updates the UI by setting each corresponding label's text property to a formatted string.
Build and run your project. Input a bill amount and tap the Calculate Button. If it works, you should see your tip and bill amounts show up on the output card!
\n\n\nBefore moving on, let's refactor some of our existing code. Right now, the majority of our logic for calculating the tip and bill amounts are in our calculateButtonAction closure.
Let's move our logic out into it's own function so it can be re-used.
\nIn ViewController.swift, create a new function for calculating tip:
func calculate() {\n // dismiss keyboard\n if self.billAmountTextField.isFirstResponder {\n self.billAmountTextField.resignFirstResponder()\n }\n\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n let tipPercent = 0.15\n let tipAmount = roundedBillAmount * tipPercent\n let roundedTipAmount = (100 * tipAmount).rounded() / 100\n\n let totalAmount = roundedBillAmount + roundedTipAmount\n\n // Update UI\n self.billAmountTextField.text = String(format: \"%.2f\", roundedBillAmount)\n self.tipAmountLabel.text = String(format: \"%.2f\", roundedTipAmount)\n self.totalAmountLabel.text = String(format: \"%.2f\", totalAmount)\n}\n\n
Next, let's change our calculateButtonAction closure to use our calculate method.
\nIn ViewController.swift, change viewDidLoad to the following:
override func viewDidLoad() {\n super.viewDidLoad()\n\n billAmountTextField.calculateButtonAction = {\n self.calculate()\n }\n}\n\n
We've separated our logic into it's own function. This will help us as we implement our UISegmentedControl.
Our UI is being correctly updated when we calculate our tip. Next, let's go back and implement our UISegmentedControl.
Currently, our view controller contains an IBAction that is triggered each time the user selects a new segment of the UISegmentedControl. When this IBAction is triggered, we want to re-calculate our tip using the new selected tip percent.
First, let's update our IBAction to calculate the tip whenever a segment is selected.
\nIn ViewController.swift, update tipPercentChanged(_:) to the following:
@IBAction func tipPercentChanged(_ sender: UISegmentedControl) {\n calculate()\n}\n\n
Next, we'll update our calculate function to use the correct tip percent of the UISegmentedControl.
\nIn ViewController.swift, change the calculate() function to the following:
func calculate() {\n // dismiss keyboard\n if self.billAmountTextField.isFirstResponder {\n self.billAmountTextField.resignFirstResponder()\n }\n\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n return\n }\n\n let roundedBillAmount = (100 * billAmount).rounded() / 100\n\n let tipPercent: Double\n switch tipPercentSegmentedControl.selectedSegmentIndex {\n case 0:\n tipPercent = 0.15\n case 1:\n tipPercent = 0.18\n case 2:\n tipPercent = 0.20\n default:\n preconditionFailure(\"Unexpected index.\")\n }\n\n let tipAmount = roundedBillAmount * tipPercent\n let roundedTipAmount = (100 * tipAmount).rounded() / 100\n\n let totalAmount = roundedBillAmount + roundedTipAmount\n\n // Update UI\n self.billAmountTextField.text = String(format: \"%.2f\", roundedBillAmount)\n self.tipAmountLabel.text = String(format: \"%.2f\", roundedTipAmount)\n self.totalAmountLabel.text = String(format: \"%.2f\", totalAmount)\n}\n\n
In the code above, we use the selectedSegmentIndex of our segmented control with a switch statement to determine the correct tip percent. tipPercent is then used to correctly calculate our tip.
Let's test out our new changes!
\nBuild and run your project. Use different combinations of bill amounts and tip percents and see if the output card updates correctly.
\nTo finish up our logic, let's implement our reset functionality.
Similar to our calculate logic, let's separate our reset logic into it's own function.
In our reset logic, we'll want to reset our tip calculator to it's initial state. We'll need to remember to do the following:
![\"Total](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/total_amount_print_console.png\" "\\"\\"")
\n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P5-Tip-Calculator-Logic/assets/set_output_labels.png\" "\\"\\"")
\n text value to nil\nselectedSegmentIndex to 0\n$0.00\n\nTry implementing the logic above in a function called clear().
\nYour new clear() function should be the following:
func clear() {\n billAmountTextField.text = nil\n tipPercentSegmentedControl.selectedSegmentIndex = 0\n tipAmountLabel.text = \"$0.00\"\n totalAmountLabel.text = \"$0.00\"\n}\n\n
Next, we'll need to update the IBAction of our reset button.
\nIn ViewController.swift, update your resetButtonTapped(_:) method with the following:
@IBAction func resetButtonTapped(_ sender: UIButton) {\n clear()\n}\n\n
Last, when our calculate gets invalid input, let's also reset the calculator's state.
\nChange calculate() to the following:
func calculate() {\n // dismiss keyboard\n if self.billAmountTextField.isFirstResponder {\n self.billAmountTextField.resignFirstResponder()\n }\n\n guard let billAmountText = self.billAmountTextField.text,\n let billAmount = Double(billAmountText) else {\n clear()\n return\n }\n\n // ...\n\n}\n\n
It works! In this section, we've taken our UI and IB connections and implemented the logic behind our tip calculator.
We started by retrieving the user's input from the Bill Amount Text Field. Next, we used the user's input to calculate bill's tip and total amounts. To finish up, we updated our UI by setting each respective label on our Output Card.
In the next section, we'll finish the remaining styling and functionality of our tip calculator!
"}]},"next":{"id":"T0E6OlBhZ2UtNDE=","slug":"theming","title":"Theming and Styling"},"previous":{"id":"T0E6OlBhZ2UtNDE=","slug":"theming","title":"Theming and Styling"}},{"id":"T0E6OlBhZ2UtNDE=","title":"Theming and Styling","slug":"theming","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTE5Mjg=","title":"Theming and Styling","htmlContent":"To finish our tip calculator, we'll need to add some final touches to styling and implement our light/dark theme switch.
Let's review what our app looks like so far:
Next, let's take a look at our designs:
Although the differences are subtle, to complete our UI, we'll need to add the following:
Let's start by making these changes!
"},{"id":"T0E6OlNlY3Rpb24tMTE5Mjk=","title":"Configuring Layers","htmlContent":"To make our final UI changes, we'll need to learn about CALayer.
Each UIView object has a layer property of type CALayer. The view's layer is a lower-level API that gives developers more control on how the view is rendered.
By using each view's layer property, we can easily create shadows, add rounded corners and display borders.
Before we start with configuring our view's layers, let's first create a new, empty method in our view controller.
\nIn ViewController.swift, add the following function:
func setupViews() {\n // nothing yet\n}\n\n
We'll use this method to add code that initially configures each view's respective layer.
This function will need to be called at the beginning of the view controller's lifecycle so it initially makes all of our layer customizations.
\nIn ViewController.swift, call setupViews() in viewDidLoad():
override func viewDidLoad() {\n super.viewDidLoad()\n\n setupViews()\n\n billAmountTextField.calculateButtonAction = {\n self.calculate()\n }\n}\n\n
With our near setupViews() method, we can add the code for adding a shadow to the bottom of the header view.
\nAdd a shadow by configuring the Header View's layer:
\nfunc setupViews() {\n headerView.layer.shadowOffset = CGSize(width: 0, height: 1)\n headerView.layer.shadowOpacity = 0.05\n headerView.layer.shadowColor = UIColor.black.cgColor\n headerView.layer.shadowRadius = 35\n}\n\n
CALayer has many attributes that allow you to configure a view's appearance. In the code above, we add code to create a slight shadow for our Header View.
Build and run your project. You should see your shadow appear under your Header View:
\n\n\n\nThe shadow in our UI is soft and can be hard to see. If you want to test that your code works, you can adjust the layer's shadowOpacity to a value closer to 1. Don't forget to change the value back after testing.
Next, we'll look at setting a view's layer to have rounded corners.
Similar to setting our shadow, each CALayer also has a cornerRadius property that we can adjust to give our view a rounded corner.
Let's add the code to give our Input Card rounded corners.
\nAdd rounded corners to the input card:
\nfunc setupViews() {\n headerView.layer.shadowOffset = CGSize(width: 0, height: 1)\n headerView.layer.shadowOpacity = 0.05\n headerView.layer.shadowColor = UIColor.black.cgColor\n headerView.layer.shadowRadius = 35\n\n inputCardView.layer.cornerRadius = 8\n inputCardView.layer.masksToBounds = true\n}\n\n
It's important to note that we also set the layer's maskToBounds property to true. This prevents our view's content from appearing outside of our rounded corner's boundary.
Let's test that our code works!
\nBuild and run your project the updates to your UI:
\n\n\nEasy enough! Time to practice on your own.
\nAdd rounded corners (with the same corner radius as above) to give both the outputCardView and resetButton rounded corners.
\nTo add rounded corners for both views, you should have added the code below to your setupViews() method:
func setupViews() {\n\n // ...\n\n outputCardView.layer.cornerRadius = 8\n outputCardView.layer.masksToBounds = true\n\n resetButton.layer.cornerRadius = 8\n resetButton.layer.masksToBounds = true\n}\n\n
To finish up our UI changes, we'll need to add a border to our output card. Again, CALayer has two properties: borderWidth and borderColor that allow us to set a border for a layer. No surprise...
\nAdd the following code to setupViews():
func setupViews() {\n\n // ...\n\n outputCardView.layer.cornerRadius = 8\n outputCardView.layer.masksToBounds = true\n\n // set output card border\n outputCardView.layer.borderWidth = 1\n outputCardView.layer.borderColor = UIColor.tcHotPink.cgColor\n\n resetButton.layer.cornerRadius = 8\n resetButton.layer.masksToBounds = true\n}\n\n
We've finished styling our tip calculator's subviews. Your tip calculator should look like the following:
"},{"id":"T0E6OlNlY3Rpb24tMTE5MzA=","title":"Light / Dark Theme","htmlContent":"The last feature we need to implement is the ability to toggle themes. Currently, our app has a light colored theme. When we're finished, our UISwitch will be able to toggle from our light colored theme to a dark one (and vice versa).
Let's start by creating a new function that will eventually contain all our theme switching code.
\nIn ViewController.swift, add the following new method:
func setTheme(isDark: Bool) {\n\n}\n\n
Next, we'll create a new data structure that contains each theme's color information. When we're done, we'll be able to use this object to switch between themes.
\nCreate a new ColorTheme struct:
![\"New](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/new_file_template.png\" "\\"\\"")
\n \n![\"Select](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/select_swift_template.png\" "\\"\\"")
\n \n![\"Current](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/current_app.png\" "\\"\\"")
\n ![\"Final](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/final_design.png\" "\\"\\"")
\n ![\"Header](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/header_shadow.png\" "\\"\\"")
\n ![\"Input](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/input_rounded_corners.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/finished_ui.png\" "\\"\\"")
\n ColorTheme.swift and click Create. \n ![\"Set](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/set_struct_name.png\" "\\"\\"")
\n \nWhen you're finished, you should see a new Swift source file named ColorTheme.swift:
With our new source file, we can create our ColorTheme data structure.
\nIn ColorTheme.swift, add the following code:
import UIKit\n\nstruct ColorTheme {\n\n // MARK: - Instance Vars\n\n let isDefaultStatusBar: Bool\n let viewControllerBackgroundColor: UIColor\n\n let primaryColor: UIColor\n let primaryTextColor: UIColor\n\n let secondaryColor: UIColor\n\n let accentColor: UIColor\n let outputTextColor: UIColor\n}\n\n
We create a new struct that contains the data for each theme. Each property in ColorTheme sets the color of a corresponding view in our tip calculator's UI.
Using our ColorTheme struct, we can create our light and dark color themes. We'll do this using class variables.
\nIn ColorTheme.swift, create two new class variables:
struct ColorTheme {\n\n // MARK: - Class Vars\n\n static let light = ColorTheme(isDefaultStatusBar: true,\n viewControllerBackgroundColor: .tcOffWhite,\n primaryColor: .tcWhite,\n primaryTextColor: .tcCharcoal,\n secondaryColor: .tcDarkBlue,\n accentColor: .tcHotPink,\n outputTextColor: .tcAlmostBlack)\n\n static let dark = ColorTheme(isDefaultStatusBar: false,\n viewControllerBackgroundColor: .tcAlmostBlack,\n primaryColor: .tcMediumBlack,\n primaryTextColor: .tcWhite,\n secondaryColor: .tcBlueBlack,\n accentColor: .tcSeafoamGreen,\n outputTextColor: .tcWhite)\n\n // ...\n\n}\n\n
We can use the data from the class variables we created to change the current color theme of our tip calculator.
\nIn ViewController.swift, update setTheme(isDark:) to use our change the color of our tip calculator depending on the active theme.
func setTheme(isDark: Bool) {\n let theme = isDark ? ColorTheme.dark : ColorTheme.light\n\n view.backgroundColor = theme.viewControllerBackgroundColor\n\n headerView.backgroundColor = theme.primaryColor\n titleLabel.textColor = theme.primaryTextColor\n\n inputCardView.backgroundColor = theme.secondaryColor\n\n billAmountTextField.tintColor = theme.accentColor\n tipPercentSegmentedControl.tintColor = theme.accentColor\n\n outputCardView.backgroundColor = theme.primaryColor\n outputCardView.layer.borderColor = theme.accentColor.cgColor\n\n tipAmountTitleLabel.textColor = theme.primaryTextColor\n totalAmountTitleLabel.textColor = theme.primaryTextColor\n\n tipAmountLabel.textColor = theme.outputTextColor\n totalAmountLabel.textColor = theme.outputTextColor\n\n resetButton.backgroundColor = theme.secondaryColor\n}\n\n
In addition, we'll need to add some more code to make sure the color of our status bar is correctly updated.
\nIn ViewController.swift, add the following properties to the top of your class:
class ViewController: UIViewController {\n\n // MARK: - Properties\n\n // 1\n var isDefaultStatusBar = true\n\n // 2\n override var preferredStatusBarStyle: UIStatusBarStyle {\n return isDefaultStatusBar ? .default : .lightContent\n }\n\n // ...\n\n}\n\n
Explaining the new properties we added:
\n\n![\"New](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/new_empty_file.png\" "\\"\\"")
\n isDefaultStatusBar keeps our Bool of whether we should show the default or light status bar. If default, the status bar color is black.preferredStatusBarStyle property and use isDefaultStatusBar to set our view controller's status bar style.You might be wondering 'Why we need two properties to set the status bar style?'. Good question. Our preferredStatusBarStyle property is inherited from our super class and can't be set directly. Because of this, we need our isDefaultStatusBar variable to keep track of which status bar style preferredStatusBarStyle should display.
To make sure our status bar is updated when our theme is toggled, we'll need to add the following code to our setTheme(isDark:) method.
\nIn ViewController.swift, update setTheme(isDark:):
func setTheme(isDark: Bool) {\n\n // ...\n\n isDefaultStatusBar = theme.isDefaultStatusBar\n setNeedsStatusBarAppearanceUpdate()\n}\n\n
To toggle our theme each time our UISwitch is toggled, we'll need to connect our setTheme(isDark:) to our themeToggled(_:) method.
\nCall setTheme(isDark:) in themeToggled(_:):
@IBAction func themeToggled(_ sender: UISwitch) {\n setTheme(isDark: sender.isOn)\n}\n\n
Our theme will be switched from light to dark and vice versa each time our UISwitch is toggled. The theme will be set corresponding to the switch's isOn property.
To clean up, we'll need to make sure to set the initial theme state for our tip calculator. We can do this by calling our setTheme(isDark:) at the beginning of our view controller lifecycle.
\nIn ViewController.swift, change your view controller to the following:
override func viewDidLoad() {\n super.viewDidLoad()\n\n setupViews()\n setTheme(isDark: false)\n\n billAmountTextField.calculateButtonAction = {\n self.calculate()\n }\n}\n\n
We call setTheme(isDark: false) so that when our view controller's view are first setup, our initial theme will be set.
Let's test our code to see if it works!
\nBuild and run your project. Toggle the UISwitch to switch between light and dark color themes. If everything goes well, you should be able to use your tip calculator in dark mode! Which theme do you like better?
We promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of the learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
This allows us to get feedback on how well the students are grasping the learning outcomes, and tells us where we can improve the tutorial experience.
"},{"id":"T0E6OlNlY3Rpb24tMTE5MzI=","title":"What's Next?","htmlContent":"After implementing our theming feature, we've completed our tip calculator's functionality and design! In the next section, we'll review what we've learned and set you on a challenge to practice your new skills.
"}]},"next":{"id":"T0E6OlBhZ2UtNDI=","slug":"conclusion-oHM=","title":"Conclusion"},"previous":{"id":"T0E6OlBhZ2UtNDI=","slug":"conclusion-oHM=","title":"Conclusion"}},{"id":"T0E6OlBhZ2UtNDI=","title":"Conclusion","slug":"conclusion-oHM=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTI5","title":"Conclusion","htmlContent":"Well done! You've finished your second iOS tutorial.
Along the way, you've picked up some new skills:
We've also got to review the basics:
![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P6-Theming/assets/finished_ui_dark.png\" "\\"\\"")
\n ![\"Finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P7-Conclusion/assets/finished_app.png\" "\\"\\"")
\n IBOutlet and IBAction connections with Interface Builder\nAnother app built. You're well on your way to becoming an awesome iOS developer.
Stop and take a moment to appreciate how far you've come!
"},{"id":"T0E6OlNlY3Rpb24tMTMw","title":"A Challenge Approaches","htmlContent":"You're not done yet. After you finish soaking in the feel-good emotions, it's time to put your skills to the test.
If you're from another country, or just an avid traveller, you'll know that many countries don't have a custom of tipping. In these countries, our tip calculator won't do us much good.
So instead, you're going to build a Currency Exchange Calculator that you can use when you're traveling abroad. To build our Currency Exchange Calculator app, we'll use make of the same skills and concepts we learned during this tutorial.
As always, try completing this challenge as much on your own as possible. If you do get stuck, you can always refer back to this tutorial for help!
Above is an example design you can use to build your Currency Exchange Calculator. It's based off a popular currency convertor on the App Store. Feel free to get creative and add your own style into the app design.
Just like your Tip Calculator, your Currency Exchange Calculator app will involve reading user input and converting it to a different value.
Your app should take a input of U.S. dollars and immediately convert it into a currency of your choice. Some popular currencies you can consider using include the following: Euro, Yen, Rupee, Bitcoin.
Notice that there aren't any text fields or segmented controllers in the design above. Each number is a button that should change the input and output of the currency convertor.
If you'd like a better idea of how the app works, go ahead and download the free version of this popular currency convertor on the App Store. You should not need to purchase anything to download this app.
\nFor your exchange calculation, find the currency conversion rate online and hard-code it into your app.
\nGood luck the challenge! Remember, you can look back on the tutorial or your previous code if you get stuck.
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMzg=","title":"UI Layout","slug":"ui-layout","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTA1","title":"UI Layout","htmlContent":"We'll start building our app by implementing the UI in Interface Builder. For reference, here are the tip calculator designs:
"},{"id":"T0E6OlNlY3Rpb24tMTA2","title":"Creating Views","htmlContent":"We'll get started by creating our header view with a UIView.
\nUIKit has it's own header-like bar called the UINavigationBar. To keep things simple, we'll start from scratch and create our own header view instead of using iOS's UINavigationBar.
\nOpen Main.storyboard from your project navigator. You should see your single view controller. \n \n
Next, we'll add a UIView and reposition/resize it to be our header view.
\nCreate a header view by dragging an UIView object from the Object Library to the top of the view controller. Don't worry too much about the perfect size and position for now. We'll handle that later.
The new UIView object that we just added is going to be our custom header view. We'll add other subviews onto it later.
You might notice, that our header view is a little hard to see because it's the same color as the view controller's root view: white. Let's change the color of our root view to add some contrast.
\nChange the view controller's root view to off-white:
\n\n![\"Currency](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Tip-Calculator-Swift4@9457825dfd233448537fd0fa62707e9211e8bfb8/P7-Conclusion/assets/currency_xc_design.png\" "\\"\\"")
\n View Controller Scene tree. Make sure you're not selecting the header view by accident. \n \n \n\n \nBackground Color field. \n \n \nOff-White color under the Named Colors subheader in the dropdown menu. \n \n \nWe've changed the background color attribute of the root view to a different color. The Off White color we chose was pre-defined in our Assets.xcasset asset catalog.
Before we add more views or configure more properties, let's learn about the iOS coordinate system and the frame attribute of UIView and it's subclasses. We'll need to learn about the iOS coordinate system to properly position and size our views.
You can think of your phone screen as a coordinate system with it's origin in the top-left corner.
As we've previously discussed, view can be represented as rectangles drawn on our device's screen. This rectangle can be represented by it's starting point (top-left corner of the rectangle) along with it's size (width and height). Let's look at an example:
\nIn the image above, what is the red view's starting point? What about it's size?
\n\nAs you can see from the numbered X and Y axis, the view rectangle starts at the point (27, 48) in the iOS coordinate system and has a width of 50pts and a height of 35pts.
\nIn Swift, we have the CGPoint and CGSize data types to represent coordinate points and sizes respectively. A CGPoint value is a pair of X and Y values. A CGSize value is a pair of width and height values.
Additionally, these two data types can be combined into CGRect data type (X, Y, width, height) that represents a rectangle represented by it's point and size properties.
Each UIView has a property called it's frame of type CGRect. You can use each view's frame property to manipulate it's position and size.
\nAt some point, you'll come across another view property named bounds that's also a CGRect. The frame of a view represents the view's rectangle in it's super view's coordinate system while it's bound property refers to the rectangle using the view's top-left corner as the origin of it's coordinate system. In other words, the bounds property of a view will always have an (x, y) of (0, 0) and retain it's size.
With our new knowledge, let's properly re-position and re-size our header view.
Looking back at our design, we can determine the CGRect of our header view.
\nWhat should the CGRect (x, y, width, height) of our header view be?
\nThe frame of our header view is (0, 0, 375, 105).
\nLet's change our current header view's frame in storyboard.
\nIn Main.storyboard perform the following:
Frame Rectangle fields. Change the X, Y, Width and Height values in the size inspector to the value of the rect in the solution above.Let's see if our changes worked! Build and run the app in the iPhone 8 simulator by clicking the run button in the toolbar.
\nYou should see the custom header view against your off-white root view in the simulator. Nothing fancy yet!
But what happens if we run our app in a simulator with a different size screen?
"},{"id":"T0E6OlNlY3Rpb24tMTA4","title":"Handling Different Screen Sizes","htmlContent":"Let's revisit our previous diagram explaining a view's frame within the iOS coordinate system.
What would happen if our app was ran across multiple different screen sizes?
As you can see, the frame of the UIView needs to be different for each device with a different screen size.
\nCan you think of some ways of how we could solve this problem?
\nOne way we could solve different frames for each screen size is by programmatically calculating and setting each view's frame. However, that would be super messy and lead to us having to write a lot of code just make sure each view is the right size for each screen.
To solve this problem, Apple created a relative positioning tool called Auto-Layout. With Auto-Layout, we define constraints.
Constraints are rules where you can define the relative positioning or size between two views. Auto-Layout will then calculate all the math and set our view's frame so that all of the constraints (rules) are followed. This allows us to build dynamic view layouts that re-position and re-shape for any screen size.
For example, we could give our example view the following constraints:
\nNote the positive and negative values that are based on the direction of the iOS coordinate system.
\nNow if the screen changes, let's see how our view will react:
See how auto-layout calculates the view's frame based on our constraints for each different screen size?
If instead, we wanted give the view a fixed width or height, we can also add constraints as fixed constants. Let's give our example view a new set of constraints:
Auto-layout and constraints give us an easy way to build dynamic view layouts for any iOS device.
Let's set our first constraints by changing our header view in Interface Builder to make use of constraints.
\nWhat constraints should we set for our header view? \n \n
\nOur header view would have the following constraints:
\n\nLooks pretty good. Let's look at our header view with these constraints across each device:
Hold on. Not so fast. With the introduction of the iPhone X, the sensor housing (the top notch) requires to add some additional thought to our header view frame.
Because the top notch, we'll need to make calculate the header view's height based on the bottom of the top notch for the iPhone X.
To help us handle this, Apple has provided us with the Safe Area.
The Safe Area provides us with valuable layout information to help us properly create constraints for our views. In our case, the top Safe Area provides us with the bottom of the Status Bar for each device:
Revise our original constraints, we'll need to replace our height constraint with a bottom constraint that is -85 from the top Safe Area. Now our header view dynamically calculate it's layout correctly across each device.
It might be a little hard to see, but the height of the header view is slightly bigger for the iPhone X because of it's top notch.
With our correct constraints, let's set them in Interface Builder.
Let's set our constraints in Interface Builder. First we'll start by adding our top, leading (left) and trailing (right) constraints.
\nOpen Main.storyboard from your Project Navigator. Select your header view (UIView) and add the following constraints:
With our header view selected, we click on the Add New Constraints button and set each of the edge constraints:
\n\nCurrently, our header view has a incomplete set of constraints. We haven't added a constraint to define the view's height yet. If we run the app now, we won't see our header view because it's height will be 0. Xcode and Interface Builder try to warn us of this:
You'll notice above:
Let's add the final constraint to define the header view's height.
\nAdd a constraint from the bottom edge of the header view to the top edge of the Safe Area:
\n\nTo add the constraint in the video, follow the steps below:
\n\nUIView) in the Document Outline.Congrats, we've added our first set of constraints to our header view. Try running your app in multiple different simulators and see if our header view properly adjusts it's frame to each device.
It works! Next, we'll dive deeper into auto-layout and the different kind of constraints that are available to use.
"},{"id":"T0E6OlNlY3Rpb24tMTA5","title":"Different Types of Constraints","htmlContent":"To properly setup constraints for our header view, we've only used one type of constraints but there are many different types of constraints that you can use to build complex UI layouts. Before setting up constraints for any of our other fews, let's look at common constraints we can use to build dynamic layouts with auto-layout.
First, let's review our relative positioning constraint. Relative positioning allows to position a view relative to another view. For example, we can create a constraint that positions the blue view 45pts from the trailing (right) side of the red view:
Positive and negative values (relative to the iOS coordinate system) denote the direction of the constraint. For example, we can instead add a constraint that positions the blue view -75pts from the trailing (right) side of the red view:
\nWhen you're creating relative positioning constraints, you'll need to keep in mind which view's edge the constraint is starting from, the other view's edge where the constraint is ending at and the position or negative value (direction) of the constraint.
\nWhen you're setting your relative positioning constraints, make sure you're aware of what they're relative to. For example, let's set the blue view 20pts below the red view:
But is that what we wanted? In the case above, we set our blue view to have a constraint of 20pts below the red view but relative to the wrong edge of the red view!
This is probably what we really intended:
As you can see, it's a very common mistake to accidentally set constraints relative to the wrong edge or sometimes even the wrong view!
\nIt's also important to take the Safe Area into consideration when setting a view relative to the root view. If you're setting the top edge of your view to the top edge of the root view, you'll need to verify that you don't accidentally set it to the top edge of the Safe Area instead, or vice versa.
\nAs we briefly discussed earlier, it's also possible to set fixed constant constraints. These are used to set a fixed width or height of a view. For example, we can give a view a fixed width and height of 100pts:
In this case, the red view will always remain the same size (100x100) regardless of changing screen sizes.
\nIf you run into a situation where you've added your constraints but don't see your view, you might have forgotten to add certain constraints. Remember, each view's frame must be able to be determined by it's auto-layout constraints.
\n\nIn the previous example, if we forgot to add the height constraint, our view wouldn't show up because the height of it's frame is 0.
\nAnother positioning constraint we can use is aligning center axes vertically or horizontally. For example, we can create a constraint that vertically aligns the blue view's center to red views:
Or we horizontally align the two views:
You can also choose to offset (positive or negative to determine direction) from the superview:
Aspect ratio constraints are also available. You can set the height to be a ratio of the width or vice versa. This can be useful if you want to make sure the view is always a square (1:1 aspect ratio) or if you decide that the height will always be 1/2 of the width (1:2 aspect ratio).
In the following example, we set the aspect ratio to (1:3) where the height is a third of the width:
The last constraint that we'll cover is the ability to set constraints relative to the ratio of another constraint. This is useful when we want certain views to size themselves relative to other views. For example, we can set the height of the blue view to be (1:2), or half, of the red view:
In our tip calculator, we'll use this constraint to size the input and output cards to be of equal heights.
"},{"id":"T0E6OlNlY3Rpb24tMTEw","title":"Setting Auto-Layout For Our View Grouping","htmlContent":"Let's take an other look at our design:
Next, we're going to setup the main views (and their constraints) for each UI group. In other words, we'll add the objects and constraints below:
We've already finished implementing the foundation for our header view. We'll repeat a similar process for each of our remaining UI groups.
With our header complete, let's move on to implementing the tip input card.
\nOpen Main.storyboard. Add a new UIView and set the following constraints:
Step by step:
\n\nUIView from the Object Library onto the root view.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.At this point, you'll see an auto-layout error because your new (input card) view is missing a height constraint. Ignore this warning for now, we'll fix this soon.
Next, we'll add our output card and it's constraints.
\nIn storyboard, add a new UIView and set the following constraints:
Step by step:
\n\nUIView from the Object Library onto the view controller's root view, below the input card.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.We'll also add an equal height constraints between both input and output card views.
\nAdd an equal heights constraint between both input and output cards:
\n\n\n\nStep by step:
\n\nAdd New Constraints button at the bottom right corner of the Interface Builder Editor window.Equal Heights and add the selected constraint.Xcode should still show an auto-layout error because we haven't added enough constraints for it determine the height of each card view. Ignore this warning for now, this will be fixed once we add our reset button.
\nIn storyboard, add a new UIButton and set the following constraints:
Step-by-step:
\n\nUIButton from the Object Library onto the view controller's root view, below the output card.Add New Constraints button at the bottom right corner of the Interface Builder Editor window.By default, our button has a clear background color. To make our reset button easier to see, let's change it's background color from Clear to tcDarkBlue.
\nChange the Background color of the reset button:
\n\n\n\nStep-by-step:
\n\nBackground field. This field allows you to set the button's background color.Clear to tcDarkBlue.\nOur auto-layout warning is gone! After adding our reset button and it's constraints, auto-layout can calculate the height of each input/output card using the equal heights constraint.
\nWe've finished implementing the main view for each of our respective UI groups. For each group, we added the appropriate UIView object and set it's corresponding constraints.
Before moving on, let's test that everything looks as expected.
"},{"id":"T0E6OlNlY3Rpb24tMTEx","title":"Testing Our Constraints","htmlContent":"To catch bugs or missteps early, it's always good to build and run your code often. Let's go ahead and do that now to test that our constraints are working correctly.
\nIn the toolbar, click the Run button.
\nIf everything goes as expected, you should see the following in your simulator:
Try running our project on different simulators. You'll notice that our view dynamically adjust and re-size for any screen size:
In this section, we learned about how to layout our UI; first with frames and later with auto-layout. We learned about constraints and their importance in building dynamic view layouts for multiple devices. And finally, we put our knowledge into practice by implementing a scaffolding for our tip calculator design.
In the next section, we'll build off of our UI by fully implementing and styling each of our UI groups.
"}]},"next":{"id":"T0E6OlBhZ2UtMzk=","slug":"implementing-subviews","title":"Implementing Subviews"},"previous":{"id":"T0E6OlBhZ2UtMzk=","slug":"implementing-subviews","title":"Implementing Subviews"}}}},"staticQueryHashes":[]}