HOME BOOKS QUICK GUIDES VIDEO COURSES
NEWSLETTER CONTACT
SwiftUI Framework
Swift 5.7 | iOS 16
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
Safe Area
Priorities
Alignment Guides
Groups
Grids
Custom Views
Custom Layout
Generic Views
Previews
Preview Modifiers
Environment
DECLARATIVE USER INTERFACE
States
Property Wrappers
@State
@Binding
Binding Structures
@Environment
Model
@EnvironmentObject
View Model
Control Views
Button View
TextField View
SecureField View
TextEditor View
Toggle View
Slider View
ProgressView View
Stepper View
GroupBox View
Adaptivity
Size Classes
GeometryReader View
Preferences
LISTS
Lists of Views
ForEach View
ScrollView View
Lazy Grids
List View
Sections
Edit Mode
Swipe Actions
Custom Buttons
Refreshable
Outline List
Tables
Pickers
Picker View
Date Pickers
Forms
Form View
Disclosure Group
NAVIGATION
Multiple Views
Navigation Stack
Toolbar
Search
Navigation Link
Modal Views
Sheets
Popovers
Alert Views
Confirmation Dialog
Tab Views
Universal Interface
Three-Columns Layout
Configuration
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: Returning values of complex data types
Listing 5: Returning opaque types
Listing 6: Displaying values with a Text view
Listing 7: Formatting the value for the Text view
Listing 8: Displaying a date with a Text view
Listing 9: Displaying a timer with a Text view
Listing 10: Applying modifiers to a view
Listing 11: Assigning a fixed size to a view
Listing 12: Creating flexible containers
Listing 13: Adding a padding to the view
Listing 14: Assigning a specific padding for each side
Listing 15: Assigning padding with Edge values
Listing 16: Assigning dynamic font types
Listing 17: Using the system font
Listing 18: Using standard fonts
Listing 19: Using custom fonts
Listing 20: Applying multiple styles to a text
Listing 21: Nesting Text views
Listing 22: Styling the font
Listing 23: Formatting text
Listing 24: Truncating text
Listing 25: Implementing Color views
Listing 26: Defining the color with RGB values
Listing 27: Assigning a dynamic color
Listing 28: Assigning a custom color
Listing 29: Assigning a color to the text of a Text view
Listing 30: Assigning a background color to a Text view
Listing 31: Assigning a background color to the view and the padding
Listing 32: Assigning a border to the view
Listing 33: Rounding corners
Listing 34: Displaying a view in front of another view
Listing 35: Applying a predefined gradient to a view
Listing 36: Applying a material
Listing 37: Applying a material to the view's content
Listing 38: Displaying an image
Listing 39: Clipping the image
Listing 40: Resizing the image
Listing 41: Resizing an image to fit the view
Listing 42: Resizing the image to fit within the view with the scaledToFit() modifier
Listing 43: Resizing and clipping the image to fill the view
Listing 44: Resizing image to fill the container
Listing 45: Applying style modifiers to an Image view
Listing 46: Applying visual effects to an Image view
Listing 47: Scaling an image to the selected font size
Listing 48: Displaying SF symbols
Listing 49: Styling a symbol
Listing 50: Storing the font in a constant
Listing 51: Assigning a variant to a symbol
Listing 52: Displaying multicolor symbols
Listing 53: Displaying a multicolor symbol with custom colors
Listing 54: Displaying a variable SF Symbol
Listing 55: Displaying a text with an SF Symbol
Listing 56: Performing a task when the view appears
Listing 57: Applying custom modifiers
Listing 58: Customizing a custom modifier
Listing 59: Creating a vertical stack of views
Listing 60: Aligning views in a vertical stack
Listing 61: Adding a space between the views
Listing 62: Creating a horizontal stack of views
Listing 63: Creating a ZStack
Listing 64: Setting the Z index of a view
Listing 65: Assigning modifiers to the stack and its content
Listing 66: Nesting stacks
Listing 67: Aligning the views with a flexible space
Listing 68: Aligning the views to the left and the top
Listing 69: Ignoring the safe area
Listing 70: Ignoring only the container safe area at the bottom
Listing 71: Expanding the safe area
Listing 72: Arranging the views with priorities by default
Listing 73: Assigning a higher priority to a view
Listing 74: Defining a view with a fixed size
Listing 75: Aligning images to the center with standard values
Listing 76: Aligning an image to the center with custom values
Listing 77: Aligning all images to the center with custom values
Listing 78: Defining custom alignment guides
Listing 79: Aligning views with custom alignment guides
Listing 80: Arranging the views in groups
Listing 81: Assigning different views to the body property
Listing 82: Defining a grid layout
Listing 83: Defining a multicolumn cell
Listing 84: Embedding a grid within another grid
Listing 85: Extracting views
Listing 86: Defining a custom layout
Listing 87: Selecting a layout
Listing 88: Wrapping views in an AnyView view
Listing 89: Constructing views with the @ViewBuilder property wrapper
Listing 90: Returning an empty view
Listing 91: Configuring the preview
Listing 92: Configuring the preview to represent multiple devices
Listing 93: Adapting the size of the preview to the size of the view
Listing 94: Activating dark mode
Listing 95: Generating multiple previews
Listing 96: Defining a property wrapper
Listing 97: Using a property wrapper
Listing 98: Defining a state
Listing 99: Defining multiple states
Listing 100: Defining bidirectional binding
Listing 101: Using @Binding properties
Listing 102: Accessing the properties of a State structure
Listing 103: Initializing @State properties
Listing 104: Accessing the values of a @Binding property
Listing 105: Creating a Binding structure
Listing 106: Creating a Binding structure with an immutable value
Listing 107: Responding to updates in the states of the environment
Listing 108: Storing our data in an observable object
Listing 109: Initializing the observable object in the App structure
Listing 110: Working with the observable object from the views
Listing 111: Storing only the app's data in the model
Listing 112: Defining an observable object for a view
Listing 113: Initializing the view's observable object
Listing 114: Initializing the view's observable object when the views appear
Listing 115: Assigning the observable object to the view's environment
Listing 116: Getting a reference to the observable object from the environment
Listing 117: Defining an MVVM pattern
Listing 118: Accessing the model in an MVVM pattern
Listing 119: Implementing Button views
Listing 120: Using functions to organize the code
Listing 121: Referencing a method
Listing 122: Adding and removing views from the interface
Listing 123: Disabling a button
Listing 124: Defining the label of a button with an Image view
Listing 125: Styling buttons
Listing 126: Assigning a role
Listing 127: Scaling buttons
Listing 128: Defining custom styles for the button
Listing 129: Configuring a text field
Listing 130: Responding to the Done button
Listing 131: Responding to changes in focus
Listing 132: Closing the keyboard
Listing 133: Checking the values before storing
Listing 134: Disabling the button
Listing 135: Controlling user's input
Listing 136: Accepting only integer numbers
Listing 137: Defining a multiline text field
Listing 138: Using a secure text field
Listing 139: Implementing a text editor
Listing 140: Implementing a Toggle
Listing 141: Including a subtitle
Listing 142: Defining a custom label for the Toggle view
Listing 143: Implementing a toggle button
Listing 144: Defining a custom Toggle view
Listing 145: Creating a slider
Listing 146: Responding to the slider state
Listing 147: Showing progress
Listing 148: Simulating progress
Listing 149: Showing an activity indicator
Listing 150: Creating a stepper
Listing 151: Defining the steps of a stepper
Listing 152: Modifying the interface when the value is incremented or decremented
Listing 153: Defining a group of views
Listing 154: Detecting changes in the horizontal size class
Listing 155: Using a GeometryReader to detect orientation
Listing 156: Adapting an Image view to the size of its container
Listing 157: Reading the position of the GeometryReader view
Listing 158: Reading the position and size of a view
Listing 159: Setting and reading preferences
Listing 160: Creating a list of views dynamically
Listing 161: Creating a list with a standard design
Listing 162: Defining a model to work with lists of views
Listing 163: Injecting the model into the environment
Listing 164: Creating a list of views with data from the model
Listing 165: Making a list of views scrollable
Listing 166: Configuring the scroll view
Listing 167: Scrolling the list of views horizontally
Listing 168: Scrolling the list programmatically
Listing 169: Creating a grid with a fixed number of items
Listing 170: Defining flexible items
Listing 171: Defining adaptive items
Listing 172: Creating a list of views with the List view
Listing 173: Creating a plain list
Listing 174: Customizing the rows
Listing 175: Assigning alternate backgrounds
Listing 176: Mixing static and dynamic content in a list
Listing 177: Dividing the content into sections
Listing 178: Configuring the section separators
Listing 179: Configuring the list from the environment
Listing 180: Providing an ordered list of values
Listing 181: Deleting rows
Listing 182: Activating the edit mode
Listing 183: Moving rows
Listing 184: Selecting a row
Listing 185: Selecting multiple rows
Listing 186: Customizing the edit mode
Listing 187: Customizing the selection
Listing 188: Storing the selection in the model
Listing 189: Defining custom swipe actions
Listing 190: Implementing a custom button to delete the rows
Listing 191: Refreshing the list
Listing 192: Defining the model and the view to create a hierarchical list
Listing 193: Implementing an OutlineGroup view
Listing 194: Defining a model to test tables
Listing 195: Creating a table with multiple columns
Listing 196: Sorting the values by column
Listing 197: Allowing the user to select items in a table
Listing 198: Using a context menu to process a row
Listing 199: Defining the content of a column with a Toggle view
Listing 200: Defining a custom sort comparator
Listing 201: Sorting Boolean values on a table
Listing 202: Defining a picker
Listing 203: Selecting an initial value
Listing 204: Listing values by index
Listing 205: Implementing a segmented picker
Listing 206: Defining a DatePicker to select a date
Listing 207: Limiting the DatePicker to a range of values
Listing 208: Presenting a picker with a spinning wheel
Listing 209: Picking multiple dates
Listing 210: Defining a form
Listing 211: Defining a custom label
Listing 212: Styling a form
Listing 213: Disclosing controls
Listing 214: Initiating a navigation stack
Listing 215: Setting the title mode
Listing 216: Adding a button to the navigation bar
Listing 217: Adding multiple buttons
Listing 218: Adding buttons to the bottom toolbar
Listing 219: Defining the buttons intent
Listing 220: Customizing the bar
Listing 221: Creating a popup menu
Listing 222: Filtering the data in the model
Listing 223: Displaying a search bar
Listing 224: Keeping the search bar on the screen
Listing 225: Performing the search when the Return/Done key is pressed
Listing 226: Suggesting terms to the user
Listing 227: Cancelling the search programmatically
Listing 228: Adding scope buttons
Listing 229: Searching by title and author
Listing 230: Adding tokens
Listing 231: Filtering books by author
Listing 232: Including a navigation link
Listing 233: Defining a second view
Listing 234: Dismissing the view from the environment
Listing 235: Selecting rows with a navigation link
Listing 236: Defining a Detail view
Listing 237: Defining custom navigation
Listing 238: Adding and removing views from the path
Listing 239: Going back to any view in the path
Listing 240: Adding values to the path
Listing 241: Displaying a sheet
Listing 242: Defining the view for the sheet
Listing 243: Disabling the interactive dismiss feature
Listing 244: Assigning a predefined height
Listing 245: Assigning a custom height
Listing 246: Presenting a sheet for every value on the list
Listing 247: Editing a book
Listing 248: Showing a popover
Listing 249: Defining the content of the popover
Listing 250: Displaying an alert view
Listing 251: Defining an Alert view with multiple buttons
Listing 252: Defining an action sheet
Listing 253: Defining a TabView
Listing 254: Defining the BooksView
Listing 255: Defining the SettingsView
Listing 256: Displaying a badge in a tab
Listing 257: Selecting the initial view
Listing 258: Updating the model
Listing 259: Designing the rows according to the app's configuration
Listing 260: Configuring the app
Listing 261: Configuring the TabView to show content in pages
Listing 262: Defining a two-column split view
Listing 263: Defining the view for the left column
Listing 264: Defining a placeholder view for the right column
Listing 265: Defining a Multiplatform Detail view
Listing 266: Showing an item by default
Listing 267: Enabling navigation in the right column
Listing 268: Creating a navigation path for the right column
Listing 269: Expanding the cover in a Multiplatform application
Listing 270: Adding navigation to the left column
Listing 271: Opening a view on the left column
Listing 272: Providing the list of authors
Listing 273: Defining a three-column layout
Listing 274: Showing the authors
Listing 275: Showing the books
Listing 276: Hiding columns programmatically
Listing 277: Configuring the columns
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
What's new in SwiftUI
https://developer.apple.com/videos/play/wwdc2022/10052/
SF Symbols 4
https://developer.apple.com/sf-symbols/
What's new in SF Symbols 4
https://developer.apple.com/videos/play/wwdc2022/10157/
Create custom symbols
https://developer.apple.com/videos/play/wwdc2021/10250/
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
Compose custom layouts with SwiftUI
https://developer.apple.com/videos/play/wwdc2022/10056/
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/
Collection Containers
https://developer.apple.com/documentation/swiftui/collection-containers
Tables
https://developer.apple.com/documentation/swiftui/tables
Presentation Containers
https://developer.apple.com/documentation/swiftui/presentation-containers
The SwiftUI cookbook for navigation
https://developer.apple.com/videos/play/wwdc2022/10054/
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.