Mastering SwiftUI 4: Bootcamp Style

Explore how text views in SwiftUI display static text with string initializers, render images through a parameter, and concatenate views using SF symbols like heart.fill.

Learn how to use the text view's format parameter and format style in SwiftUI 4 to display formatted subjects as dates, with examples of date styles including medium and short.

Explore the date style initializer for text view, learning how to format date and time with predefined styles, including date, relative, offset, timer, and current time values.

Discover how to initialize an attributed string for a text view, create a hyperlink, and customize link color with foreground color to indicate visited state.

Explore how to display date ranges and intervals in SwiftUI using text views and sliders, calendar APIs, and date interval timers, including yesterday to tomorrow, date interval, and timer configurations.

Learn how the verbatim initializer displays non localized strings in text views, bypassing localization keys and locale lookups in SwiftUI.

Explore text view modifiers by applying the bold modifier to static text, chaining options, and toggling bold via the is active boolean parameter, using a state variable and tap gestures.

Apply system and custom fonts to text views with the font modifier, control size, weight, and design, and explore Chalk Duster and dynamic type in SwiftUI 4.

Explore font weight and the font weight modifier to apply weight variations to system or custom fonts, including large title, ultra light, and bold, with VStack-based examples and weight concatenation.

Explore the font design modifier and see mono spaced, default, rounded, serif or sans serif, and none side by side, while applying them to large title text with system fonts.

Explore the font width modifier in SwiftUI, using predefined options like compressed, condensed, expanded, standard, or a custom value to see how width affects text appearance.

Explore text capitalization strategies in SwiftUI using the font modifier to apply small caps, lowercase small caps, and uppercase. Compare how mixed-case strings render and preview the upcoming italic modifier.

Learn how the italic modifier applies italic style to text views and how it affects small caps, with iOS 16's programmatic overload to toggle italic via a state variable.

Understand how the SwiftUI foreground color modifier sets text color in a text view and how a child's own color overrides the container, with orange and mint variations.

Learn how the kerning modifier sets spaces between characters in a text view using a cg float value, with practical examples and a quick note on the tracking modifier.

Compare tracking and kerning in SwiftUI text modifiers, observe spacing in points, defaults at zero, and learn when to prefer tracking for clear spacing or kerning for stylistic effects.

Use the foreground style modifier to apply gradient colors to text and images via a shape style. Create a pink-to-orange linear gradient and see how it adapts to color schemes.

Apply the monospaced modifier to give all child views a fixed-width font and use the iOS 16 programmatic toggle to reveal equal character spacing.

Explore the mono spaced digit modifier in swift ui, which keeps digits in a fixed width while other characters render normally, helping distinguish digits from similar-looking letters.

Explore the strikethrough modifier in SwiftUI by styling text with a line, toggling via state and on tap, applying color and dash patterns, and previewing solid, dash, and dash-dot.

Explore the underline modifier in SwiftUI 4 to apply underline to text views using isActive and color. Toggle on tap and explore the dotted pattern introduced in iOS 16.

Explore the line limit modifier to cap a text view at a set number of lines, truncating excess with ellipses and enabling tap-to-expand with optional animation.

Master line spacing in SwiftUI by using the lineSpacing modifier to add vertical space between lines, not characters, and control it with a state variable and plus/minus buttons.

Demonstrate how to use the multiline text alignment modifier to center, trailing, or leading alignment in a text view, with leading as the default and awareness of bidirectional scripts.

Learn how the allows tightening modifier compacts character spacing to fit text that slightly exceeds available space, showing ellipses when needed.

Learn how the minimum scale factor modifier in SwiftUI shrinks text up to 0.01–1 when space is tight, causing ellipses at the limit, demonstrated with 0.8 and 0.2.

Explore how the truncation mode modifier controls where ellipses appear in SwiftUI text views, choosing head, middle, or tail truncation for single and multi-line text.

Explore how baseline offset aligns concatenated text views in SwiftUI, learn to apply negative and positive offsets to move typography up or down, and achieve consistent baselines.

Learn to apply custom fonts in SwiftUI with the font modifier, using pre-installed system fonts or imported fonts bundled in your app, with previews of Abner, bold italic, and Chalkboard.

Learn to import a custom font into a SwiftUI project, configure its name in the info section, and use a font modifier with fixed size and relative to dynamic type.

Explore scaled metrics, the property wrapper that scales fonts with dynamic type in SwiftUI. Compare two text views, one scaled, one static, showing how dynamic type changes affect them.

Explore how the dynamic type size modifier limits a view's text scaling within a range, preventing the UI from breaking in SwiftUI.

Explore how iOS 15 text views support markdown in SwiftUI, including bold, italic, strike through, hyperlinks, and mono spaced text, with practical styling examples.

Learn how the text case modifier transforms the text in a text view, enabling lowercase or uppercase output, while none preserves the original string.

Explore the SwiftUI text selection modifier and how the text selectable type enables selection for views and groups, plus implementing a custom text select ability with dark mode logic.

Explore how SwiftUI text view formats non-string values using built-in formats, including date and time, ISO 8601, numbers with locale-aware formatting, percentage, URL, and currency codes.

Explore how text style formats dates, times, timers, relative times, and date ranges in SwiftUI's Text view using the date style overload.

Explore date formatter options in SwiftUI, using the formatted function to customize date and time styles (abbreviated, complete, long, numeric) and locale-aware output in text views.

Learn date formatter objects in swiftui to extract specific date parts with date dot formatted, using date time options for day, day of year, hour, weekday, and month.

Harness list formatting in SwiftUI to render an array as a single string in a text view, using the list formatter and options like and or formats.

Explore the Swift measurement formatter by creating measurement objects for temperature and distance, then render them in a text view with width variants, locale-aware formatting, and locale overrides.

Learn to format names with the person name component in Swift, building a locale aware object and applying abbreviated, long, medium, and short styles, including nicknames like Johnny.

Explore byte counting and formatting with the Byte Count Formatter in SwiftUI 4, converting bytes into localized descriptions such as kilobytes, megabytes, and gigabytes for display.

Explore how currency formatter formats numbers into different currencies in a SwiftUI view, using locale to display correct symbols and decimal separators, without converting currencies.

Explore how to display images in SwiftUI using image view, including asset catalog images and SF symbols via system name, and resize vector images with a font modifier.

Learn how to resize images in SwiftUI image views by applying the resizable modifier before using the frame modifier, so the image fits the available space without overflowing the viewport.

Apply aspect ratio to an image using the aspect ratio modifier, control content mode (fill or fit), and animate changes with a state-driven value to explore dynamic aspect ratios.

Learn how to apply the scale to fit modifier in swiftui to image views, using resizable images to preserve aspect ratio and fit within the viewport.

Use the scale to fill modifier to make an image cover the view while preserving aspect ratio, unlike scale to fit, with default behavior that may bleed beyond the viewport.

Learn how the clipped modifier confines overflowing images to a defined frame, preventing overflow and revealing only content inside the frame, with borders to visualize the frame.

Learn how to use the clip shape modifier in SwiftUI to clip images into circle, capsule, or custom shapes, and apply shadow and other modifiers to enhance visuals.

Create a CGImage from a UI image and display it in an image view, configuring scale, orientation, and an accessibility label for a responsive SwiftUI image workflow.

Learn how the interpolation modifier in SwiftUI 4 controls image pixelation when resizing, with none, low, medium, and high settings, and why vector-based images help avoid blur.

Master rendering mode in SwiftUI by rendering an image as original or template, tinting with a color or gradient, and animating color changes via timeline view updating every 2 seconds.

Learn to use the scaled matrix property wrapper to resize image views in response to dynamic type, using a size wrapper backed by scale metric for width and height.

Explore SF symbols, using system name images from the symbol library, render scalable vector icons in SwiftUI, and apply fonts, colors, and gradients to both images and text.

Learn how to render SF symbols in modes such as monochrome, foreground color, gradient, hierarchical, and palette, and apply the symbol rendering mode modifier to customize SwiftUI visuals.

Explore how the SF Symbol variant modifier powers symbol variation, using examples like person, person.fill, and person.circle to render alternate variants and provide fallbacks when a variant is unavailable.

Explore using the foreground style modifier with SF symbols to create a linear gradient from pink to blue for symbol images and text, enabled by iOS 15.

Apply material styles to SF symbols with the foreground style modifier, using a resizable background image in a ZStack to create a UI with regular, thick, and ultra thick materials.

Explore dynamic types with SF Symbol, learning how image scale and the scale matrix (scaled metric) adapt symbol sizes to dynamic font changes in SwiftUI.

Learn how iOS 14 introduces safety labels, a title and image combined in a single view. Create a label with text and an image like star.fill, arranged as an HStack.

Explore labels with custom views in swiftui, using view builder closures to compose text and icons, and customize fonts, colors, and styles, including lowercase small caps and gradient foregrounds.

Display an asset image in a SwiftUI label from assets catalog and resize it for alignment with text. Compare resizing the source image versus scaling an image to preserve quality.

Create and apply a custom label style in swiftui by conforming to the label style protocol and using the configuration to style the icon, title, and background.

Explore label initialization and configuration options in SwiftUI, including creating a shadow effect label style, using configuration for icon and title, and adapting labels to different contexts across platforms.

Explore label style options in SwiftUI, including automatic rendering across contexts, icon-only, title and icon, and title-only, and learn how to extend label style via the label style parameter.

Use labels in list to achieve consistent alignment and improve visual appearance, replacing nested h stack layouts with a label that combines image and text.

Learn how VStack acts as a vertical container for child views, using trailing closures and simple capsules with colors, padding, and nesting to exceed ten static elements.

Learn how VStack sizes its content by taking only as much space as needed, and how frame, border, and padding modifiers affect layout and visibility of capsules.

Master the VStack alignment parameter and horizontal alignment in SwiftUI. Bind alignment to a state property, experiment with leading, center, and trailing, and animate alignment changes.

Learn to set VStack spacing by binding a state variable in a 10 to 50 range and animate with spring motion using damping and clamping fractions between views.

Build a complete SwiftUI screen using a VStack, image from assets, text sections, and a get started with premium button, with responsive layout, padding, spacers, and dark mode support.

Use HStack to lay out child views in a horizontal row from leading to trailing. Add two text views to show side-by-side alignment with large title and a title3 font.

This lecture demonstrates HStack static views, showing they occupy only the space they need, outlined with a red border, and reveals a ten-view limit resolved by grouping or nesting.

Modify hstack spacing with the spacing parameter to create even gaps between child views. Animate spacing changes with a state variable using a spring or ease in/out timing.

Learn to align views in stacks with vertical alignment options like top, center, bottom, first text baseline, last text baseline using an alignment property and a control group of buttons.

Learn how layout priority governs space allocation in stacks and all container views, using the layoutPriority modifier to prioritize capsules or text and adapt on resize.

Learn how ZStack in SwiftUI layers views along the z-axis to create visually rich, stacked cards; build with rounded rectangles, colors, frames, shadows, and offsets, plus alignment options.

Explore zstack alignment by using the alignment parameter to position child views with leading, trailing, top, bottom, or center, beyond the default center, and apply it with backgrounds.

create a custom pop up view using swiftui's zstack, controlled by a state variable, with an animated overlay, close button, and a rounded rectangle style for safety apps.

Design a reusable pop up view and integrate a fast action button (Fab) in a SwiftUI list using a navigation stack and a bottom trailing ZStack alignment.

Build an animated floating action button (fab) in SwiftUI using a ZStack and state to toggle open, rotate the main button, and reveal staggered subbuttons.

Explore lazy vstack versus vstack, showing how lazy vstack renders only visible items as the user scrolls, caches views, and unloads off-screen ones to reduce memory pressure.

Compare the spacing behavior of VStack and LazyVStack by building two cards, using frame and max width modifiers to show how VStack expands while LazyVStack sizes to content.

Learn how horizontal alignment works in SwiftUI's VStack and LazyVStack, compare their behavior, and use frames and animations to control leading, center, and trailing alignment.

Pin section headers and footers in a lazy vstack within a scroll view to organize courses by category and display category names and course counts in SwiftUI.

Design and render a pie chart in SwiftUI using Canvas, building a pie model, computing slices from data, and animate with rotation, scale, and a legend that toggles on tap.

Explore SwiftUI charts using the charts framework to build bar and line charts with declarative views, weekdays, workout minutes, annotations, and color by day, marks like bar, line, and point.

Learn to implement an expandable bottom sheet in SwiftUI with large and medium heights, fraction-based sizing, and presets like 25%, 50%, and 75%, plus static heights 200, 400, 600.

Use the multi date picker in SwiftUI to select multiple dates, storing them in a state variable as a set of date components under travel date.

Master navigation in SwiftUI 4 by replacing navigation view with navigation stack and navigation split view, enabling programmatic navigation, dynamic destinations, and deep linking through navigation path and destinations.

Build a multi-column navigation with SwiftUI's navigation split view, creating a data structure, state selection, and two- to three-column layouts for iPad and Mac Catalyst.

Master the SwiftUI native ShareLink to present a share sheet from a URL without UIKit, and customize it with a trailing closure for title and image.

Explore rendering tables in iPadOS with SwiftUI, using table columns and a hash table data model. Note a header display bug on iPad Pro and cross-device differences awaiting future update.

Explore building an expandable text field in a feedback form using iOS 16's access parameter to grow vertically, with line limits and scroll behavior as you type.

Explore the SwiftUI 4 gauge view to report progress with a value, label, and percent formatting. Learn to customize ranges, min/max indicators, and styles like circular and linear gauges.

Learn how view that fits, a container view introduced in iOS 16, selects the best child view from a defined order based on available space.

Explore how to apply linear gradients to system colors, create gradient backgrounds with rounded rectangles, and control drop shadows using foreground style, including x and y offsets.

Learn grid-based layouts in SwiftUI 4 by building a grid cell view with system images, gradient backgrounds, and inner shadows, then compose two- and three-column grids.

Explore how any layout switches between HStack and VStack using a type-erased layout. Use state toggles, on tap gestures, and size class changes to animate dynamic layout transitions.

Mastering SwiftUI 4: Tap location in TapGesture explains how on tap gestures expose tap coordinates, showing local vs global coordinate spaces and how to access location data directly in SwiftUI.

Explore a new SwiftUI modifier that controls how the software keyboard dismisses within a scroll view, with options for automatic, interactive, and immediate dismissal.