Table Of ContentUI Design
for iOS App
Development
Using SwiftUI
—
Bear Cahill
UI Design for iOS App
Development
Using SwiftUI
Bear Cahill
UI Design for iOS App Development: Using SwiftUI
Bear Cahill
Denton, TX, USA
ISBN-13 (pbk): 978-1-4842-6448-5 ISBN-13 (electronic): 978-1-4842-6449-2
https://doi.org/10.1007/978-1-4842-6449-2
Copyright © 2021 by Bear Cahill
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole
or part of the material is concerned, specifically the rights of translation, reprinting, reuse of
illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical
way, and transmission or information storage and retrieval, electronic adaptation, computer
software, or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a
trademark symbol with every occurrence of a trademarked name, logo, or image we use the
names, logos, and images only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms,
even if they are not identified as such, is not to be taken as an expression of opinion as to
whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the
date of publication, neither the authors nor the editors nor the publisher can accept any
legal responsibility for any errors or omissions that may be made. The publisher makes no
warranty, express or implied, with respect to the material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Aaron Black
Development Editor: James Markham
Coordinating Editor: Jessica Vakili
Distributed to the book trade worldwide by Springer Science+Business Media New York,
1 NY Plazar, New York, NY 10014. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a
California LLC and the sole member (owner) is Springer Science + Business Media Finance
Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail booktranslations@springernature.com; for
reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our
Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is
available to readers on GitHub via the book's product page, located at www.apress.com/
978-1-4842-6448-5. For more detailed information, please visit http://www.apress.com/
source-code.
Printed on acid-free paper
Table of Contents
About the Author ���������������������������������������������������������������������������������xi
About the Technical Reviewer �����������������������������������������������������������xiii
Chapter 1: Introducing SwiftUI �������������������������������������������������������������1
Exercises ���������������������������������������������������������������������������������������������������������������2
Concepts ���������������������������������������������������������������������������������������������������������������2
Source of Truth ������������������������������������������������������������������������������������������������������3
Old Friends ������������������������������������������������������������������������������������������������������������3
New Friends ����������������������������������������������������������������������������������������������������������3
Combine ����������������������������������������������������������������������������������������������������������������3
It’s All Good �����������������������������������������������������������������������������������������������������������4
Platforms ���������������������������������������������������������������������������������������������������������������5
Let’s Get to Codin’ �������������������������������������������������������������������������������������������������5
Chapter 2: Take It Easy �������������������������������������������������������������������������7
Code + UI ��������������������������������������������������������������������������������������������������������������7
Hello SwiftUI ���������������������������������������������������������������������������������������������������������9
Modifiers �������������������������������������������������������������������������������������������������������������10
SwiftUI Inspector �������������������������������������������������������������������������������������������������11
Attributes Inspector ��������������������������������������������������������������������������������������������16
Stacks of Stacks �������������������������������������������������������������������������������������������������19
Here’s the Point ���������������������������������������������������������������������������������������������������21
Chapter Summary �����������������������������������������������������������������������������������������������25
iii
Table of ConTenTs
Chapter 3: SwiftUI Building Blocks �����������������������������������������������������27
Old Friends and New �������������������������������������������������������������������������������������������27
Button �����������������������������������������������������������������������������������������������������������������27
Button Parameters ����������������������������������������������������������������������������������������������31
Image ������������������������������������������������������������������������������������������������������������������31
SF Symbols ����������������������������������������������������������������������������������������������������31
Image Creation ����������������������������������������������������������������������������������������������33
Toggle������������������������������������������������������������������������������������������������������������������33
Binding ����������������������������������������������������������������������������������������������������������������34
@State Property Wrapper �����������������������������������������������������������������������������������34
Toggle Label ��������������������������������������������������������������������������������������������������������35
Code as of Now ���������������������������������������������������������������������������������������������38
TextField ��������������������������������������������������������������������������������������������������������������40
Chapter Summary �����������������������������������������������������������������������������������������������47
Chapter 4: Binding Source of Truth �����������������������������������������������������49
Data Drives the UI �����������������������������������������������������������������������������������������������49
Flow Steps ����������������������������������������������������������������������������������������������������������50
Strideable ������������������������������������������������������������������������������������������������������������54
Property Wrapper ������������������������������������������������������������������������������������������������55
@Binding �������������������������������������������������������������������������������������������������������55
Chapter Summary �����������������������������������������������������������������������������������������������61
Chapter 5: ObservableObjects ������������������������������������������������������������63
Typical Model ������������������������������������������������������������������������������������������������������63
Binding? ��������������������������������������������������������������������������������������������������������������68
Observing Reference Objects ������������������������������������������������������������������������������68
ObservableObject Protocol ����������������������������������������������������������������������������������69
iv
Table of ConTenTs
Publishing Updates ���������������������������������������������������������������������������������������������69
@Published ���������������������������������������������������������������������������������������������������������71
Chapter Summary �����������������������������������������������������������������������������������������������73
Chapter 6: Environment Values ����������������������������������������������������������75
Environment Values ��������������������������������������������������������������������������������������������75
Settings Per View ������������������������������������������������������������������������������������������������77
App Environment �������������������������������������������������������������������������������������������������85
EnvironmentObject Property Wrapper �����������������������������������������������������������������86
Preview Environment ������������������������������������������������������������������������������������������91
Usage ������������������������������������������������������������������������������������������������������������������92
Custom Environment Values �������������������������������������������������������������������������������93
Chapter Summary �����������������������������������������������������������������������������������������������95
Chapter 7: List of Items ����������������������������������������������������������������������97
List ����������������������������������������������������������������������������������������������������������������������97
NoteRow View ���������������������������������������������������������������������������������������������������100
Model Listing�����������������������������������������������������������������������������������������������������105
Chapter Summary ���������������������������������������������������������������������������������������������109
Chapter 8: SwiftUI Canvas Preview ��������������������������������������������������111
Compiling ����������������������������������������������������������������������������������������������������������111
Preview Provider �����������������������������������������������������������������������������������������������112
Preview Device �������������������������������������������������������������������������������������������������113
Environment ������������������������������������������������������������������������������������������������������116
Preview Layout��������������������������������������������������������������������������������������������������118
Pin Preview �������������������������������������������������������������������������������������������������������124
Chapter Summary ���������������������������������������������������������������������������������������������125
v
Table of ConTenTs
Chapter 9: Design for Previews ��������������������������������������������������������127
Preview Content ������������������������������������������������������������������������������������������������127
Preview JSON ���������������������������������������������������������������������������������������������������129
Model ����������������������������������������������������������������������������������������������������������������130
View Model �������������������������������������������������������������������������������������������������������132
View ������������������������������������������������������������������������������������������������������������������135
Preview �������������������������������������������������������������������������������������������������������������136
Preview Assets ��������������������������������������������������������������������������������������������������138
Live Mode ����������������������������������������������������������������������������������������������������������144
Chapter Summary ���������������������������������������������������������������������������������������������145
Chapter 10: SwiftUI Navigation ���������������������������������������������������������147
On Tap Gesture ��������������������������������������������������������������������������������������������������147
Modal Navigation ����������������������������������������������������������������������������������������������149
Navigation View ������������������������������������������������������������������������������������������������152
Navigation Link �������������������������������������������������������������������������������������������������154
Chapter Summary ���������������������������������������������������������������������������������������������157
Chapter 11: UIKit in SwiftUI ��������������������������������������������������������������159
UIViewRepresentable ����������������������������������������������������������������������������������������159
NoteView �����������������������������������������������������������������������������������������������������������160
Extracting a View ����������������������������������������������������������������������������������������������163
UIView in SwiftUI �����������������������������������������������������������������������������������������������166
Chapter Summary ���������������������������������������������������������������������������������������������168
Chapter 12: Data from UIKit with Coordinator ����������������������������������169
UIViewPresentable Protocol ������������������������������������������������������������������������������169
Coordinator �������������������������������������������������������������������������������������������������������170
vi
Table of ConTenTs
Binding Property Wrapper ���������������������������������������������������������������������������������171
Coordinator as Delegate ������������������������������������������������������������������������������������172
Alternate Syntax ������������������������������������������������������������������������������������������������173
Updating the List �����������������������������������������������������������������������������������������������177
Chapter Summary ���������������������������������������������������������������������������������������������178
Chapter 13: Target/Action in SwiftUI ������������������������������������������������181
Target/Action �����������������������������������������������������������������������������������������������������182
ButtonView ��������������������������������������������������������������������������������������������������������182
UIView in SwiftUI �����������������������������������������������������������������������������������������������184
Adding the Coordinator �������������������������������������������������������������������������������������186
Chapter Summary ���������������������������������������������������������������������������������������������194
Chapter 14: SwiftUI in UIKit ��������������������������������������������������������������195
UIHostingController �������������������������������������������������������������������������������������������195
Existing Project �������������������������������������������������������������������������������������������������201
Adding SwiftUI ��������������������������������������������������������������������������������������������������202
Passing ObservableObject ��������������������������������������������������������������������������������207
Chapter Summary ���������������������������������������������������������������������������������������������210
Chapter 15: Introduction to Combine �����������������������������������������������213
Common Concepts ��������������������������������������������������������������������������������������������213
Publisher and Subscriber ����������������������������������������������������������������������������������214
Refinements ������������������������������������������������������������������������������������������������������219
Sink Subscriber �������������������������������������������������������������������������������������������������219
Assign Subscriber ���������������������������������������������������������������������������������������������221
Operators ����������������������������������������������������������������������������������������������������������222
Chapter Summary ���������������������������������������������������������������������������������������������224
vii
Table of ConTenTs
Chapter 16: URLSession Publisher ���������������������������������������������������225
URLSession Publisher ���������������������������������������������������������������������������������������225
Status Tracker Project ���������������������������������������������������������������������������������������226
Status Tracker UI �����������������������������������������������������������������������������������������������228
Model Manager �������������������������������������������������������������������������������������������������230
Debug Data �������������������������������������������������������������������������������������������������������235
Chapter Summary ���������������������������������������������������������������������������������������������242
Chapter 17: Transitions and Animation ��������������������������������������������245
Transitions ���������������������������������������������������������������������������������������������������������245
Asymmetric Transitions �������������������������������������������������������������������������������������249
Animations ��������������������������������������������������������������������������������������������������������251
ViewModifier Protocol ���������������������������������������������������������������������������������������254
Gradients �����������������������������������������������������������������������������������������������������������257
Rotation �������������������������������������������������������������������������������������������������������������260
DrawingGroup ���������������������������������������������������������������������������������������������������264
Chapter Summary ���������������������������������������������������������������������������������������������267
Chapter 18: App Including WatchKit �������������������������������������������������269
Properties ����������������������������������������������������������������������������������������������������������270
UI Design �����������������������������������������������������������������������������������������������������������271
WatchKit ������������������������������������������������������������������������������������������������������������274
Chapter Summary ���������������������������������������������������������������������������������������������276
Chapter 19: User Input Form ������������������������������������������������������������277
Form ������������������������������������������������������������������������������������������������������������������278
Section ��������������������������������������������������������������������������������������������������������������279
App Requirements���������������������������������������������������������������������������������������������279
WatchKit ������������������������������������������������������������������������������������������������������������288
Chapter Summary ���������������������������������������������������������������������������������������������288
viii
Table of ConTenTs
Chapter 20: Presenting Popups ��������������������������������������������������������291
Alert Modifier ����������������������������������������������������������������������������������������������������291
Action Sheet Modifier����������������������������������������������������������������������������������������297
Action Sheet ������������������������������������������������������������������������������������������������������298
Sheet Modifier ���������������������������������������������������������������������������������������������������300
Popover Modifier �����������������������������������������������������������������������������������������������302
Chapter Summary ���������������������������������������������������������������������������������������������304
Appendix A: Cheat Sheets �����������������������������������������������������������������307
Chapter 2: Take It Easy ��������������������������������������������������������������������������������������307
Chapter 3: SwiftUI Building Blocks��������������������������������������������������������������������308
Chapter 4: Binding Source of Truth �������������������������������������������������������������������308
Chapter 5: ObservableObjects ���������������������������������������������������������������������������309
Chapter 6: Environment Values �������������������������������������������������������������������������310
Chapter 7: List of Items �������������������������������������������������������������������������������������310
Chapter 8: SwiftUI Canvas Preview �������������������������������������������������������������������311
Chapter 9: Design for Previews �������������������������������������������������������������������������311
Chapter 10: SwiftUI Navigation �������������������������������������������������������������������������311
Chapter 11: UIKit in SwiftUI �������������������������������������������������������������������������������312
Chapter 12: Data from UIKit with Coordinator ���������������������������������������������������313
Chapter 14: SwiftUI in UIKit �������������������������������������������������������������������������������313
Chapter 15: Introduction to Combine ����������������������������������������������������������������314
Chapter 16: URLSession Publisher ��������������������������������������������������������������������314
Chapter 17: Transitions and Animation��������������������������������������������������������������314
Chapter 20: Presenting Pop-Ups �����������������������������������������������������������������������315
Index �������������������������������������������������������������������������������������������������317
ix