Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 Swift 5.5, iOS 15, Xcode 13

Part 1: SwiftUI Views & View Modifiers

10. Challenge: Fill & Stroke Shapes

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 9. SFSymbols Next episode: 11. Put it All Together

This video was last updated on Mar 1 2022

Now that you have the basics of the rounded views set up, it’s time to wrap them up by applying some shapes!

For the RoundedImageViewStroked, you want to apply an overlay to the Image. The overlay should be a circle with a stroke.

For the RoundedImageViewFilled, you want to apply a background to the image. The background should be a circle that’s filled.

To do this, you need to set up 3 colors in your asset catalogue. You’ll need:

  1. One for the stroke color for RoundedImageViewStroked.
  2. One for the background color for RoundedImageView Filled. This is black in light mode, and white in dark mode, which may be counter-intuitive.
  3. And fnially, one for the foreground color for RoundedImageView. This is basically the opposite color of the background color.

This sounds like a lot, but it’s only a few lines of code. Give it your best shot, and check back here for the solution if you get stuck!

Create color ButtonStrokeColor. Light #D0E3F9, Dark plain white.

Add to RoundedImageViewStroked:

.overlay(
  Circle()
    .strokeBorder(Color("ButtonStrokeColor"), lineWidth: 2.0)
)

Create color ButtonFilledTextColor. Light plain white, Dark #181818.

Create color ButtonFilledBackgroundColor. Light $181818, Dark plain white.

Add to RoundedImageViewFilled:

.foregroundColor(Color("ButtonFilledTextColor"))
.background(
  Circle()
    .fill(Color("ButtonFilledBackgroundColor"))
)