How to: Create a bank-level security blur screen with SwiftUI | by MING | Level Up Coding

How to: Create a bank-level security blur screen with SwiftUI

Quickly implement with a few lines of code and scenePhase

Published in

Level Up Coding

2 min read

Sep 6, 2022

N owadays, e-banking apps are increasingly popular and have become frequently used daily. You may see the above blur screen when switching to another app or before force kills the apps. Today, we’ll quickly learn how to write this view with SwiftUI and native scenePhase API.

Environment

  • Xcode 14 beta 6 (at least 13)
  • iOS 15 or above
  • Tested on iPhone and iPad

Steps

  1. Add @Environment(\.scenePhase) var scenePhase before var body
  2. Make a blur cover view (Sample below: inactive View)
  3. Use ZStack to cover original content with inactive View
  4. Add if scenePhase == .inactive then show inactive View
  5. That’s all 🎉

Leave a Reply

Your email address will not be published. Required fields are marked *