Uplift iOS Interview
"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.
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)
}
}
Rev Up Your iOS Skills: Take a Dynamic Learning Journey
iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks
Get Ready to Shine: Mastering the iOS Interview
- Uplift iOS Interview - A Comprehensive Guide to iOS Interview
- Xcode Cheat Sheet for Swift
- Xcode Cheat Sheet for SwiftUI
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. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.
Connect with me on
Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.