Apply UIVisualEffectView & UIBlurEffect to any Views in iOS / iPadOS or macOS app.

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.

In other words, you don’t have to use Adobe Photoshop to get a blur effect and fake superimpose it on your UIView. Instead, you can programmatically get the same effect for every situation without 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, Blur, or Vibrancy effect for all of the apps on his iPhone, iPad, or Mac, he can 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 to remember is to replace the blue color below 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

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Leave a comment

Leave a Reply