Reusable SwiftUI Views in the raywenderlich.com App

Build two of the custom SwiftUI views used throughout the raywenderlich.com app. Get a glimpse into how we used SFSymbols, managed colors, and made the most of live previews. By Catie Catterwaul.

Leave a rating/review
Save for later
Comments
Share

Who is this for?

Intermediate to Advanced iOS developers with some experience using SwiftUI, or anyone interested in learning about the development of the raywenderlich.com app!

Covered concepts

  • SwiftUI
  • Color Management
  • SFSymbols
  • Geometry Reader
  • View Preferences
  • Live Previews
  • SwiftUI Animation
  • raywenderlich.com App

Part 1: Enum-Driven Button Styling

01
Toggle description

Take a look at the wireframes for the app and find an element that is reused throughout. Identify consistent styling elements and customization points.

Toggle description

Build a custom, styled SwiftUI button based on our list of consistent vs. customized design elements. Take a look at your work with Previews.

Toggle description

Add colors to the project based on design specifications and define style options for the button with an enum.

Toggle description

Learn how to add and style SFSymbols in the project, and try out using geometry readers and view preferences.

Part 2: Build a Multi-State Download Icon View

Toggle description

Build a basic view to establish the states and size of the download status view. Set up previews to track your work.

Toggle description

Build up views that don't change for three states of download status. Use images and SFSymbols in SwiftUI.

Toggle description

Try out a few new view modifiers to create a custom circular progress view that varies based on current download progress.

Toggle description

Try out animation in SwiftUI! Layer three animations together to create a complex, animating version of the progress view.

Toggle description

Take a look at how and where the views you built are used in the raywenderlich.com app, and explore a few more views.