Phase 3: Native Development

UIKit fundamentals & storyboard vs programmatic UI

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you have a giant box of LEGOs. This box, filled with all sorts of colorful bricks, special pieces, and even mini-figures, is a bit like something called UIKit in the world of making iPhone and iPad apps. UIKit is the big toolbox that holds all the basic pieces you need to build any part of an app you can see and interact with. Things like buttons you tap, text labels that show messages, or even the scrolling lists of photos you see in your favorite apps – these are all different kinds of LEGO bricks from the UIKit box. Think of a UIViewController as the main baseplate for one of your big LEGO scenes (like a single screen in an app), and UIView as all the individual bricks and characters you put on that baseplate. It’s what helps your app look and feel real!

Now, when you want to actually build something amazing with your LEGOs, like a cool spaceship or a bustling city scene, you have two main ways to put your bricks together. One way is using something called "Storyboards." Imagine you have a giant, colorful instruction book with big pictures showing you exactly how to build your LEGO creation. You can see the whole spaceship laid out on the pages, section by section. You literally drag a picture of a red brick from the side onto the page where it needs to go, then a blue brick next to it, just like following a step-by-step guide. You can even draw lines between different pages to show how parts connect or how you'd move from one scene to another. It’s super visual and fast, letting you see your finished LEGO creation taking shape right before your eyes!

The other way to build your app's look and feel is called "Programmatic UI." This is more like building your LEGO spaceship without the picture book, but with a very detailed written list of instructions. Instead of dragging and dropping pictures, you write down every single step: "Take a 2x4 red brick. Place it at position X, Y. Now take a 1x2 blue brick and place it exactly two studs to the right of the red brick." It takes a bit more writing at the beginning because you have to describe every single brick and exactly where it goes, from its size to its color. But this way means you have incredible control over every tiny detail and can be incredibly precise, almost like designing your own custom LEGO brick if you wanted!

So, when you build an app for an iPhone or iPad, you'll be deciding how to put your LEGO pieces together. You can either follow the visual instructions of a Storyboard to quickly see your app come to life, or write detailed code instructions using Programmatic UI to have complete control over every pixel. Both ways let you build amazing things, like games, drawing apps, or even apps that help people learn new things – all with those fundamental UIKit LEGO blocks!

UIKit is the foundational framework for building all user interfaces in iOS applications. It provides the essential building blocks, such as buttons (UIButton), labels (UILabel), table views (UITableView), and navigation controllers (UINavigationController), along with the underlying architecture for managing views, handling user interactions, and orchestrating your app's flow. At its core, you'll work extensively with UIViewController to manage a single screen's content and lifecycle, and UIView subclasses for individual UI elements. Understanding UIKit is non-negotiable for any iOS developer, as it dictates how your app looks and responds to users.

When it comes to assembling your UI, you primarily have two approaches: Storyboards and Programmatic UI. Storyboards offer a visual canvas within Xcode's Interface Builder, allowing you to drag-and-drop UI elements, define screen transitions (segues), and arrange layouts graphically. This method excels at rapid prototyping and quickly visualizing your app's flow. Conversely, Programmatic UI involves writing Swift code to instantiate, configure, and lay out every UI component. While more verbose initially, it provides absolute control, enhances reusability of custom components, and can simplify version control and team collaboration, especially for complex or highly dynamic UIs. Some individual screens or custom views might also be designed using .xib files, which are essentially mini-storyboards for single views.

Choosing between storyboards and programmatic UI often depends on project complexity, team preference, and the specific view's requirements. Storyboards are great for simpler, static layouts and showcasing app flow, while programmatic UI shines in scenarios requiring intricate custom views, dynamic content, or when a high degree of modularity and testability is desired. Many production applications adopt a hybrid approach, using storyboards for the high-level navigation structure and initial screen setup, then relying on programmatic code for custom view logic or complex subviews. Regardless of the chosen method, mastering Auto Layout is crucial for creating adaptive UIs that look great on various device sizes and orientations.

Key Takeaways

  • UIKit is the essential framework providing all standard iOS UI components and the architecture for managing them.
  • Storyboards offer a visual, drag-and-drop approach for UI design, ideal for rapid prototyping and static layouts.
  • Programmatic UI builds interfaces entirely with code, providing maximum control, reusability, and easier version control for complex UIs.
  • Auto Layout is fundamental for creating responsive UIs, regardless of whether you use storyboards or programmatic code.
  • A hybrid approach combining both storyboards for flow and programmatic UI for custom components is common in real-world apps.

Code Example

swift
import UIKit

class ProgrammaticViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        let welcomeLabel = UILabel()
        welcomeLabel.text = "Welcome to iOS Dev!"
        welcomeLabel.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        welcomeLabel.textColor = .label
        welcomeLabel.textAlignment = .center
        
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        NSLayoutConstraint.activate([
            welcomeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            welcomeLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

How this code works

This Swift code demonstrates how to create a simple user interface screen entirely through code, rather than using a visual designer like Interface Builder. The ProgrammaticViewController is a custom screen class that inherits from UIViewController, providing the foundational structure for displaying content. The core setup happens inside viewDidLoad(), a method called once the controller's view is loaded into memory. Here, the background of the screen is set using view.backgroundColor = .systemBackground, which intelligently adapts to the device's light or dark mode. A UILabel named welcomeLabel is then instantiated, and its appearance is customized with a specific text message, font size and weight, textColor, and textAlignment to make the "Welcome to iOS Dev!" message prominent.

Crucially, before positioning welcomeLabel, the line welcomeLabel.translatesAutoresizingMaskIntoConstraints = false disables an older automatic resizing system. This is a subtle but vital step; without it, Auto Layout constraints—the modern way to define UI element positions—would conflict and the label wouldn't appear as intended. The welcomeLabel is then added to the screen's view hierarchy using view.addSubview(welcomeLabel), making it visible. Finally, NSLayoutConstraint.activate applies an array of Auto Layout rules, specifically centerXAnchor.constraint and centerYAnchor.constraint, which precisely center the welcomeLabel both horizontally and vertically within its parent view, ensuring it's perfectly positioned on screen.

Related Articles

Hand-picked reads to go deeper on swift & ios fundamentals.

Back to Mobile Developer Roadmap