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.
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
Take a look at the wireframes for the app and find an element that is reused throughout. Identify consistent styling elements and customization points.
Build a custom, styled SwiftUI button based on our list of consistent vs. customized design elements. Take a look at your work with Previews.
Add colors to the project based on design specifications and define style options for the button with an enum.
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
Build a basic view to establish the states and size of the download status view. Set up previews to track your work.
Build up views that don't change for three states of download status. Use images and SFSymbols in SwiftUI.
Try out a few new view modifiers to create a custom circular progress view that varies based on current download progress.
Try out animation in SwiftUI! Layer three animations together to create a complex, animating version of the progress view.
Take a look at how and where the views you built are used in the raywenderlich.com app, and explore a few more views.