Learning iOS UI Development

The contents of your applications are mainly directed by view controllers and presented through views, which, in turn, are displayed inside a window. As you will learn in the next section, this sequence is automatically handled by iOS, and all the classes involved in the process are organized to interact seamlessly.

The easiest and most reliable way to send content to a window is by configuring its rootViewController property with a UIViewController instance. The view controller's view will automatically be set as the contents of the window and presented to the user.

This solution simplifies the window hierarchy, ensuring that contents are all children of the same root. Thanks to this solution, changing the contents of a window is just a matter of updating its root view controller.

While you'll learn more about view controllers and views in the next paragraphs, this image should clarify how all these objects cooperate to present their contents to the user:

The view controller is initialized and set as the root view controller of the window. Finally, the window presents the current root view controller's view.

You rarely need to set up a window manually. In most cases, Xcode defines all the needed information for you. Let's take a look at the entire process to better understand what goes on under the hood.

When you create a new Xcode project using the wizard, a Storyboard is created for you. If you check the info.plist file, you'll see that the Main storyboard filebase name key reports the name of the Storyboard by default as Main:

This key is really important as it tells Xcode that you want to start the application from the Storyboard or, more precisely, from the Storyboard initial view controller (the one indicated by the grey arrow inside the Storyboard working area).

The @UIApplicationMain attribute in the AppDelegate.swift file is responsible for the launch of the entire application process. It marks an entry point for the application launch, reading the Storyboard's information from the info.plist file and instantiating the initial view controller.

At this point, a UIWindow instance is created and associated with the window property of the AppDelegate class. This property will be a handy reference to the main window for the entire life cycle of the application.

The initial view controller, previously initialized, is now assigned to the rootViewController property of the window; therefore, the initial view controller's view becomes the current window's content.

Since windows are invisible by default, there is one last step required to show the content to the user. After the application:didFinishLaunchingWithOptions function finishes its execution, makeKeyAndVisible is called for the window, which now loads its interface from rootViewController and finally displays it contents.

The following image summarizes all these steps:

The same result can be obtained programmatically. If you remove the Main storyboard filebase name key from the info.plist file, Xcode doesn't have any information on how to set up a valid window. The application:didiFinishLaunchingWithOptions function is the right place to manually instantiate it. You can execute the following:

func application(application: UIApplication,
    didFinishLaunchingWithOptions
    launchOptions: [NSObject: AnyObject]?) -> Bool {

    // Instantiate a window with the same size of the screen    
    window = UIWindow(frame: UIScreen.mainScreen().bounds)
    // Instantiate a view controller with the Main storyboard
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let viewController = storyboard.instantiateViewControllerWithIdentifier("viewController2") as! ViewController

    // Setup and present the window
    window?.rootViewController = viewController
    window?.makeKeyAndVisible()

    return true
}

As you can note, this code retraces the same steps that we saw previously. The only noteworthy thing is the way the window frame is defined: UIScreen is a class that represents a screen device. In the previous block of code, the mainScreen function is used to get the current device bounds and build a window that is the same size as the screen.

The properties of some view's have only one role: defining how the view is drawn on screen. Before diving into a description of these properties, it's worth introducing the structures that are involved in the definition of the view geometry:

The code needed to initialize these structures is straightforward, and there are a lot of functionalities provided by Apple that simplify our work with these structures.

The following code shows how to create the Rect, Size, and Point instances:

        // Define a point
        let point = CGPoint(x: 20, y: 10)

        // Define a size
        let size = CGSize(width: 20, height: 10)

        // Define a rect using size and point
        let rect_A = CGRect(origin: point, size: size)

        // Define a rect using x, y, width and height data
        let rect_B = CGRect(x: 15, y: 10, width: 100, height: 30)

The properties that define the view geometry are frame, bounds, and center and they are configured using the geometry structures you just saw.

The frame property

On the other hand, the frame property defines how a view is placed inside the hierarchy. It's a CGRect property similar to bounds, but its origin value determines how the view is placed inside its parent view.

At this point, we might conclude that frame and bounds are similar; however, this is not always true. Take a look at the following images to better understand how they work together to define the view geometry:

In this case, frame and bounds have the same size, but the position values are different. Take a look at this image:

This indicates that after a rotation, the same view maintains the bounds, while the frame changes significantly, adapting its size in order to contain the rotated view.

The center property

The center property works in relation to the UI hierarchy (as does the frame), and it's a handy way to define the view's position inside its parent. It differs from frame.origin in the way its position is calculated. With frame, the origin position is calculated using the upper-left corner of the view, while for the center, the anchor is the view's center, as you can see from the following image:

The UIView class offers helpful functions to add, move, and delete elements from the hierarchy; you can call these functions directly from the view instances.

The addSubview: function pushes a view as the child of the caller, as follows:

containerView.addSubview(childView)

Views that are added as subviews of the same view are sibling. Sibling subviews are assigned to an index based on the order of insertion, which in turn corresponds to the drawing order—the highest index is drawn at the front, while the lowest is drawn behind the other sibling views. The addSubview: function assigns the first free index to the view, determining its position, which is in front of all the other views with lower indexes.

This order can be manipulated using functions that specify the desired index in an absolute or relative way:

containerView.insertSubview(childView, atIndex: 2) 

With the insertSubview:atIndex function, you can specify an index in which to place the view. If the index is not free, the view at this index gets shifted up by one index, consequently shifting all the other sibling views with indexes greater than the requested one.

With the same logic, a view can be placed into the hierarchy using another view as a reference and specifying that the new view should be inserted above (insertSubview:aboveSubview) or below (insertSubview:belowSubview) the referenced view, as follows:

containerView.insertSubview(childView, aboveSubview: anotherView)

containerView.insertSubview(childView, belowSubview: anotherView) 

Removing a view from the hierarchy is extremely simple. If you have a reference of the view that you want to remove, just call the removeFromSuperview function for this view. Alternatively, if you want to remove all the subviews from the parent view, just loop through the subviews and remove the views one by one. You can use the following code for this:

for subview in container.subviews {
    subview.removeFromSuperview()
}

When you need to access a subview on the fly without saving a reference to it, you can use the tag property. A UIView instance can be easily marked using an integer, and you can obtain the view that corresponds to the same tag using the viewWithTag; function. This function returns the view itself or the first subview whose tag coincides with the requested tag.

View and subview visibility

A parent view defines its subviews' visibility outside its boundaries through the Boolean property clipToBounds. If this property is true, the view behaves as a mask for its subviews, preventing them from being drawn outside the boundaries. The following image presents the result of different clipToBounds values on the same hierarchy:

Another important note about subview visibility is related to the alpha property, which, as we mentioned previously, defines the opacity of the view. Subviews indirectly inherit the alpha value from their superviews, so the resulting opacity of the subview depends both on their parent and their own alpha.

Note

If your view has a nontransparent background, it is good practice to leave the opaque property set to true as a hint for the drawing system. Opaque views are optimized for this. The opposite is suggested if the view is fully or partially transparent; set this property to false.

class CustomView: UIView {

    override func didMoveToSuperview() {
        println("I have a superview!")
    }
}

override func didAddSubview(subview: UIView) {
    println("The subview \(subview) has been added")
}

override func didMoveToWindow() {
   println("I've been attached to this window hierarchy: \(window)")
}

Notes about debug

When views are complex, the hierarchy is hardly straightforward. Xcode helps you, though, with an interesting debug instrument. When your application is running, select Debug -> View Debugging -> Capture View Hierarchy from the Xcode menu, and you'll see an interactive 3D representation of the current view hierarchy showing the depth and the position of all the views contained:

In this section, you will practice some of the concepts that we just discussed by writing a real application.

Open the Chapter 1 folder and launch the ...\Start\Chapter1 project. You'll find a simple application structure that is the starting point for this exercise; the final result is the ...\Completed\Chapter1 project.

The base structure is really simple: an uppermost area with some controls (two buttons and one segmented control) and a view (with a light gray background) that we call a container:

Your goal is to implement the createView: function that receives a location (CGPoint) and adds a subview at this location inside the container. Depending on the value of the segmented control, you should use the received location as the center (red views) or upper-left corner of the new view (blue views). You need to also implement the clear function to remove all the added subviews. The project implements a tap gesture on the container, which invokes createView linked to the touch location.

Let's implement the createView function for the viewController.swift file first by executing the following:

    func createView(location:CGPoint){
        let viewSize = CGSize(width: 50, height: 50)
        let viewFrame = CGRect(origin: location, size: viewSize)
        let childView = UIView(frame: viewFrame)
        childView.backgroundColor = UIColor.redColor()
        viewContainer.addSubview(childView)

        if isCenterAligned {
            childView.center = location
            childView.backgroundColor = UIColor.blueColor()
        }
 }

The childView function is instantiated using a fixed size and the received location as its origin. Then, it is simply attached to viewContainer using addSubview. If the isCenterAligned property (which is handled by the segmented control) is true, the center property of the view is moved to the received location.

The implementation of the clear function is straightforward, as you can note in the following code:

@IBAction func clear(){
for subview in viewContainer.subviews{
            subview.removeFromSuperview()
        }
} 

It just performs a loop through the viewContainer subviews to call the removeFromSuperview function on these subviews.

A second functionality can be added to this exercise. Push the "Deep" button on the upper-left side of the screen, and debug the current hierarchy using the "capture view hierarchy" function to see this great feature in action!

iOS uses remarkable optimizations in the process of drawing contents on screen. Views are not continuously drawn; the system draws any view just once and creates snapshots for each displayed element. The current snapshot is shown until a view doesn't require an update. The view is then redrawn, and a new snapshot for the updated view is taken. This is a clever way to avoid a wastage of resources. In devices such as smartphones, optimization is mandatory.

The UIView content can be invalidated by calling the setNeedsDisplay: or setNeedsDisplayInRect: function.

This call basically tells the drawing system that the view content needs to be updated with a new version. Later, during the next run loop, the system asks the view to redraw. The main difference between the setNeedsDisplay: and setNeedsDisplayInRect: functions is that the latter performs an optimization using only a portion of the new view content.

In most cases, the redrawing process is managed for you by UIKit. If you need to create your really custom UIView subclass, though, you probably want to draw the contents of the view yourself. In this case, the drawRect: function is the place where you will add the drawing functions. You'll learn more about custom drawing in Chapters 6, Layers and Core Animation, and Chapter 9, Introduction to Core Graphics. For now, it suffices to say that you should never call this function directly! When the content of the view needs to be updated, just call setNeedDisplay: and the drawRect: function will be executed by the system following the right procedure.

Here is a quick example of custom drawing with which we can create a UIView subclass that draws a simple red ellipse at the center of the view:

import UIKit

class ellipseView: UIView {

    override func drawRect(rect: CGRect) {

        let path = UIBezierPath(ovalInRect: self.bounds)
        UIColor.redColor().setStroke()
        UIColor.orangeColor().setFill()
        path.fill()
        path.stroke()

    }
}

This function uses UIBezierPath to define an oval shape that has a stroke and fill of red and orange. This shape is finally drawn in the current Graphic Context, which can be seen as an empty dashboard where you can design using code. You'll learn more about Graphic Contexts in Chapter 9, Introduction to Core Graphics.

The UIViewController property view is the root view of the hierarchy that defines the view controller's contents. As we already saw, a view controller is associated with the window's rootViewController property, and a connection is established between the window property of the view controller view and the window.

During its life cycle, a view controller deals with important events related to its view. Depending on your needs, you might find these events useful for the UI definition.

Here is a quick but complete description of the functions called in relation to these events:

The appear-functions are called when the controller is presented for the first time when a back button is pressed or a modal is closed, showing the underlying view controller again. If you override these methods, you are required to call them on super before executing your code.