UIVisualEffectView明显添加到UICollectionViewCell

Question

I have UICollectionView with a lot of cells. The cells have images on them that need to be blurred. That's why I am adding UIVisualEffectView with blur effect to the image views . The cells are like pages - every cell takes up the whole screen.

The problem is with the second cell. When it appears the blurred view is added visibly and it's ugly. The rest of the cells have the blurred view already when they become visible on the screen and are okay. This is the code I am using to add the blur view :

class ImageCell: UICollectionViewCell {

    @IBOutlet weak var mainImageView: UIImageView!
    @IBOutlet weak var backgroundImageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()

        let regularBlur = UIBlurEffect(style: .regular)
        let blurView = UIVisualEffectView(effect: regularBlur)
        blurView.frame = backgroundImageView.bounds
        blurView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        backgroundImageView.addSubview(blurView)

    }
}

Answer 1

Modifying your code:

class ImageCell: UICollectionViewCell {

    @IBOutlet weak var mainImageView: UIImageView!
    @IBOutlet weak var backgroundImageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()

        backgroundImageView.isHidden = true
        let regularBlur = UIBlurEffect(style: .regular)
        let blurView = UIVisualEffectView(effect: regularBlur)
        blurView.frame = backgroundImageView.bounds
        blurView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        backgroundImageView.addSubview(blurView)
        backgroundImageView.isHidden = false
    }
}

Answer 2

You can code like this:

class ImageCell: UICollectionViewCell {

@IBOutlet weak var mainImageView: UIImageView!
@IBOutlet weak var backgroundImageView: UIImageView!

let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))


override func awakeFromNib() {
    super.awakeFromNib()

    blurView.frame = backgroundImageView.bounds
    blurView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
    backgroundImageView.addSubview(blurView)
}

override func prepareForReuse() {
        blurView.isHidden = true
    }
}