Building Reusable SwiftUI Components

Peter Friese, Developer Relations Engineer, Google
Building Reusable
SwiftUI Components
@peterfriese
SwiftConf 2023,Cologne

Peter Friese
Developer Relations Engineer
Google

Peter Friese, Developer Relations Engineer, Google
Building Reusable
SwiftUI Components
SwiftConf 2023,Cologne
Why this talk?
@peterfriese

Help developers succeed
by making it easy to build
and grow apps

Techniques for composing views
Building a simple component
Configuring views
Styling views
Distributing views

Building a simple component
app

import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}

import SwiftUI
HStack {
.imageScale(.large)
}
.padding()
}
}

import SwiftUI
List(0 !!" 5) { item in
HStack {
.imageScale(.large)
}
.padding()
}
}
}

import SwiftUI
List(0 !!" 5) { item in
HStack {
.imageScale(.large)
}
}
}
}

import SwiftUI
@State var users = User.samples
List(users) { user in
HStack {
.imageScale(.large)
Text(user.fullName)
}
}
}
}

import SwiftUI
HStack {
Image(user.profileImageName)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 75)
.clipShape(Circle(), style: FillStyle())
Text(user.fullName)
}
}
}
}

import SwiftUI
HStack {
.resizable()
.frame(height: 75)
VStack {
Text(user.fullName)
Text(user.affiliation)
}
}
}
}
}

import SwiftUI
HStack(alignment: .top) {
.resizable()
.frame(height: 75)
VStack(alignment: .leading) {
Text(user.fullName)
}
}
}
}
}

import SwiftUI
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
}

Move to file
Extract Subview
Extract to local subview (property)
Extract to local subview (function)

Extract Subview
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
}
♻ Extract Subview

Extract Subview
ExtractedView()
}
}
}
struct ExtractedView: View {
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)

Dear Apple…
Make Extract to Subview work all of the time

Extract Subview
ExtractedView()
}
}
}
struct ExtractedView: View {
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
♻ Rename

Extract Subview
AvatarView()
}
}
}
struct AvatarView: View {
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)

❌ Cannot find ‘user’ in scope
Extract Subview
AvatarView()
}
}
}
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)

Extract Subview
AvatarView()
}
}
}
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
var user: User

Extract Subview
AvatarView(user: user)
}
}
}
var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)

Dear Apple…
Extract to Subview: handle dependent
properties

Move to file
}
}
}
var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
♻ Move to file

Move to file Make sure to use type name

Move to file
import SwiftUI
Text("Hello, World!")
}
}
#Preview {
AvatarView()
}

❌ Missing argument for parameter 'user' in call
Move to file
var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
#Preview {
AvatarView()
Need to fix the preview

❌ Missing argument for parameter 'user' in call
Move to file
var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
#Preview {
AvatarView(user: User.sample)

Dear Apple…
properties
Add Extract to File

var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
#Preview {
}
What’s this?!

var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
#Preview {
}

SwiftUI Layout Behaviour
Building layouts with stack views https://apple.co/448CaWL
Created by redemption_art
from the Noun Project
Expanding Hugging

.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
Text is a content-hugging view

.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
VStack is a content-hugging view

.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
Image is an expanding view
… but we explicitly constrained it

.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
HStack is a content-hugging view

.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
Spacer()
}
Spacer is an expanding view

var user: User
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
Spacer()
}
}
}
♻ Extract to local subview

var user: User
.resizable()
.frame(height: 75)
.font(.subheadline)
}
var titleLabel: some View {
}
Text(user.fullName)
.font(.headline)

var user: User
Text(user.fullName)
.font(.headline)
}
.resizable()
.frame(height: 75)
.font(.subheadline)
}
Spacer()
titleLabel

Dear Apple…
properties
Add Extract to File
Add Extract to local Subview

.resizable()
.frame(height: 75)
titleLabel
Text("(Image(systemName: "graduationcap")) (user.jobtitle)")
.font(.subheadline)
Text("(Image(systemName: "building.2")) (user.affiliation)")
.font(.subheadline)
}
Spacer()
}
}
var user: User
var titleLabel: some View {!!#}

var user: User
.resizable()
.frame(height: 75)
titleLabel
.font(.subheadline)
func detailsLabel(_ text: String, systemName: String) !$ some View {
}

var user: User
.resizable()
.frame(height: 75)
titleLabel
}
.font(.subheadline)

var user: User
.resizable()
.frame(height: 75)
titleLabel
Text("(Im
}
Text("(Image(systemName:
.font(.subheadline)
"graduationcap")) (user.jobtitle)")
"(systemName)")) (text)")

var user: User
Text("(Image(systemName: "(systemName)")) (text)")
.font(.subheadline)
}
.resizable()
.frame(height: 75)
titleLabel
.font(.subheadline)
detailsLabel(user.jobtitle, systemName: "graduationcap")
detailsLabel(user.affiliation, systemName: "building.2")

var user: User
.font(.subheadline)
}
.resizable()
.frame(height: 75)
titleLabel
detailsLabel(user.affiliation, systemName: "building.2")
}

Techniques for composing views

View body
import SwiftUI
.resizable()
.frame(height: 75)
Text(user.fullName)
.font(.headline)
.font(.subheadline)
}
}
}
}
}

Local properties
View body
var user: User
Text(user.fullName)
.font(.headline)
}
!!#
titleLabel
!!#
}
}

Local properties
View body
Local functions
var user: User
func detailsLabel(_ text: String,
systemName: String) !$ some View {
.font(.subheadline)
}
!!#
detailsLabel(user.affiliation, systemName: “building.2")
!!#
}
}

Local properties
View body
Local functions
View Builders

View Builders
@ViewBuilder usage explained with code examples (SwiftLee) https://bit.ly/44bp37t
The @ViewBuilder attribute is one of the few result builders
available for you to use in SwiftUI.
You typically use it to create child views for a specific
SwiftUI view in a readable way without having to use any
return keywords.
“

View Builders
var user: User
Text(user.fullName)
.font(.headline)
}
func detailsLabel(_ text: String,
systemName: String) !$ some View {
.font(.subheadline)
}
!!#
detailsLabel(user.affiliation, systemName: “building.2")
!!#
}
Why no @ViewBuilder?

View Builders
var user: User
var hero: some View {
.resizable()
.frame(height: 75)
}
hero
VStack(alignment: .leading) {!!# }
}
}
}

View Builders
var isRound = true
var user: User
.resizable()
.frame(height: 75)
}
hero
VStack(alignment: .leading) {!!# }
}
}
}

❌ Branches have mismatching types 'some View'
View Builders
var isRound = true
var user: User
if isRound {
.resizable()
.frame(height: 75)
}
else {
.resizable()
.frame(height: 75)
}
}
Self.clipShape(_:style:)
Self.frame(width:height:alignment:)

View Builders
var isRound = true
var user: User
if isRound {
AnyView {
.resizable()
.frame(height: 75)
}
}
else {
AnyView {
.resizable()
.frame(height: 75)
}
AnyView erases the
view’s type information

View Builders
var isRound = true
var user: User
if isRound {
.resizable()
.frame(height: 75)
}
else {
.resizable()
.frame(height: 75)
}
}
@ViewBuilder @ViewBuilder keeps the
type information

View Builders
How to avoid using AnyView in SwiftUI (Tanaschita.com)
ViewBuilder vs. AnyView (Alexito's World)
https://bit.ly/45kVOQI
https://bit.ly/3OUbViE
Use @ViewBuilder if you want to return structurally
different views from a property / function.
“

Configuring views
AvatarView(isRound: true, user: user)
}
}
}
Let’s turn this into a view modifier
: properties

Enum for the shape
enum AvatarImageShape {
case round
case rectangle
}

Environment Key
Enum for the shape struct AvatarImageShapeKey: EnvironmentKey {
static var defaultValue: AvatarImageShape = .round
}
case round
case rectangle
}

Environment Key
Enum for the shape
Extend Environment
struct AvatarImageShapeKey: EnvironmentKey {
}
case round
case rectangle
}
extension EnvironmentValues {
var avatarImageShape: AvatarImageShape {
get { self[AvatarImageShapeKey.self] }
set { self[AvatarImageShapeKey.self] = newValue }
}
}

Environment Key
Enum for the shape
Extend Environment
View modifier
struct AvatarImageShapeKey: EnvironmentKey {
}
case round
case rectangle
}
var avatarImageShape: AvatarImageShape {
get { self[AvatarImageShapeKey.self] }
set { self[AvatarImageShapeKey.self] = newValue }
}
}
extension View {
func avatarImageShape(_ imageShape:
AvatarImageShape) !$ some View {
environment(.avatarImageShape, imageShape)
}
}

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
var isRound = true
var user: User
@ViewBuilder
if isRound {
.resizable()
.frame(height: 75)
}
else {
.resizable()
.frame(height: 75)
}
}
!!#
}
var isRound = true

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
var user: User
@ViewBuilder
if isRound {
.resizable()
.frame(height: 75)
}
else {
.resizable()
.frame(height: 75)
}
}
!!#
}
var isRound = true
@Environment(.avatarImageShape) var imageShape

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
var user: User
@ViewBuilder
if {
.resizable()
.frame(height: 75)
}
else {
.resizable()
.frame(height: 75)
}
}
!!#
}
imageShape !% .round

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
Usage at the call site
.avatarImageShape(.rectangle)
}
}
}

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
}
}
}
}
}
}

Environment Key
Enum for the shape
Extend Environment
View modifier
Update view code
}
}
}
.avatarImageShape(
user.isTalking
? .round
: .rectangle)
}
}
}

Configuring views
.onEditProfile {
print("onEditProfile triggered")
}
}
}
Let’s register an action handler
: action handlers

Environment Key
struct AvatarEditProfileHandler: EnvironmentKey {
static var defaultValue: (() !$ Void)?
}

Extend Environment
Environment Key
}
var editProfileHandler: (() !$ Void)? {
get { self[AvatarEditProfileHandler.self] }
set {
self[AvatarEditProfileHandler.self] = newValue
}
}
}

Extend Environment
Environment Key
View modifier
}
var editProfileHandler: (() !$ Void)? {
get { self[AvatarEditProfileHandler.self] }
set {
self[AvatarEditProfileHandler.self] = newValue
}
}
}
extension View {
public func onEditProfile(editProfileHandler:
@escaping () !$ Void) !$ some View {
environment(.editProfileHandler,
editProfileHandler)
}
}

Extend Environment
Environment Key
View modifier
Update view code
!!#
}
}
}
var user: User
@ViewBuilder
var hero: some View { !!# }
hero

Extend Environment
Environment Key
View modifier
Update view code
!!#
}
}
}
var user: User
@ViewBuilder
hero
@Environment(.editProfileHandler)
var editProfileHandler

Extend Environment
Environment Key
View modifier
Update view code
var user: User
@ViewBuilder
hero
!!#
}
}
}
.onTapGesture {
if let editProfileHandler {
editProfileHandler()
}
}

Extend Environment
Environment Key
View modifier
Update view code
@State var isEditing = false
.padding()
.onEditProfile {
isEditingProfile.toggle()
}
.sheet(isPresented: $isEditing) {
!!#
}
}
}

Styling views
View styles (Apple docs)
Styling SwiftUI Views (peterfriese.dev)
https://bit.ly/3DYKmyu
https://bit.ly/3qFbJKC
SwiftUI defines built-in styles for certain kinds of views and
automatically selects the appropriate style for a particular
presentation context. […]
You can override the automatic style by using one of the
style view modifiers. These modifiers typically propagate
throughout a container view, so that you can wrap a view
hierarchy in a style modifier to affect all the views of the
given type within the hierarchy.
“

Styling views
struct StylingExamples: View {
Button("Unstyled button") { }
Button("Bordered button") { }
.buttonStyle(.bordered)
Button("Bordered prominent button") { }
.buttonStyle(.borderedProminent)
Button("Borderless button") { }
.buttonStyle(.borderless)
Button("Plain button") { }
.buttonStyle(.plain)
Button("Automatic button") { }
.buttonStyle(.automatic)
}
}
: Buttons

Styling views
struct ToggleStyleDemoView: View {
@State var isOn = true
VStack {
Toggle(isOn: $isOn) {
Text("Custom toggle style")
}
.toggleStyle(.reminder)
Text("Default toggle style")
}
}
}
}
: a custom Toggle style

Style protocol
struct ReminderToggleStyle: ToggleStyle {
func makeBody(configuration: Configuration)
!$ some View {
HStack {
Image(systemName: configuration.isOn
? "largecircle.fill.circle"
: "circle")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(configuration.isOn
? .accentColor
: .gray)
.onTapGesture {
configuration.isOn.toggle()
}
configuration.label
}
}
}

Define style shortcut
Style protocol
? .accentColor
: .gray)
.onTapGesture {
configuration.isOn.toggle()
}
configuration.label
}
}
}
extension ToggleStyle
where Self !% ReminderToggleStyle {
static var reminder: ReminderToggleStyle {
ReminderToggleStyle()
}
}

Style protocol
Apply the style
extension ToggleStyle
where Self !% ReminderToggleStyle {
static var reminder: ReminderToggleStyle {
ReminderToggleStyle()
}
}
struct ToggleStyleDemoView: View {
@State var isOn = true
VStack {
Text("Custom toggle style")
}
.toggleStyle(.reminder)
}
}
}

Styling views
Audience of this talk

Styling views
View styles (Apple docs)
Styling SwiftUI Views (peterfriese.dev)
https://bit.ly/3DYKmyu
https://bit.ly/3qFbJKC
SwiftUI defines built-in styles for certain kinds of views and automatically
selects the appropriate style for a particular presentation context. […]
You can override the automatic style by using one of the style view
modifiers. These modifiers typically propagate throughout a container view,
so that you can wrap a view hierarchy in a style modifier to affect all the
views of the given type within the hierarchy.
“ Context:
* Platform
* Container
* Use case
Propagation:
* Design system

Create a configuration
struct AvatarStyleConfiguration {
let title: Title
struct Title: View {
let underlyingTitle: AnyView
init(_ title: some View) {
self.underlyingTitle = AnyView(title)
}
underlyingTitle
}
}

struct Title: View {
let underlyingTitle: AnyView
init(_ title: some View) {
self.underlyingTitle = AnyView(title)
}
underlyingTitle
}
}
let subTitle: SubTitle
struct SubTitle: View {
let underlyingSubTitle: AnyView
init(_ subTitle: some View) {
self.underlyingSubTitle = AnyView(subTitle)
}
underlyingSubTitle
}
}

struct SubTitle: View {
let underlyingSubTitle: AnyView
init(_ subTitle: some View) {
self.underlyingSubTitle = AnyView(subTitle)
}
underlyingSubTitle
}
}
let image: Image
init(title: Title,
subTitle: SubTitle,
image: Image) {
self.title = title
self.subTitle = subTitle
self.image = image
}
}

Define a style protocol
let image: Image
init(title: Title,
subTitle: SubTitle,
image: Image) {
self.title = title
self.image = image
}
}
protocol AvatarStyle {
associatedtype Body: View
@ViewBuilder
!$ Body
typealias Configuration = AvatarStyleConfiguration
}

Set up environment
protocol AvatarStyle {
associatedtype Body: View
@ViewBuilder
!$ Body
typealias Configuration = AvatarStyleConfiguration
}
struct AvatarStyleKey: EnvironmentKey {
static var defaultValue:
any AvatarStyle = DefaultAvatarStyle()
}
var avatarStyle: any AvatarStyle {
get { self[AvatarStyleKey.self] }
set { self[AvatarStyleKey.self] = newValue }
}
}

Set up environment
struct AvatarStyleKey: EnvironmentKey {
static var defaultValue:
any AvatarStyle = DefaultAvatarStyle()
}
var avatarStyle: any AvatarStyle {
get { self[AvatarStyleKey.self] }
set { self[AvatarStyleKey.self] = newValue }
}
}
extension View {
func avatarStyle(_ style: some AvatarStyle)
!$ some View {
environment(.avatarStyle, style)
}
}

Set up environment
Implement style
struct DefaultAvatarStyle: AvatarStyle {
!$ some View {
configuration.image
.resizable()
.frame(width: 50,
height: 50,
alignment: .center)
configuration.title
.font(.headline)
configuration.subTitle
.font(.subheadline)
}
Spacer()
}
}
}

Set up environment
Implement style
Update view code
@Environment(.avatarStyle) var style
var title: String
var subTitle: String
var imageName: String
init(_ title: String, subTitle: String,
image name: String) {
self.title = title
self.imageName = name
}

Set up environment
Implement style
Update view code
var title: String
var subTitle: String
var imageName: String
init(_ title: String, subTitle: String,
image name: String) {
self.title = title
self.imageName = name
}
let configuration = AvatarStyleConfiguration(
title: .init(Text(title)),
subTitle: .init(Text(subTitle)),
image: .init(imageName))
AnyView(
style.makeBody(configuration: configuration)
)
}
}

Set up environment
Implement style
Update view code
@State var isProfileShowing = false
AvatarView(user.fullName,
subTitle: user.affiliation,
image: user.profileImageName)
.avatarStyle(.automatic)
}
}
}

@State var isProfileShowing = false
.avatarStyle(.automatic)
}
}
}

Implement style
struct ProfileAvatarStyle: AvatarStyle {
!$ some View {
VStack(alignment: .center) {
configuration.image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 50,
height: 50,
alignment: .center)
configuration.title
.font(.headline)
.font(.subheadline)
}
}
}

Implement style
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 50,
height: 50,
alignment: .center)
configuration.title
.font(.headline)
.font(.subheadline)
}
}
}
extension AvatarStyle where Self !%
ProfileAvatarStyle {
static var profile: Self { .init() }
}

Implement style
.avatarStyle(.profile)

.avatarStyle(.profile)

File > New Package
Add to the current
project

Dear Apple…
properties
Add Extract to File
Add Extract to Package

Register views, view modifiers, and styles
public struct AvatarView_Library: LibraryContentProvider {
public var views: [LibraryItem] {
[
LibraryItem(AvatarView("Peter", subTitle: "Google", image: ""),
title: "AvatarView",
category: .control)
]
}
public func modifiers(base: AvatarView) !$ [LibraryItem] {
[
LibraryItem(base.avatarStyle(.profile),
title: "Profile",
category: .control)
]
}
}

Dear Apple…
properties
Add Extract to File
Add Extract to Package
Rich previews for the Xcode Component Library

Resources
Source Code
YouTube series
https://bit.ly/3n99fis
https://bit.ly/building-swiftui-components
Composable Styles (Moving Parts) https://bit.ly/47w7wJY

Resources
Creating a Styleable Toggle
SwiftUI Components Tutorial @ iOSDevUK
https://bit.ly/3siupAk
September 4th - 7th, 2023

Thanks!
Peter Friese
peterfriese.dev
@peterfriese
youtube.com/c/PeterFriese/
not-only-swift.peterfriese.dev/
@peterfriese@iosdev.space

Building Reusable SwiftUI Components

More Related Content

What's hot (20)

Similar to Building Reusable SwiftUI Components (20)

More from Peter Friese (20)

Recently uploaded (20)

Building Reusable SwiftUI Components