Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

9. Refining Your App
Written by Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

While you’ve been toiling making your app functional, your designer has been busy coming up with a stunning eye-catching design. One of the strengths of SwiftUI is that, as long as you’ve been encapsulating views and separating them out along the way, it’s easy to restyle the UI without upsetting the main functionality.

In this chapter, you’ll style some of the views for iPhone, making sure that they work on all iPhone devices.

App design
App design

Creating individual reusable elements is a good place to start. Looking at the design, you’ll have to style:

  1. A raised button for Get Started and Start Exercise.
  2. An embossed button for History and the exercise rating. The History button is a capsule shape, while the rating is round.
  3. A shaped gray background view with a gradient behind.

The starter app contains the colors and images that you’ll need in the asset catalog. There’s also some code for creating the welcome image and text in WelcomeImages.swift.

Neumorphism

Skills you’ll learn in this section: neumorphism

The style of design used in HIITFit, where the background and controls are one single color, is called neumorphism. You achieve the look with shading rather than with colors.

When iPhone was first released, peak design was skeuomorphic interfaces with realistic surfaces, so you had wood and fabric textures with dials that looked real throughout your UI. iOS 7 went in the opposite direction focussing on content with minimalistic flat design. Since then design trends include gradients and depth.

The name Neumorphism comes from New + Skeuomorphism and refers to minimalism combined with realistic shadows.

Neumorphism
Neumorphism

Essentially, you choose a theme color. You then choose a lighter tint and a darker shade of that theme color for the highlight and shadow. You can define colors with either red, green, blue (RGB) or hue, saturation and lightness (HSL). When shifting tones within one color, HSL is the easier model to use as you keep the same hue. The base color in the picture above is Hue: 166, Saturation: 54, Lightness: 59. The lighter highlight color has the same Hue and Saturation, but a Lightness: 71. Similarly, the darker shadow color has a Lightness: 30.

Creating a Neumorphic Button

The first button you’ll create is the Get Started raised button.

Styles

Skills you’ll learn in this section: view styles; button style; shadows

Shadows

You have two choices when adding shadows. You can choose a simple all round shadow, with a radius. The radius is how many pixels to blur out to. A default shadow with radius of zero places a faint gray line around the object, which can be attractive.

Abstracting Your Button

Skills you’ll learn in this section: passing closures to views

The Embossed Button

Skills you’ll learn in this section: stroking a shape

@ViewBuilder

Skills you’ll learn in this section: view builder attribute

ViewBuilder Container View

Skills you’ll learn in this section: container views

Designing WelcomeView

Skills you’ll learn in this section: refactoring with view properties; the safe area

Gradients

Skills you’ll learn in this section: gradient views

The Safe Area

A safe area on a device, as its name suggests, is an area where you should never place interactive views. This area might be covered by the dynamic island, a navigation bar or a toolbar.

containerRelativeFrame

You could embed the whole view hierarchy in GeometryReader and use GeometryReader.size to calculate the frames of the views. However, SwiftUI provides a view modifier containerRelativeFrame(_:alignment:_:) for relative sizing of views.

ViewThatFits

Using ViewThatFits, you can present alternative layouts. Work out what is important for interaction with your app. For the larger size text variants, you could dispense with the images.

Challenge

Your challenge is to continue styling. With ContentView pinned, style HeaderView.

Key Points

  • It’s not always possible to spend money on hiring a designer, but you should definitely spend time making your app as attractive and friendly as possible. Try various designs out and offer them to your testers for their opinions.
  • Neumorphism is a simple style that works well. Keep up with designer trends at https://dribbble.com.
  • Style protocols allow you to customize various view types to fit in with your desired design.
  • Using @ViewBuilder, you can return varying types of views from methods and properties. It’s easy to create custom container views that have added styling or functionality.
  • You can layer background colors in the safe area, but don’t place any of your user interface there.
  • Gradients are an easy way to create a stand-out design. You can find interesting gradients at https://uigradients.com.
8. Saving History Data
10. Working With Datasets
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now