swiftiphoneios11uiblureffectuib

Blur UiImageView at top and bottom of the frame

Reference Image

I am having an image at my view controller, while on top of the image view I am having some label but due to label text visibility I need to blur the top and bottom of the UIImageView ignorer to show the text clearly.

I have attached the screenshot for my design ignorer to get a clear cut idea.

Please referent the image for the right output.

Solution

  • Add this code to your UIImageView.

    let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: self.imgView.frame.size.width, height: self.imgView.frame.size.height*0.3))
gradientLayer.colors = [UIColor.black.withAlphaComponent(0.7).cgColor, UIColor.clear.cgColor]
self.imgView.layer.addSublayer(gradientLayer)

let gradientLayer2 = CAGradientLayer()
gradientLayer2.frame = CGRect(origin: CGPoint(x: 0, y: (self.imgView.frame.size.height-self.imgView.frame.size.height*0.3)), size: CGSize(width: self.imgView.frame.size.width, height: self.imgView.frame.size.height*0.3))
gradientLayer2.colors = [UIColor.clear.cgColor, UIColor.black.withAlphaComponent(0.7).cgColor]
self.imgView.layer.addSublayer(gradientLayer2)