HOME BOOKS QUICK GUIDES VIDEO COURSES
NEWSLETTER CONTACT
SwiftUI Framework
Swift 5.6 | iOS 15
With this guide, you will learn how to create user interfaces using SwiftUI. After reading this guide, you will know how to define views with SwiftUI, how to update the interface, how to navigate between views, and how to create multiplatform applications.
Only $ 4.95
Amazon
Apple
Google
Description
Quick Guides for Masterminds are excerpts from our best-selling books SwiftUI for Masterminds, UIKit for Masterminds, and HTML5 for Masterminds, providing a cost-effective alternative to getting the information you need.

With this guide, you will learn how to create user interfaces using SwiftUI. After reading this guide, you will know how to define views with SwiftUI, how to update the interface, how to navigate between views, and how to create multiplatform applications.
Table of Contents
SWIFTUI FRAMEWORK
Xcode
Projects
Editor Area
SwiftUI Files
Canvas
Opaque Types
User Interface
Text View
Modifiers
Color View
Materials
Images
SF Symbols
Event Modifiers
Custom Modifiers
Layout
Stacks
Spacer
Safe Area
Priorities
Alignment Guides
Groups
Generic Views
Custom Views
Previews
Preview Modifiers
Environment
Development Assets
DECLARATIVE USER INTERFACE
States
Property Wrappers
@State
@Binding
Binding Structures
@Environment
Model
@EnvironmentObject
View Model
Control Views
Button View
Menus
TextField View
SecureField View
TextEditor View
Toggle View
Slider View
ProgressView View
Stepper View
GroupBox View
ControlGroup View
Combine Framework
Publishers
Subscribers
Transforming Values
Operators
Subjects
Combine and SwiftUI
Adaptivity
Size Classes
GeometryReader View
Preferences
LISTS
Lists of Views
ForEach View
ScrollView View
Grids
List View
Sections
Edit Mode
Swipe Actions
Custom Buttons
Refreshable
Outline List
Pickers
Picker View
DatePicker View
Forms
Form View
Disclosure Group
NAVIGATION
Multiple Views
NavigationView View
Toolbar
Search
NavigationLink View
Modal Views
Sheets
Popovers
Alert Views
Confirmation Dialog
TabView Views
Universal Interface
Configuration
Three-Columns Layout
Examples
Download TXT Files - Download Projects

Listing 1: Initializing the app
Listing 2: Defining a structure that conforms to the View protocol
Listing 3: Defining the Canvas preview
Listing 4: Displaying values with a Text view
Listing 5: Formatting the value for the Text view
Listing 6: Displaying a date with a Text view
Listing 7: Displaying a timer with a Text view
Listing 8: Applying modifiers to a view
Listing 9: Assigning a fixed size to a view
Listing 10: Creating flexible containers
Listing 11: Adding a padding to the view
Listing 12: Assigning a specific padding for each side
Listing 13: Assigning padding with Edge values
Listing 14: Assigning dynamic font types
Listing 15: Using the system font
Listing 16: Using standard fonts
Listing 17: Using custom fonts
Listing 18: Applying multiple styles to a text
Listing 19: Nesting Text views
Listing 20: Styling the font
Listing 21: Formatting text
Listing 22: Truncating text
Listing 23: Implementing Color views
Listing 24: Defining the color with RGB values
Listing 25: Assigning a dynamic color
Listing 26: Assigning a custom color
Listing 27: Assigning a color to the text of a Text view
Listing 28: Assigning a background color to a Text view
Listing 29: Assigning a background color to the view and the padding
Listing 30: Assigning a border to the view
Listing 31: Rounding corners
Listing 32: Displaying a view in front of another view
Listing 33: Applying a material
Listing 34: Applying a material to the view's content
Listing 35: Displaying an image
Listing 36: Clipping the image
Listing 37: Resizing the image
Listing 38: Resizing an image to fit the view
Listing 39: Resizing the image to fit within the view with the scaledToFit() modifier
Listing 40: Resizing the image to fill the view
Listing 41: Resizing image to fill the container
Listing 42: Applying style modifiers to an Image view
Listing 43: Applying visual effects to an Image view
Listing 44: Scaling an image with dynamic font types
Listing 45: Displaying SF symbols
Listing 46: Styling a symbol
Listing 47: Storing the font in a constant
Listing 48: Assigning a variant to a symbol
Listing 49: Displaying multicolor symbols
Listing 50: Displaying a multicolor symbol with custom colors
Listing 51: Displaying a text with an SF Symbol
Listing 52: Performing a task when the view appears
Listing 53: Applying custom modifiers
Listing 54: Customizing a custom modifier
Listing 55: Creating a vertical stack of views
Listing 56: Aligning views in a vertical stack
Listing 57: Adding a space between the views
Listing 58: Creating a horizontal stack of views
Listing 59: Creating a ZStack
Listing 60: Setting the Z index of a view
Listing 61: Assigning modifiers to the stack and its content
Listing 62: Nesting stacks
Listing 63: Aligning the views with a flexible space
Listing 64: Aligning the views to the left and the top
Listing 65: Ignoring the safe area
Listing 66: Ignoring only the container safe area at the bottom
Listing 67: Expanding the safe area
Listing 68: Arranging the views with priorities by default
Listing 69: Assigning a higher priority to a view
Listing 70: Defining a view with a fixed size
Listing 71: Aligning images to the center with standard values
Listing 72: Aligning images to the center with custom values
Listing 73: Aligning all images to the center with custom values
Listing 74: Defining custom alignment guides
Listing 75: Aligning views with custom alignment guides
Listing 76: Arranging the views in groups
Listing 77: Assigning different views to the body property
Listing 78: Wrapping views in an AnyView view
Listing 79: Constructing views with the @ViewBuilder property wrapper
Listing 80: Returning an empty view
Listing 81: Creating the basic layout for a detail view
Listing 82: Defining a custom view for the title
Listing 83: Defining a custom view for the description
Listing 84: Configuring the preview
Listing 85: Configuring the preview to represent multiple devices
Listing 86: Adapting the size of the preview to the size of the view
Listing 87: Activating dark mode
Listing 88: Generating multiple previews
Listing 89: Defining a property wrapper
Listing 90: Using a property wrapper
Listing 91: Defining a state
Listing 92: Defining multiple states
Listing 93: Defining bidirectional binding
Listing 94: Using @Binding properties
Listing 95: Accessing the properties of a State structure
Listing 96: Initializing @State properties
Listing 97: Accessing the values of a @Binding property
Listing 98: Creating a Binding structure
Listing 99: Creating a Binding structure with an immutable value
Listing 100: Responding to updates in the states of the environment
Listing 101: Storing our data in an observable object
Listing 102: Initializing the observable object in the App structure
Listing 103: Working with the observable object from the views
Listing 104: Storing only the app's data in the model
Listing 105: Defining an observable object for a view
Listing 106: Initializing the view's observable object
Listing 107: Initializing the view's observable object when the views appear
Listing 108: Assigning the observable object to the view's environment
Listing 109: Getting a reference to the observable object from the environment
Listing 110: Defining an MVVM pattern
Listing 111: Accessing the model in an MVVM pattern
Listing 112: Implementing Button views
Listing 113: Using functions to organize the code
Listing 114: Referencing a method
Listing 115: Adding and removing views from the interface
Listing 116: Disabling a button
Listing 117: Defining the label of a button with an Image view
Listing 118: Styling buttons
Listing 119: Assigning a role
Listing 120: Scaling buttons
Listing 121: Defining custom styles for the button
Listing 122: Opening a context menu with a button
Listing 123: Creating a pull-down menu
Listing 124: Configuring a text field
Listing 125: Responding to the Done button
Listing 126: Responding to changes in focus
Listing 127: Closing the keyboard
Listing 128: Checking the values before storing
Listing 129: Disabling the button
Listing 130: Controlling user's input
Listing 131: Accepting only integer numbers
Listing 132: Using a secure text field
Listing 133: Implementing a text editor
Listing 134: Implementing a Toggle
Listing 135: Defining a custom label for the Toggle view
Listing 136: Implementing a toggle button
Listing 137: Defining a custom Toggle view
Listing 138: Creating a slider
Listing 139: Responding to the slider state
Listing 140: Showing progress
Listing 141: Simulating progress
Listing 142: Showing an activity indicator
Listing 143: Creating a stepper
Listing 144: Defining the steps of a stepper
Listing 145: Modifying the interface when the value increases or decreases
Listing 146: Defining a group of views
Listing 147: Defining a group of controls
Listing 148: Detecting changes in the horizontal size class
Listing 149: Using a GeometryReader to detect orientation
Listing 150: Adapting an Image view to the size of its container
Listing 151: Reading the position of the GeometryReader view
Listing 152: Reading the position and size of a view
Listing 153: Setting and reading preferences
Listing 154: Creating a list of views dynamically
Listing 155: Creating a list with a standard design
Listing 156: Defining a model to work with lists of views
Listing 157: Injecting the model into the environment
Listing 158: Creating a list of views with data from the model
Listing 159: Making a list of views scrollable
Listing 160: Scrolling the list of views horizontally
Listing 161: Scrolling the list programmatically
Listing 162: Creating a grid with a fixed number of items
Listing 163: Defining flexible items
Listing 164: Defining adaptive items
Listing 165: Creating a list of views
Listing 166: Creating a plain list
Listing 167: Customizing the rows
Listing 168: Assigning alternate backgrounds
Listing 169: Mixing static and dynamic content in a list
Listing 170: Dividing the content into sections
Listing 171: Configuring the section separators
Listing 172: Configuring the list from the environment
Listing 173: Providing an ordered list of values
Listing 174: Deleting rows
Listing 175: Activating the edition mode
Listing 176: Moving rows
Listing 177: Selecting rows
Listing 178: Customizing the editing mode
Listing 179: Customizing the selection
Listing 180: Storing the selection in the model
Listing 181: Defining custom swipe actions
Listing 182: Implementing a custom button to delete the rows
Listing 183: Implementing a custom button to delete the rows
Listing 184: Defining the model and the view to create a hierarchical list
Listing 185: Implementing an OutlineGroup view
Listing 186: Defining a picker
Listing 187: Selecting an initial value
Listing 188: Listing values by index
Listing 189: Implementing a segmented picker
Listing 190: Defining a DatePicker to select a date
Listing 191: Limiting the DatePicker to a range of values
Listing 192: Presenting a picker with a spinning wheel
Listing 193: Defining a form
Listing 194: Styling a form
Listing 195: Disclosing controls
Listing 196: Initiating a navigation hierarchy
Listing 197: Setting the title mode
Listing 198: Adding a button to the navigation bar
Listing 199: Adding multiple buttons
Listing 200: Adding buttons to the bottom toolbar
Listing 201: Filtering the data in the model
Listing 202: Allowing the user to search for a book
Listing 203: Keeping the search bar on the screen
Listing 204: Performing the search when the Return/Done key is pressed
Listing 205: Suggesting terms to the user
Listing 206: Cancelling the search programmatically
Listing 207: Including a navigation link
Listing 208: Defining a second view
Listing 209: Dismissing the view from the environment
Listing 210: Controlling the state of the view opened by a navigation link
Listing 211: Dismissing the view by modifying a state
Listing 212: Activating a navigation link programmatically
Listing 213: Adding a third view to the navigation hierarchy
Listing 214: Deactivating the link from a third view
Listing 215: Selecting rows with a navigation link
Listing 216: Defining a Detail view
Listing 217: Selecting a navigation link
Listing 218: Deactivating multiple navigation links from the Detail view
Listing 219: Displaying a sheet
Listing 220: Defining the view for the sheet
Listing 221: Disabling the interactive dismiss feature
Listing 222: Presenting a sheet for every value on the list
Listing 223: Editing a book
Listing 224: Showing a popover
Listing 225: Defining the content of the popover
Listing 226: Displaying an alert view
Listing 227: Defining an Alert view with multiple buttons
Listing 228: Defining an action sheet
Listing 229: Defining a TabView
Listing 230: Defining the BooksView
Listing 231: Defining the SettingsView
Listing 232: Displaying a badge in a tab
Listing 233: Selecting the initial view
Listing 234: Updating the model
Listing 235: Designing the rows according to the app's configuration
Listing 236: Configuring the app
Listing 237: Configuring the TabView to show content in pages
Listing 238: Defining a split view
Listing 239: Defining the view for the left column
Listing 240: Defining a placeholder view for the right column
Listing 241: Defining a multiplatform Detail view
Listing 242: Showing an item by default
Listing 243: Selecting a row
Listing 244: Setting the style of the NavigationView view
Listing 245: Configuring a NavigationLink view
Listing 246: Providing the authors from the model
Listing 247: Defining a three-column layout
Listing 248: Showing the authors
Listing 249: Showing the books
Links
SwiftUI Home Page
https://developer.apple.com/xcode/swiftui/
SwiftUI References
https://developer.apple.com/documentation/swiftui/
Official SwiftUI Tutorials
https://developer.apple.com/tutorials/swiftui
Demystify SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10022/
What's new in SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10018/
SF Symbols App
https://developer.apple.com/sf-symbols/
List of SF Symbols
https://sfsymbols.com/
Safe Area Guide
https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
Layout Containers
https://developer.apple.com/documentation/swiftui/layout-containers
Explore the SF Symbols 3 app
https://developer.apple.com/videos/play/wwdc2021/10288/
SF Symbols in SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10349/
What’s new in SF Symbols
https://developer.apple.com/videos/play/wwdc2021/10097/
Create custom symbols
https://developer.apple.com/videos/play/wwdc2021/10250/
Images
https://developer.apple.com/documentation/swiftui/images
Advanced SwiftUI Tutorials
https://swiftui-lab.com/
View Fundamentals
https://developer.apple.com/documentation/swiftui/view-fundamentals
Previews in Xcode
https://developer.apple.com/documentation/swiftui/previews-in-xcode
State and Data Flow
https://developer.apple.com/documentation/swiftui/state-and-data-flow
Swift Properties and Property Wrappers
https://docs.swift.org/swift-book/LanguageGuide/Properties.html
Text Input and Output
https://developer.apple.com/documentation/swiftui/text-input-and-output
Controls and Indicators
https://developer.apple.com/documentation/swiftui/controls-and-indicators
Direct and reflect focus in SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10023/
Combine Framework
https://developer.apple.com/documentation/combine
Collection Containers
https://developer.apple.com/documentation/swiftui/collection-containers
Presentation Containers
https://developer.apple.com/documentation/swiftui/presentation-containers
Craft search experiences in SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10176/
Resources
Download Resources
Books
For Masterminds books include everything you need to develop professional applications. Create amazing websites and insanely great apps for iPhones, iPads and Mac computers.