In this article by Jak Tiano, author of the book Learning Xcode, we’re mostly going to be talking about concepts rather than concrete code examples. Since we’ve been using UIKit throughout the whole book (and we will continue to do so), I’m going to do my best to elaborate on some things we’ve already seen and give you new information that you can apply to what we do in the future.
(For more resources related to this topic, see here)
As we’ve heard a lot about UIKit. We’ve seen it at the top of our Swift files in the form of import UIKit. We’ve used many of the UI elements and classes it provides for us. Now, it’s time to take an isolated look at the biggest and most important framework in iOS development.
Application management
Unlike most other frameworks in the iOS SDK, UIKit is deeply integrated into the way your app runs. That’s because UIKit is responsible for some of the most essential functionalities of an app.
It also manages your application’s window and view architecture, which we’ll be talking about next. It also drives the main run loop, which basically means that it is executing your program.
The UIDevice class
In addition to these very important features, UIKit also gives you access to some other useful information about the device the app is currently running on through the UIDevice class.
Using online resources and documentation: Since this article is about exploring frameworks, it is a good time to remind you that you can (and should!) always be searching online for anything and everything. For example, if you search for UIDevice, you’ll end up on Apple’s developer page for the UIDevice class, where you can see even more bits of information that you can pull from it. As we progress, keep in mind that searching the name of a class or framework will usually give you quick access to the full documentation.
Here are some code examples of the information you can access:
UIDevice.currentDevice().name
UIDevice.currentDevice().model
UIDevice.currentDevice().orientation
UIDevice.currentDevice().batteryLevel
UIDevice.currentDevice().systemVersion
Some developers have a little bit of fun with this information: for example, Snapchat gives you a special filter to use for photos when your battery is fully charged.Always keep an open mind about what you can do with data you have access to!
Views
One of the most important responsibilities of UIKit is that it provides views and the view hierarchy architecture. We’ve talked before about what a view is within the MVC programming paradigm, but here we’re referring to the UIView class that acts as the base for (almost) all of our visual content in iOS programming. While it wasn’t too important to know about when just getting our feet wet, now is a good time to really dig in a bit and understand what UIViews are and how they work both on their own and together.
Let’s start from the beginning: a view (UIView) defines a rectangle on your screen that is responsible for output and input, meaning drawing to the screen and receiving touch events.It can also contain other views, known as subviews, which ultimately create a view hierarchy. As a result of this hierarchy, we have to be aware of the coordinate systems involved. Now, let’s talk about each of these three functions: drawing, hierarchies, and coordinate systems.
Drawing
Each UIView is responsible for drawing itself to the screen. In order to optimize drawing performance, the views will usually try to render their content once and then reuse that image content when it doesn’t change. It can even move and scale content around inside of it without needing to redraw, which can be an expensive operation:
An overview of how UIView draws itself to the screen
With the system provided views, all of this is handled automatically. However, if you ever need to create your own UIView subclass that uses custom drawing, it’s important to know what goes on behind the scenes. To implement custom drawing in a view, you need to implement the drawRect() function in your subclass. When something changes in your view, you need to call the setNeedsDisplay() function, which acts as a marker to let the system know that your view needs to be redrawn. During the next drawing cycle, the code in your drawRect() function will be executed to refresh the content of your view, which will then be cached for performance.
A code example of this custom drawing functionality is a bit beyond the scope of this article, but discussing this will hopefully give you a better understanding of how drawing works in addition to giving you a jumping off point should you need to do this in the future.
Hierarchies
Now, let’s discuss view hierarchies. When we would use a view controller in a storyboard, we would drag UI elements onto the view controller. However, what we were actually doing is adding a subview to the base view of the view controller. And in fact, that base view was a subview of the UIWindow, which is also a UIView. So, though, we haven’t really acknowledged it, we’ve already put view hierarchies to work many times.
The easiest way to think about what happens in a view hierarchy is that you set one view’s parent coordinate system relative to another view. By default, you’d be setting a view’s coordinate system to be relative to the base view, which is normally just the whole screen. But you can also set the parent coordinate system to some other view so that when you move or transform the parent view, the children views are moved and transformed along with it.
Example of how parenting works with a view hierarchy.
It’s also important to note that the view hierarchy impacts the draw order of your views. All of a view’s subviews will be drawn on top of the parent view, and the subviews will be drawn in the order they were added (the last subview added will be on top). To add a subview through code, you can use the addSubview() function. Here’s an example:
var view1 = UIView()
var view2 = UIView()
view1.addSubview(view2)
The top-most views will intercept a touch first, and if it doesn’t respond, it will pass it down the view hierarchy until a view does respond.
Coordinate systems
With all of this drawing and parenting, we need to take a minute to look at how the coordinate system works in UIKit for our views.The origin (0,0 point) in UIKit is the top left of the screen, and increases along X to the right, and increases on the Y downward. Each view is placed in this upper-left positioning system relative to its parent view’s origin.
Be careful! Other frameworks in iOS use different coordinate systems. For example, SpriteKit uses the lower-left corner as the origin.
Each view also has its own setof positioning information. This is composed of the view’s frame, bounds, and center. The frame rectangle describes the origin and the size of view relative to its parent view‘s coordinate system. The bounds rectangle describes the origin and the size of the view from its local coordinate system. The center is just the center point of the view relative to the parent view.
When dealing with so many different coordinate systems, it can seem like a nightmare to compare positions from different views. Luckily, the UIView class provides a simple convertPoint()function to convert points between systems.
Try running this little experiment in a playground to see how the point gets converted from one view’s coordinate system to the other:
import UIKit
let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
let view2 = UIView(frame: CGRect(x: 10, y: 10, width: 30, height: 30))
view1.addSubview(view2)
let pointFrom1 = CGPoint(x: 20, y: 20)
let pointFromView2 = view1.convertPoint(pointFrom1, toView: view2)
Hopefully, you now have a much better understanding of some of the underlying workings of the view system in UIKit.
Documents, displays, printing, and more
In this section, I’m going to do my best to introduce you to the many additional features of the UIKit framework. The idea is to give you a better understanding of what is possible with UIKit, and if anything sounds interesting to you, you can go off and explore these features on your own.
Documents
UIKit has built in support for documents, much like you’d find on a desktop operating system. Using the UIDocument class, UIKit can help you save and load documents in the background in addition to saving them to iCloud. This could be a powerful feature for any app that allows the user to create content that they expect to save and resume working on later.
Displays
On most new iOS devices, you can connect external screens via HDMI. You can take advantage of these external displays by creating a new instance of the UIWindow class, and associating it with the external display screen. You can then add subviews to that window to create a secondscreen experience for devices like a bigscreen TV. While most consumers don’t ever use HDMI-connected external displays, this is a great feature to keep in mind when working on internal applications for corporate or personal use.
Printing
Using the UIPrintInteractionController, you can set up and send print jobs to AirPrint-enabled printers on the user’s network. Before you print, you can also create PDFs by drawing content off screen to make printing easier.
And more!
There are many more features of UIKit that are just waiting to be explored! To be honest, UIKit seems to be pretty much a dumping ground for any general features that were just a bit too small to deserve their own framework. If you do some digging in Apple’s documentation, you’ll find all kinds of interesting things you can do with UIKit, such as creating custom keyboards, creating share sheets, and custom cut-copy-paste support.
Summary
In this article, we looked at the biggest and most important UIKit and learned about some of the most important system processes like the view hierarchy.
Resources for Article:
Further resources on this subject:
- Building Surveys using Xcode [article]
- Run Xcode Run [article]
- Tour of Xcode [article]