50 in 50: Day 16

This SwiftUI template can be downloaded and opened in DetailsPro on iPhone, iPad, and Mac.
Open in DetailsPro

Today’s design is the FaceTime interface on iOS 14! This design is great example of how you can build layers on top of layers in SwiftUI to make a beautiful interface.

Things to watch out for in this one:

• The entire design is built on top of a single black Rectangle element placed first, with overlay modifiers added for every element on top.

• Notice that the Selfie view is in the corner using Overlay’s alignment option. (In DetailsPro, tap on Overlay in the modifiers list to see this option)

• The bottom tray is also placed using Overlay’s alignment option, here it is set to .bottom.

• DetailsPro doesn’t have support for Shape borders yet, this is coming soon, so the shutter button was done with clever, although not great, use of an SF Symbols mask.

Enjoy another addition to our Stock iOS collection!