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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building Reusable SwiftUI Components

Similar to Building Reusable SwiftUI Components (20)

More from Peter Friese

More from Peter Friese (20)

Recently uploaded

Recently uploaded (20)

Building Reusable SwiftUI Components