Build an App Like Lego, with SwiftUI — Tutorial 15

1. Introduction

A properly architected app is built from the blocks of a view, a model, and some kind of controller or presenter to inject the model into the view. Keeping the responsibilities separated makes the blocks reusable and more easily understood.

SwiftUI marks the end of the need for a “view…


Build an App Like Lego, with SwiftUI — Tutorial 14

In SwiftUI, we can build a view from subview components by dragging them from a library, so that they click into place vertically and horizontally, like Lego® blocks.

In this Tutorial 14, we will add text subviews, a button, and a resizing image.

In the previous Tutorial 13, we finished…


Build an App Like Lego, with SwiftUI — Tutorial 13

Photo by Eric & Niklas on Unsplash

1. Introduction

In Swift and most programming languages, an ordered sequence of items is called an Array. In SwiftUI, we often want to display an array of items in a List. An Array is a model structure. A List is a view structure.

A List needs to uniquely identify each item. In…


Build an App Like Lego, with SwiftUI — Tutorial 12

Photo by Will Porada on Unsplash

1. Introduction

A properly architected app separates the view components (what you see and touch) from the model components (what you can’t see, such as data and calculations). At some point, we need to display some model data in a view. …


Build an App Like Lego, with SwiftUI — Tutorial 11

Photo by Apolo Photographer on Unsplash

1. Introduction

Broadly speaking, an app has two facets: model and view. A view is something you see or touch or otherwise interact with directly as a human. A model is something behind the scenes that stores data or calculates results.

A view’s job is to show visual layout, color, text, images…


Build an App Like Lego, with SwiftUI — Tutorial 10

Photo by Adyant Pankaj on Unsplash

1. Introduction

A component is most flexible when we declare “properties” to customize differently for each instance.

For a view component, the properties are best declared as subviews, such as an image or text, or as a view attribute such as color. …


Build an App Like Lego, with SwiftUI — Tutorial 9

Photo by Glen Carrie on Unsplash

1. Introduction

Xcode provides a menu command to Extract Subview from a larger view or scene (which we did in Tutorial 7). But that extracted view still resides in the same file as the original super view. It is best practice to separate each view into its own file.

We need to…


Build an App Like Lego, with SwiftUI — Tutorial 8

1. Introduction

Images, such as photos and drawings, come in various sizes and resolutions. When showing an image in an app, the available rectangular area is usually quite different from that of the image. So, we need to stipulate how the image should be resized.

Should the image stretch and shrink? If…


Build an App Like Lego, with SwiftUI — Tutorial 7

1. Introduction

Good designers break up an app into components, where each scene is made up of several subviews, which stack together like Lego blocks. Those subviews might be further broken down into smaller subviews. Each component can be shared across multiple parent/super views, scenes, and even different apps. …


Build an App Like Lego, with SwiftUI — Tutorial 6

Photo by James Pond on Unsplash

1. Introduction

We can add two different types of images to an app built in Xcode:

  1. “SF Symbol” icons.
  2. Or image files.

An SF Symbol can dynamically adjust its color, weight (line thickness), and size, and it will always redraw to be pixel perfect. …

Tom Brodhurst-Hill

iOS developer and architect for BareFeetWare. Builds apps for enterprise and startups. Runs workshops on building apps like Lego.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store