Mock an App icon with the .squircle() View Modifier
A convenience view modifier that allows us to mimic the iOS App icon shape, the squircle, in SwiftUI.
View Modifier declaration:
squircle.swift
extension View {
/// Makes the view an Squircle to mimic iOS App icon shape
/// - Parameter width: The width of the view (height will be equal to it)
public func squircle(width: CGFloat) -> some View {
modifier(Squircle(width: width))
}
}
squircle.swift
struct Squircle: ViewModifier {
let width: CGFloat // = height
func body(content: Content) -> some View {
content
.frame(width: width, height: width)
// App Squircle corner radius estimation
.clipShape(RoundedRectangle(cornerRadius: width * (2 / 9), style: .continuous))
}
}
Usage Example
From the SignInHeroSection
of the AuthKit's
SignInView()
:
SignInView.swift
// ... other imports
import SharedKit
import SwiftUI
struct SignInHeroSection: View {
var body: some View {
VStack {
Image("AppIcon-Preview")
.resizable()
.squircle(width: 150)
.padding(.bottom, 10)
Text(Constants.AppData.appName)
.font(.largeTitle)
.bold()
Text(Constants.AppData.appDescription)
.font(.callout)
.multilineTextAlignment(.center)
.foregroundStyle(.secondary)
}
}
}
public struct SignInView: View {
// ...
var body: some View {
// ... other code
VStack {
SignInHeroSection()
// ...
EmailInputFields()
// ...
SignUpButtons()
}
// ... other code
}
}