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

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 09. SFSymbols Next episode: 11. Put it All Together
Transcript: 10. Challenge: Fill & Stroke Shapes

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"))
)