SwiftUI For Dummies E-Book

Wei-Meng Lee

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 311

Veröffentlichungsjahr: 2020

Beschreibung

The simplest way to create world-class apps Have a unique app idea but worried you don't quite have the coding skills to build it? Good news: You can stop fretting about someone beating you to market with the same idea and start work right now using SwiftUI. SwiftUI is a gateway app development framework that has become one of the best ways for fledgling developers to get iOS apps off the ground without having to become a coding expert overnight. SwiftUI For Dummies makes that process even faster, providing a friendly introduction to the SwiftUI and Swift programming language and helping you feel right at home creating and building with playgrounds. The book also covers the frameworks and APIs that make it so easy to create smooth, intuitive interfaces--just dive right in and have fun! * Combine projects into workspaces * Employ Xcode editing tools * Use constants and variables * Test your code on iOS Simulator Time is of the essence, and with SwiftUI For Dummies, it's also on your side. Get going with this friendly guide today, and you'll be celebrating the successful launch of your app way before you thought possible!

Leseprobe

SwiftUI™For Dummies®

Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2020 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, [phone], fax [phone], or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. SwiftUI is a trademark of Apple, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book. SwiftUI™ For Dummies® is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple, Inc.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone]. For technical support, please visit https://hub.wiley.com/community/support/dummies.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2020939546

ISBN 978-1-119-65268-7 (pbk); ISBN 978-1-119-65272-4 (ebk); ISBN 978-1-119-65270-0 (ebk)

SwiftUI™ For Dummies®

To view this book's Cheat Sheet, simply go to www.dummies.com and search for “Swift UI For Dummies Cheat Sheet” in the Search box.

Table of Contents

Cover

Introduction

About This Book

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Where to Go from Here

Part 1: Getting Started with Swift and SwiftUI

Chapter 1: Introducing SwiftUI

Understanding What SwiftUI Is

Getting the Tools

The Gory Details

Chapter 2: Basics of the Swift Programming Language

Basic Swift Syntax

Basic Data Types

Arrays

Dictionaries

Optional Types

Functions

Flow Control

Looping

Structures

Classes

Closures

Protocols

Part 2: Understanding the Basics of SwiftUI

Chapter 3: Getting Started with the Basics of SwiftUI

Taking a Look at SwiftUI Views

Displaying an Image

Displaying a Button

Stacking the Views

Putting on the Finishing Touches

Chapter 4: Handling User Inputs and Custom Views

Looking at Input Views

Composing Custom Views

Chapter 5: Displaying Lists of Items

Using the List View to Display Items

Displaying the List within a NavigationView

Displaying Sections

Previewing in Light and Dark Modes

Chapter 6: Creating Navigation and Tabbed Applications

Creating Navigation Apps

Creating Tabbed Applications

Chapter 7: Formatting Your User Interface

Laying Out Views Using Stacks

Using Container Views

Part 3: Exploring with SwiftUI in More Detail

Chapter 8: Understanding State Management in SwiftUI

Using a Property Wrapper

Maintaining State Using State Variables

Binding State Variables

Managing State from External Objects

Sharing Objects

Accessing Built-in Environment Variables

Chapter 9: Using Legacy UIKit Views and View Controllers in SwiftUI

Using UIKit in SwiftUI

Using the UIViewRepresentable Protocol for UIKit Views

Using the UIViewControllerRepresentable Protocol for UIKit View Controllers

Part 4: Performing Animations and Drawings

Chapter 10: Drawings and Special Effects

Drawing Using the Five Built-in Shapes

Clipping with the Basic Shapes

Drawing Custom Shapes

Using Special Effects in SwiftUI

Chapter 11: Performing Animations in SwiftUI

Understanding How to Animate

Performing Your Own Animation

Creating a Custom Progress Indicator

Chapter 12: Creating a Complete Project

Understanding What the App Does

Building the Project

Deploying the App

Part 5: The Part of Tens

Chapter 13: Ten SwiftUI Tips and Tricks

Resuming Live Preview

Implementing Localization

Combining Text Views

Creating Custom Modifiers

Displaying Multiple Alerts

Enabling Debug Preview

Previewing Using Different Devices

Dark Mode Only Works On NavigationView

Extracting Subviews

Displaying a Context Menu

Chapter 14: Ten Great SwiftUI Resources

Apple

SwiftUI by Example

100 Days of SwiftUI

Gosh Darn SwiftUI

SwiftUI Hub

Awesome SwiftUI

raywenderlich.com

Swift Talk

About SwiftUI

Stack Overflow

Appendix: Code Snippets for Common SwiftUI Views

Content View

Using Modifiers

Image View

Text View

Button View

VStack View

HStack View

ZStack View

TextField View

SecureField View

Toggle View

Slider View

Stepper View

Picker View

List View

NavigationView View

NavigationLink View

Section View

TabView View

Form and Section Views

Rectangle View

RoundedRectangle View

Circle View

Capsule View

Ellipse View

Index

About the Author

Advertisement Page

Connect with Dummies

End User License Agreement

List of Illustrations

Chapter 1

FIGURE 1-1: UIKit is event driven, and it uses delegates to handle events.

FIGURE 1-2: SwiftUI is a state-driven declarative framework.

FIGURE 1-3: Installing Xcode from the Mac App Store.

FIGURE 1-4: Launching Xcode.

FIGURE 1-5: Selecting the Single View App project type.

FIGURE 1-6: Naming the project.

FIGURE 1-7: Viewing the project that you’ve created.

FIGURE 1-8: Dismissing the Inspector window.

FIGURE 1-9: The canvas allows you to preview your application without deploying...

FIGURE 1-10: Previewing your app on the canvas.

FIGURE 1-11: Modifying the

ContentView.swift

file.

FIGURE 1-12: The preview is updated to reflect the changes in the code.

FIGURE 1-13: Occasionally you have to click the Try Again button to update the ...

FIGURE 1-14: Clicking the Live Preview button allows you to run your applicatio...

FIGURE 1-15: Testing your application in Live Preview mode.

FIGURE 1-16: Previewing the UI on two iOS devices — the latest iPhone and an iP...

FIGURE 1-17: The content of the project created.

FIGURE 1-18: Examining the items in the

Info.plist

file.

Chapter 3

FIGURE 3-1: The Live Preview dynamically shows the changes made to your

Content

...

FIGURE 3-2: The

Text

view after applying the chains of modifiers.

FIGURE 3-3: Showing the SwiftUI Inspector.

FIGURE 3-4: The SwiftUI Inspector allows you to customize the various propertie...

FIGURE 3-5: Changing the font weight of the

Text

view in the SwiftUI Inspector.

FIGURE 3-6: You can also add modifiers to a view through the SwiftUI Inspector.

FIGURE 3-7: Calling the

border()

modifier on the

Text

view.

FIGURE 3-8: Displaying a border on the

Text

view.

FIGURE 3-9: Adding an image to the

Assets.xcassets

file in your Xcode project.

FIGURE 3-10: The

Image

view displaying the image that you've just added to your...

FIGURE 3-11: The

Image

view displayed with a circle.

FIGURE 3-12: Aligning the image to the bottom-right corner of the frame.

FIGURE 3-13: The image inside the

Image

view resizing itself to fit the frame.

FIGURE 3-14: The customized version of the button.

FIGURE 3-15: Using the

VStack

view to contain a series of views.

FIGURE 3-16: Aligning the views contained within the

VStack

view to the left.

FIGURE 3-17: Nesting the various views.

FIGURE 3-18: The

HStack

view nesting the various other views.

FIGURE 3-19: Aligning the entire

HStack

to the top of the screen.

FIGURE 3-20: You can also visually embed views in the

HStack

or

VStack

views.

FIGURE 3-21: The final name card with tappable buttons.

Chapter 4

FIGURE 4-1: The

TextField

and

Text

views on the screen.

FIGURE 4-2: The content of the

Text

view is updated as the user types in the tw...

FIGURE 4-3: The username created by removing special characters from the first ...

FIGURE 4-4: The

TextField

views with rounded corners.

FIGURE 4-5: The Login button is disabled until the user enters both the usernam...

FIGURE 4-6: The

SecureField

view masks the text entered.

FIGURE 4-7: The

Toggle

view with the background color of yellow when it's enabl...

FIGURE 4-8: The

Toggle

view with the background color of gray when it’s disable...

FIGURE 4-9: The

Toggle

view with the label hidden.

FIGURE 4-10: As the user moves the

Slider

view, its value is displayed in the

T

...

FIGURE 4-11: The temperature converter involving two

Slider

views.

FIGURE 4-12: The

Stepper

view with its label.

FIGURE 4-13: When the

Stepper

reaches its minimum values, the

Text

view is disp...

FIGURE 4-14: When the

Stepper

reaches its maximum values, the

Text

view is disp...

FIGURE 4-15: The

Picker

view displaying a list of options.

FIGURE 4-16: Hiding the label for the

Picker

view.

FIGURE 4-17: Embedding the

Picker

view within a

Form

.

FIGURE 4-18: The list of options from the

Picker

view is displayed on another p...

FIGURE 4-19: The custom view that you’ll be building.

FIGURE 4-20: Adding a new

SwiftUI View

file to the project.

FIGURE 4-21: Applying border to a rounded

Image

view.

FIGURE 4-22: Displaying a border on the corner-rounded

Image

view.

FIGURE 4-23: Adding images to the Xcode project.

FIGURE 4-24: Using the custom view that you’ve created.

Chapter 5

FIGURE 5-1: The

List

view displaying a list of items

FIGURE 5-2: For this example to work, you need to add the various flag images t...

FIGURE 5-3: Each row showing the flag of the country and the country's name.

FIGURE 5-4: Generating a list of items from 1 to 10 in a

List

view using the

Fo

...

FIGURE 5-5: The

List

view enclosed within the

NavigationView

.

FIGURE 5-6: Tapping the last item in the

List

and displaying the item selected ...

FIGURE 5-7: Adding a new row to the

List

view.

FIGURE 5-8: Deleting a row from the

List

view.

FIGURE 5-9: The Edit button allows you to delete items directly from the

List

v...

FIGURE 5-10: When the

List

view is in edit mode, each item will display a Delet...

FIGURE 5-11: The Delete button appears when you tap the Delete icon.

FIGURE 5-12: The drag handle of each item allows you to rearrange the items.

FIGURE 5-13: Rearranging an item in the

List

view.

FIGURE 5-14: The Settings app in iOS uses the

List

view.

FIGURE 5-15: The

List

view displays two sections, each with two items.

FIGURE 5-16: Displaying countries grouped by continent.

FIGURE 5-17: Showing the

List

view in

GroupedListStyle

.

FIGURE 5-18: Sections are displayed without any headers.

FIGURE 5-19: The Environment Overrides section on Xcode allows you to switch be...

FIGURE 5-20: The

List

view displayed in Dark mode.

FIGURE 5-21: Viewing the preview in both Light and Dark modes.

Chapter 6

FIGURE 6-1: The flow of a navigation-style app.

FIGURE 6-2: The flow of a tabbed app.

FIGURE 6-3: A

Text

view wrapped within a

NavigationView

.

FIGURE 6-4: Displaying the navigation bar title.

FIGURE 6-5: Displaying the navigation bar title in

inline

display mode.

FIGURE 6-6: Clicking the This Is a Text View link navigates to another screen (...

FIGURE 6-7: The back button to return to the previous screen

FIGURE 6-8: You can now navigate between the screens using the Next and Back bu...

FIGURE 6-9: The structure of the JSON content displayed using

www.jsonlint.com

.

FIGURE 6-10: Displaying the news headlines using the

List

view.

FIGURE 6-11: Adding a package to your XCode project.

FIGURE 6-12: Displaying an image next to each news headline.

FIGURE 6-13: Displaying the navigation bar title.

FIGURE 6-14: Reducing the font size of the navigation bar title.

FIGURE 6-15: Previewing the details page.

FIGURE 6-16: Tapping a news item displays the news in more detail.

FIGURE 6-17: The details page with an empty space below the navigation bar.

FIGURE 6-18: The empty space below the navigation bar is gone.

FIGURE 6-19: Displaying a

TabView

with two screens.

FIGURE 6-20: Programmatically displaying the

TabView2

.

Chapter 7

FIGURE 7-1: The rectangle is displayed in the center of the screen.

FIGURE 7-2: Showing the rectangle with a border.

FIGURE 7-3: The

VStack

view now contains two rectangles.

FIGURE 7-4: Aligning both rectangles to the right.

FIGURE 7-5: The

VStack

views now occupy the entire screen.

FIGURE 7-6: Aligning the content of the

VStack

using the leading and trailing o...

FIGURE 7-7: Aligning the content of the

VStack

using the

topLeading

and

bottomT

...

FIGURE 7-8: Applying padding to the first rectangle.

FIGURE 7-9: Applying padding with the various specified options.

FIGURE 7-10: The order of applying the modifiers matter.

FIGURE 7-11: Applying a

Spacer

view between the two rectangles.

FIGURE 7-12: The

Spacer

view expanding to fill up the space between the two rec...

FIGURE 7-13: The

Spacer

view automatically adjusts its height based on the scre...

FIGURE 7-14: Specifying the

maxHeight

and

minHeight

for the Spacer view.

FIGURE 7-15: Using the

HStack

view to contain the two rectangles.

FIGURE 7-16: Using the

Spacer

view in the

HStack

view.

FIGURE 7-17: Aligning the first rectangle to the bottom of the

HStack

view.

FIGURE 7-18: The three

Text

views are centered vertically within the

HStack

vie...

FIGURE 7-19: The various alignment options applied to the views contained withi...

FIGURE 7-20: Using the

firstTextBaseline

option.

FIGURE 7-21: Using the

lastTextBaseline

option.

FIGURE 7-22: Stacking the

Text

view over the

Image

view in the

ZStack

view.

FIGURE 7-23: Overlaying the

Image

view with the

Text

view.

FIGURE 7-24: Using a

Spacer

view in the

ZStack

view.

FIGURE 7-25:

The Horse in Motion

by Eadweard Muybridge.

FIGURE 7-26: The button in its original state.

FIGURE 7-27: The button in its depressed state. (Poor button.)

FIGURE 7-28: The views need some serious layout to make this look professional.

FIGURE 7-29: The Settings app on the iPhone.

FIGURE 7-30: The views laid out using the

Form

and

Section

views.

FIGURE 7-31: All container views in SwiftUI can contain, at most, ten views.

FIGURE 7-32: All the images grouped together (top) and with a divider inserted ...

Chapter 8

FIGURE 8-1: Displaying an email address in lowercase.

FIGURE 8-2: Displaying the

Alert

view through the use of a state variable.

FIGURE 8-3: The

Toggle

view changes its color when the

Alert

view is dismissed.

FIGURE 8-4: Displaying a sheet in iOS.

FIGURE 8-5: Clicking the Dismiss Sheet button does not dismiss the sheet.

FIGURE 8-6: How binding works.

FIGURE 8-7: Selecting from a list of search engines.

FIGURE 8-8: Selecting a search engine will automatically update the

ContentView

FIGURE 8-9: How the

ObservableObject

protocol works.

FIGURE 8-10: How the

ObservedOjbect

property works.

FIGURE 8-11: Selecting a tab page to select the search engine.

FIGURE 8-12: Selecting a search engine will automatically update the

ContentVie

...

FIGURE 8-13: The view in Light mode.

FIGURE 8-14: The view in Dark mode.

FIGURE 8-15: Overriding the custom environment variable values for a particular...

FIGURE 8-16: Overriding the custom environment variable values for all views.

Chapter 9

FIGURE 9-1: Legacy View controller and views.

FIGURE 9-2: Three views in SwiftUI embedded within

NavigationView

and

TabView

.

FIGURE 9-3: The

ContentView

and the

TabView

showing.

FIGURE 9-4: Navigating to

View1

.

FIGURE 9-5: Displaying View2 through the tab bar.

FIGURE 9-6: The activity indicator spinning continuously.

FIGURE 9-7: You can now start or stop the activity indicator.

FIGURE 9-8: Loading Apple’s home page using the

WebView

struct.

FIGURE 9-9: Testing the Image Picker.

FIGURE 9-10: Displaying the image selected using the Image Picker.

Chapter 10

FIGURE 10-1: Drawing a rectangle.

FIGURE 10-2: The rectangle with the filled color and border.

FIGURE 10-3: The rectangle with the padding applied before the border is drawn ...

FIGURE 10-4: The border is applied first to the rectangle before the padding is...

FIGURE 10-5: The rectangle rotated 45 degrees clockwise.

FIGURE 10-6: The rectangle reduced in size by 50 percent.

FIGURE 10-7: Drawing a rounded rectangle.

FIGURE 10-8: Filling a rounded rectangle with a linear gradient.

FIGURE 10-9: A rounded rectangle without any fill.

FIGURE 10-10: Applying the border modifier to

RoundedRectangle

doesn't display ...

FIGURE 10-11: Correctly applying a border around a rounded rectangle.

FIGURE 10-12: Changing the border to a dotted line.

FIGURE 10-13: Drawing a circle.

FIGURE 10-14: Filling a circle with a radial gradient fill.

FIGURE 10-15: Filling a circle with an angular gradient.

FIGURE 10-16: Drawing a capsule.

FIGURE 10-17: A capsule with equal width and height is a circle.

FIGURE 10-18: Drawing an ellipse.

FIGURE 10-19: Filling an ellipse with an angular gradient.

FIGURE 10-20: Drawing an ellipse with a border.

FIGURE 10-21: Displaying an image using the

Image

view.

FIGURE 10-22: Clipping the image with a circle.

FIGURE 10-23: Displaying a shadow around the image clipped with a circle.

FIGURE 10-24: Clipping the image with the capsule shape.

FIGURE 10-25: Clipping the image with the ellipse shape.

FIGURE 10-26: Clipping the image with the square shape.

FIGURE 10-27: The constants representing the various points on the rectangle.

FIGURE 10-28: Drawing two lines in the rectangle.

FIGURE 10-29: The initial custom shape.

FIGURE 10-30: Filling the custom shape with yellow.

FIGURE 10-31: Filling the custom shape with a linear gradient.

FIGURE 10-32: Drawing the outline of the custom shape reveals the missing line.

FIGURE 10-33: The custom shape with the line added.

FIGURE 10-34: The custom shape after adding the arc.

FIGURE 10-35: Understanding how the

addArc()

modifier works.

FIGURE 10-36: SwiftUI automatically draws a line connecting the last drawn poin...

FIGURE 10-37: How the custom shape will look after adding the last line.

FIGURE 10-38: Filling the custom shape and drawing borders around it at the sam...

FIGURE 10-39: Applying the

multiply

blend mode to the

Image

view.

FIGURE 10-40: Applying the different blend modes to the

Image

view.

FIGURE 10-41: Three circles overlapping each other.

FIGURE 10-42: Applying the

screen

blend mode to all three circles.

FIGURE 10-43: Applying the blur effects on the three circles.

FIGURE 10-44: Applying the saturation effects to the three circles.

Chapter 11

FIGURE 11-1: Displaying the rounded

Button

view.

FIGURE 11-2: Zooming the

Button

view two and a half times.

FIGURE 11-3: Animating the changing of the scale of the button.

FIGURE 11-4: Dimming the

Button

view.

FIGURE 11-5: Spinning the wheel of fortune.

FIGURE 11-6: Displaying a

Text

view.

FIGURE 11-7: Applying the 3D rotation to the

x

-axis (45 degrees).

FIGURE 11-8: Applying the 3D rotation to the

x

-axis (75 degrees).

FIGURE 11-9: Applying the 3D rotation to the

y

-axis.

FIGURE 11-10: Applying the 3D rotation to the

z

-axis.

FIGURE 11-11: Applying the 3D rotation to the three axes.

FIGURE 11-12: Applying the 3D rotation to a view on the three axes.

FIGURE 11-13: The indeterminate progress indicator that you’ll build.

FIGURE 11-14: The layout of the two circles, and rotating the starting point 90...

FIGURE 11-15: The trim controls the proportion of the circle to display, as wel...

FIGURE 11-16: Using the indeterminate progress indicator.

FIGURE 11-17: Using the determinate progress indicator.

Chapter 12

FIGURE 12-1: The app you build in this chapter.

FIGURE 12-2: Selecting from a list of news sources.

FIGURE 12-3: Creating a single-view app in Xcode.

FIGURE 12-4: Adding three SwiftUI View items and one Swift File item to your pr...

FIGURE 12-5: The application with two tab items.

FIGURE 12-6: Adding the

NewsURL.swift

file to your project.

FIGURE 12-7: Displaying the news headlines.

FIGURE 12-8: Displaying an image for each news headline.

FIGURE 12-9: Displaying the details of the news item.

FIGURE 12-10: Displaying the share sheet.

FIGURE 12-11: Displaying the preferences view.

FIGURE 12-12: The preferences view with the selected news source.

FIGURE 12-13: Select a new news source and the

List

view will automatically dis...

FIGURE 12-14: Preparing to deploy your app to a real device.

FIGURE 12-15: Entering your Apple ID.

FIGURE 12-16: Selecting your Apple ID.

FIGURE 12-17: Be sure to select your device name before proceeding with deploym...

FIGURE 12-18: Your app needs to be trusted before it can run.

FIGURE 12-19: Trusting the app.

Chapter 13

FIGURE 13-1: Setting up localization for your project in Xcode.

FIGURE 13-2: Adding a strings file item to your project.

FIGURE 13-3: Viewing the File Inspector window for the

Localizable.strings

file...

FIGURE 13-4: The new language should now appear under the Localization section.

FIGURE 13-5: The two string files for the two languages, English and Simplified...

FIGURE 13-6: Displaying the Text view in Simplified Chinese.

FIGURE 13-7: Concatenating different

Text

views together.

FIGURE 13-8: Enabling the Debug Preview feature in the preview canvas.

FIGURE 13-9: The target set for your project (iPhone 11 Pro Max, in this exampl...

FIGURE 13-10: Previewing your app in the specified dimensions.

FIGURE 13-11: Previewing the app on an iPhone 11 and an iPhone SE.

FIGURE 13-12: Previewing in Dark mode but the background of the app is still wh...

FIGURE 13-13: You can now preview the Dark mode correctly.

FIGURE 13-14: Extracting views as subviews in the preview canvas.

FIGURE 13-15: Naming the newly extracted subview.

FIGURE 13-16: Implementing a context menu on an

Image

view.

Guide

Cover

Table of Contents

Begin Reading

Pages

i

ii

1

2

3

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

401

402

403

Introduction

In 2019, at the Apple Worldwide Developers Conference, Apple announced SwiftUI, a declarative programming framework for developing user interfaces (UIs) for iOS and macOS applications. With SwiftUI, Apple aims to modernize the iOS development experience.

There’s no doubt that SwiftUI makes it much easier and more efficient for developers to create apps, but it also means you have to learn something new. That’s where SwiftUI For Dummies comes in. This book provides you with all the essentials that you need to learn to become a successful iOS developer using SwiftUI.

About This Book

This book covers the basics of SwiftUI. Because SwiftUI supports iOS, iPadOS, macOS, watchOS, and tvOS, it’s a really big topic. To narrow the scope, this book focuses on using SwiftUI with iOS, specifically to program iPhone apps.

In this code-intensive book, you’re encouraged to try out the examples in each chapter. The chapters are designed to be compact, easy to follow, and easy to understand. However, you don’t have to read this book from the first page to the last. Each chapter is designed to be independent, and you’re free to start with any chapter to find the topic that you’re interested in.

I don’t use many special conventions, but here are a couple points you should be aware of: Sidebars (text in gray boxes) and anything marked with the Technical Stuff icon are skippable, and code appears in monofont. Pretty simple, right?

Finally, within this book, you may note that some web addresses break across two lines of text. If you're reading this book in print and want to visit one of these web pages, simply key in the web address exactly as it’s noted in the text, pretending as though the line break doesn’t exist. If you’re reading this as an e-book, you’ve got it easy — just click the web address to be taken directly to the web page.

Foolish Assumptions

This book is for people who are new (or relatively new) to using SwiftUI for iOS development. Though I do not assume that you’re familiar with iOS programming, I do assume the following:

You’re familiar with the basics of programming.

You’re familiar with how an iPhone works.

You have a Mac that you can use to try out the examples in this book.

You don’t need an iPhone to test the applications in this book (except for

Chapter 12

where I show you how to load your iPhone with the application you’ve built); the iPhone Simulator will suffice.

Some chapters in this book assume that you’re familiar with UIKit programming (the framework used for iOS programming prior to SwiftUI). But this knowledge is not a prerequisite for using this book.

Icons Used in This Book

Like other books in the For Dummies series, this book uses icons, or little pictures in the margins, to draw your attention to certain kinds of material. Here are the icons that I use:

Whenever I tell you something useful or important enough that you’d do well to store the information somewhere safe in your memory for later recall, I flag it with the Remember icon.

The Technical Stuff icon marks text that contains some for-nerds-only technical details or explanations that you’re free to skip.

The Tip icon marks shortcuts or easier ways to do things, which I hope will make your life easier.

The Warning icon marks text that contains a friendly but unusually insistent reminder to avoid doing something. You have been warned.

Beyond the Book

In addition to what you’re reading right now, this product comes with a free access-anywhere Cheat Sheet that includes information on creating a stacked and table navigation app, creating shake fail feedback using animation, and more. To get this Cheat Sheet, go to www.dummies.com and type SwiftUI For Dummies Cheat Sheet in the Search box.

This book includes some downloadable content as well — all the code in the book, as well as the files you need to create the app described in the book. Go to www.dummies.com/go/swiftuifd to download all this great stuff.

Where to Go from Here

The first step to go from here is to prepare your Mac. If you’ve never programmed an iOS app, now is the time to download and install Xcode (see Chapter 1). If you’re a seasoned iOS developer, you’ll appreciate the fact that Chapter 1 also compares the old way of doing things using the UIKit and the new way of doing things in SwiftUI.

Chapter 2 provides a quick overview of the Swift programming language, which is the language used in SwiftUI. Learning a new language is not trivial, so I strongly suggest you go through the basics of Swift (even if you’re already familiar with it) so that you can learn some of the new language features in the latest version of Swift. You may also want to refer to Apple’s documentation on the Swift programming language at https://docs.swift.org/swift-book.

Beyond that, feel free to jump to any chapter that piques your interest. That being said, if you’re a SwiftUI newbie, it makes sense to follow the chapters in order.

Finally, my advice to all beginners is: Practice, practice, practice. Type in the code in each chapter and make mistakes. The more mistakes you make, the better you’ll understand and remember the topics discussed.

Good luck, and enjoy your newfound knowledge!

Part 1

Getting Started with Swift and SwiftUI

IN THIS PART …

Get a head start in using SwiftUI and build your first iOS app.

Get acquainted with the syntax of the Swift programming language so that you’re prepared to dive into the world of SwiftUI.