Here is how to apply UIVisualEffectView & UIBlurEffect to UITableView, UITableViewCell, UICollectionView, UICollectionViewCell, UIView / View in your Apple iOS / iPadOS or macOS Catalyst App.

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 blur effect and fake superimpose on your UIView rather 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 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 paste following code in 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 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 paste following code in 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

Leave a Reply

Your email address will not be published.