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 controller”, which was a hallmark of the previous UIKit way of building apps. That is thankfully true. However, we still logically need some small piece of code to inject the model properties into a view, so I will refer to it here as the “controller” or “presenter”. …

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 connecting the news Article model instances with the NewsCells in the News scene. Now we will build a ProductCell for our Products scene.

We will pick up here where the last tutorial left off. Ideally, you have completed the previous tutorials in this series. …

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 other words, it needs the items in an Array to be Identifiable. For example, we could identify each item by a unique name or a unique number. Then the List can control the items’ positions and perform animations automatically, with no extra coding work.

In the previous Tutorial 12, we…

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. We need some code that dictates how to “present” it or “control” it, which is why it is sometimes described as a “presenter” or a “controller”.

If we have a pure view component (where its properties are also just view related), then we can create an extension of that view that accepts a model and defines how to present it in…

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, buttons, tab bar, and other controls on the device’s screen. A model contains the raw words, numbers, names of images, dates, any calculations, and business logic.

A model is like the bones and brain. A view is like the skin, eyes, and ears.

In this tutorial, we will build a…

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. We usually set a property when the instance of the view is created, so that it has a “constant” value for that instance.

Then, one type of view component can appear in different forms, determined by the values we assign to the properties of each instance.

In the previous Tutorial 9, we moved the NewsCell code into its own file…

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 “refactor” our existing code by “separating the concerns” into separate files. “Refactoring” changes the code under the hood without changing the runtime functionality of the app. Separating the concerns makes the code reusable and maintainable and is a fundamental principle of good architecture. …

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 the aspect ratio of the image differs from the display area, should it fill the area and crop the image, or fit what it can and leave edge gaps?

At the end of Tutorial 7 we separated our news cell and added another text view in a vertical stack. In…

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. This is commonly referred to as a “design system”.

Read more about building a design system, to be shared between designers and developers, in the article “Build an App Like Lego — An Intro for Designers”.

Good developers also break up their app code into reusable components. Instead of building “massive views”, they…

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. It is a type of “vector” graphic, meaning that it is defined by shapes that will always redraw perfectly.

An image file is usually a “bitmap” graphic, such as PNG (from a drawing program) or JPEG (from photos). It just contains a grid of colored pixels that will stretch or shrink if the image is resized. …

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