SwiftUI For Dummies. Wei-Meng Lee

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 ...

      7 Chapter 8FIGURE 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 ContentViewFIGURE 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.

      8 Chapter 9FIGURE 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.

      9 Chapter 10FIGURE 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.

      10 Chapter 11FIGURE 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.

      11 Chapter 12FIGURE 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.

      12 Chapter 13FIGURE 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

      1  Cover

      2 Table of Contents

      3  Begin