Uplift iOS Interview
The Guide is for YOU if
- You are preparing for an iOS interview and want to improve your skills and knowledge and looking to level up your interview game and land your dream job.
- You want to gain confidence and ease during iOS interviews by learning expert tips and curated strategies.
- You want access to a comprehensive list of iOS interview QA to practice and prepare.
Glassmorphism is a very trending UI design paradigm nowadays. We can use the semi-transparent blurry background to give more focus on the foreground content. SwiftUI provides .blur()
modifier to create the background blur but it has very limited functionality compared to UIVisualEffectView
.
struct ContentView: View { var body: some View { ZStack { Image("background") .resizable() .scaledToFill() .edgesIgnoringSafeArea(.all) .blur(radius: 5) Text("Welcome to München") .font(.title) .padding(30.0) .background(Color.orange) .opacity(0.8) .cornerRadius(20) } } }
Get ahead of the competition and ace your next iOS interview with expert-curated resources. Check out the collection of SwiftUI and Swift interview questions and answers, behavioral interview tips, and the popular custom layout contents. Plus, go through the new section for Engineering Manager to help you excel in your career!
Join my free Newsletter 🚀
SwiftUI does not provide any built-in visual effects view or something related to background blur. But we can use UIKit in SwiftUI using UIViewRepresentable
. To implement a background blur effect in SwiftUI, I am using the Apple-provided VisualEffectBlur.swift
file(Fruta) in the article. UIVisualEffectView
can support multiple styles from ultra-thin to thick.
.systemUltraThinMaterial
.systemThinMaterial
.systemMaterial
.systemThickMaterial
.systemChromeMaterial
You can simply pass the style using VisualEffectBlur(blurStyle: .systemThinMaterial)
. The default blur style is .systemMaterial
.
struct ContentView: View { var body: some View { ZStack { Image("background") .resizable() .scaledToFill() .edgesIgnoringSafeArea(.all) VisualEffectBlur(blurStyle: .systemThinMaterialDark) .ignoresSafeArea() Text("Welcome to München") .font(.title) .padding(30.0) .background(Color.orange) .opacity(0.8) .cornerRadius(20) } } }
VisualEffectBlur.swift
/* The iOS implementation of a UIVisualEffectView's blur and vibrancy. */ import SwiftUI // MARK: - VisualEffectBlur struct VisualEffectBlur<Content: View>: View { var blurStyle: UIBlurEffect.Style var vibrancyStyle: UIVibrancyEffectStyle? var content: Content init(blurStyle: UIBlurEffect.Style = .systemMaterial, vibrancyStyle: UIVibrancyEffectStyle? = nil, @ViewBuilder content: () -> Content) { self.blurStyle = blurStyle self.vibrancyStyle = vibrancyStyle self.content = content() } var body: some View { Representable(blurStyle: blurStyle, vibrancyStyle: vibrancyStyle, content: ZStack { content }) .accessibility(hidden: Content.self == EmptyView.self) } } // MARK: - Representable extension VisualEffectBlur { struct Representable<Content: View>: UIViewRepresentable { var blurStyle: UIBlurEffect.Style var vibrancyStyle: UIVibrancyEffectStyle? var content: Content func makeUIView(context: Context) -> UIVisualEffectView { context.coordinator.blurView } func updateUIView(_ view: UIVisualEffectView, context: Context) { context.coordinator.update(content: content, blurStyle: blurStyle, vibrancyStyle: vibrancyStyle) } func makeCoordinator() -> Coordinator { Coordinator(content: content) } } } // MARK: - Coordinator extension VisualEffectBlur.Representable { class Coordinator { let blurView = UIVisualEffectView() let vibrancyView = UIVisualEffectView() let hostingController: UIHostingController<Content> init(content: Content) { hostingController = UIHostingController(rootView: content) hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight] hostingController.view.backgroundColor = nil blurView.contentView.addSubview(vibrancyView) blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] vibrancyView.contentView.addSubview(hostingController.view) vibrancyView.autoresizingMask = [.flexibleWidth, .flexibleHeight] } func update(content: Content, blurStyle: UIBlurEffect.Style, vibrancyStyle: UIVibrancyEffectStyle?) { hostingController.rootView = content let blurEffect = UIBlurEffect(style: blurStyle) blurView.effect = blurEffect if let vibrancyStyle = vibrancyStyle { vibrancyView.effect = UIVibrancyEffect(blurEffect: blurEffect, style: vibrancyStyle) } else { vibrancyView.effect = nil } hostingController.view.setNeedsDisplay() } } } // MARK: - Content-less Initializer extension VisualEffectBlur where Content == EmptyView { init(blurStyle: UIBlurEffect.Style = .systemMaterial) { self.init( blurStyle: blurStyle, vibrancyStyle: nil) { EmptyView() } } } // MARK: - Previews struct VisualEffectBlur_Previews: PreviewProvider { static var previews: some View { ZStack { LinearGradient( gradient: Gradient(colors: [.red, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing ) VisualEffectBlur(blurStyle: .systemUltraThinMaterial, vibrancyStyle: .fill) { Text("Hello World!") .frame(width: 200, height: 100) } } .previewLayout(.sizeThatFits) } }
✍️ Written by Ishtiak Ahmed
👉 Follow me on X ● LinkedIn
Get Ready to Shine: Mastering the iOS Interview
Enjoying the articles? Get the inside scoop by subscribing to my newsletter.
Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.