Your First iOS & SwiftUI App: Polishing the App

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