
As Apple describes UIVisualEffectView & UIBlurView in its support document as follows:
Depending on the desired effect, the effect may affect content layered behind the view or content added to the visual effect view’s contentView. Apply a visual effect view to an existing view and then apply a UIBlurEffect or UIVibrancyEffect object to apply a blur or vibrancy effect to the existing view. After you add the visual effect view to the view hierarchy, add any subviews to the contentView property of the visual effect view. Do not add subviews directly to the visual effect view itself.
So in simple words, you don’t have to use Adobe Photoshop to get a blur effect and fake superimpose on your UIView instead, you can get the same effect programmatically for every situation without any hassle.
Note: If you are using UIVisualEffectsView in your app I would strongly suggest you use a system setting called ‘Reduced Transparency’ to condition code it. If the user doesn’t want transparency or Blur or Vibrancy effect for all of the apps in his iPhone or iPad or Mac he can just do it with a single switch in the settings app. Another note view that you are applying effect should preferably be the Popover View Controller. Another thing is to remember to replace the below blue color with the UIColor of your choice with alpha channel transparency.
For UITableView and UITableViewCell, use the following code in your UITableViewController’s viewWillAppear function:
if UIAccessibility.isReduceTransparencyEnabled == true { tableView.backgroundColor = .blue.withAlphaComponent(0.6) tableView.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) tableView.separatorColor = .blue.withAlphaComponent(0.9) tableView.separatorEffect = UIVibrancyEffect(blurEffect: UIBlurEffect(style: .light)) } else { tableView.backgroundColor = .blue.withAlphaComponent(0.6) tableView.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) tableView.separatorColor = .blue.withAlphaComponent(0.9) tableView.separatorEffect = UIVibrancyEffect(blurEffect: UIBlurEffect(style: .light)) }
Now for UITableViewCell, copy and paste the following code into your UITableViewController’s ‘cellForRowAt indexPath’ function:
if UIAccessibility.isReduceTransparencyEnabled == true { cell.backgroundColor = .blue.withAlphaComponent(0.4) cell.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) } else { cell.backgroundColor = .blue.withAlphaComponent(0.4) cell.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) }
For UICollectionView & UICollectionViewCell, use the following code in your UICollectionViewController’s viewWillAppear function:
if UIAccessibility.isReduceTransparencyEnabled == true { self.collectionView?.backgroundColor = .blue.withAlphaComponent(0.6) self.collectionView?.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) } else { self.collectionView?.backgroundColor = .blue.withAlphaComponent(0.6) self.collectionView?.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) }
Now for UICollectionViewCell, copy and paste the following code into your UICollectionViewController’s ‘cellForItemAt indexPath’ function:
if UIAccessibility.isReduceTransparencyEnabled == true { cell.backgroundColor = .blue.withAlphaComponent(0.4) cell.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) } else { cell.backgroundColor = .blue.withAlphaComponent(0.4) cell.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) }
For UIView / View
if UIAccessibility.isReduceTransparencyEnabled == true { self.view.backgroundColor = .blue.withAlphaComponent(0.3) let blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) blurEffectView.frame = self.view.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.view.insertSubview(blurEffectView, at: 0) } else { self.view.backgroundColor = .blue.withAlphaComponent(0.3) let blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) blurEffectView.frame = self.view.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.view.insertSubview(blurEffectView, at: 0) }
I hope this helps you get the desired effect in your Apple iOS / iPadOS or macOS Catalyst App.
Thanks & Regards
Mandar Apte