Ajout d'un effet de flou à l'arrière-plan en Swift


119

Je configure une image d'arrière-plan pour afficher le contrôleur. Mais aussi je veux ajouter un effet de flou à cet arrière-plan. Comment puis-je faire ceci?

Je mets l'arrière-plan avec le code suivant:

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "testBg")!)

J'ai trouvé sur Internet pour une image floue comment puis-je implémenter cela dans mon arrière-plan?

var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
// 2
var blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = imageView.bounds
// 3
imageView.addSubview(blurView)

Veuillez voir ici l'échelle de flou personnalisée stackoverflow.com/a/51406290/7576100
Jack

Réponses:


337

J'ai testé ce code et il fonctionne bien:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

Pour Swift 3.0:

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

Pour Swift 4.0:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

Ici vous pouvez voir le résultat:

vue floue

Ou vous pouvez utiliser cette bibliothèque pour cela:

https://github.com/FlexMonkey/Blurable


5
Existe-t-il un moyen de modifier l'échelle de flou? C'est trop flou.
Tolgay Toklar

2
juste changerUIBlurEffectStyle.Light
Dharmesh Kheni

11
Ou vous pouvez définir l'alpha sur UIVisualEffectView à moins de 1,0. Essayez 0.8 ou 0.7.
Duncan C

31
Apple ne recommande pas de changer l'alpha de visualEffectVİew
Tolgay Toklar

4
tous les contrôles sont cachés sous ce flou. Au lieu de cela, ajoutezSubview - utilisez self.view.insertSubview (blurEffectView, à: 0)
Leonif

45

Vous pouvez créer une extension de UIImageView.

Swift 2.0

import Foundation
import UIKit

extension UIImageView
{
    func makeBlurImage(targetImageView:UIImageView?)
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = targetImageView!.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        targetImageView?.addSubview(blurEffectView)
    }
}

Usage:

override func viewDidLoad()
{
    super.viewDidLoad()

    let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325))
    let sampleImage:UIImage = UIImage(named: "ic_120x120")!
    sampleImageView.image =  sampleImage

    //Convert To Blur Image Here
    sampleImageView.makeBlurImage(sampleImageView)

    self.view.addSubview(sampleImageView)
}

Extension Swift 3

import Foundation
import UIKit

extension UIImageView
{
    func addBlurEffect()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

Usage:

yourImageView.addBlurEffect()

Addenda:

extension UIView {

  /// Remove UIBlurEffect from UIView
  func removeBlurEffect() {
    let blurredEffectViews = self.subviews.filter{$0 is UIVisualEffectView}
    blurredEffectViews.forEach{ blurView in
      blurView.removeFromSuperview()
    }
  }

7
Bonne idée! Cela ne pourrait-il pas être juste makeBlurImage () puis utiliser self au lieu de targetImageView?
Emanuele Fumagalli

1
Je ne suis pas sûr mais ce code peut planter si aucun argument n'est passé, non? Cela devrait avoir une instruction "if let tmpTargetImageView = targetImageView {}"
RomOne

@RomOne Vous obtiendrez simplement une erreur de compilation / un échec de construction si vous ne fournissez pas d'argument. De plus, cela fonctionnerait sans image, donc pas besoin de la déballer; et les tests vous montreraient si vous avez oublié d'ajouter une image ou non.
Josh

Le fait est que cela planterait si un ImageView nul est passé. L'idéal est l'idée de @EmanueleFumagalli d'utiliser self au lieu de targetImageView, mais il est également possible d'utiliser une instruction de garde et de retourner en cas d'argument nul.
Uzaak

il vaut mieux donner une description des images aussi avec flou. bien merci.
MRizwan33

13

@AlvinGeorge devrait simplement utiliser:

extension UIImageView{        
    func blurImage()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

utilisation :

 blurredBackground.frame = self.view.bounds
 blurredBackground.blurImage()
 self.view.addSubview(self.blurredBackground)

11

Pour Swift 3 (iOS 10.0 et 8.0)

var darkBlur:UIBlurEffect = UIBlurEffect()

if #available(iOS 10.0, *) { //iOS 10.0 and above
    darkBlur = UIBlurEffect(style: UIBlurEffectStyle.prominent)//prominent,regular,extraLight, light, dark
} else { //iOS 8.0 and above
  darkBlur = UIBlurEffect(style: UIBlurEffectStyle.dark) //extraLight, light, dark
}
let blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = self.view.frame //your view that have any objects
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurView)

10

Vous pouvez également utiliser CoreImage pour créer une image floue avec un effet sombre

  1. Créer un instantané pour l'image

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
  2. Appliquez les filtres CoreImage comme vous le souhaitez avec

    private func bluredImage(view:UIView, radius:CGFloat = 1) -> UIImage {
    let image = view.snapShotImage()
    
    if let source = image.CGImage {
        let context = CIContext(options: nil)
        let inputImage = CIImage(CGImage: source)
    
        let clampFilter = CIFilter(name: "CIAffineClamp")
        clampFilter?.setDefaults()
        clampFilter?.setValue(inputImage, forKey: kCIInputImageKey)
    
        if let clampedImage = clampFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
            let explosureFilter = CIFilter(name: "CIExposureAdjust")
            explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey)
            explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey)
    
            if let explosureImage = explosureFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
                let filter = CIFilter(name: "CIGaussianBlur")
                filter?.setValue(explosureImage, forKey: kCIInputImageKey)
                filter?.setValue("\(radius)", forKey:kCIInputRadiusKey)
    
                if let result = filter?.valueForKey(kCIOutputImageKey) as? CIImage {
                    let bounds = UIScreen.mainScreen().bounds
                    let cgImage = context.createCGImage(result, fromRect: bounds)
                    let returnImage = UIImage(CGImage: cgImage)
                    return returnImage
                }
            }
        }
    }
    return UIImage()
    }

8

Cela a fonctionné pour moi sur Swift 5

let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurredView.frame = self.view.bounds
backgroundimage.addSubview(blurredView)

1
Salut @Marta, Savez-vous comment réduire la capacité du blurredView?
Sky

5

Celui-ci garde toujours le bon cadre:

public extension UIView {

    @discardableResult
    public func addBlur(style: UIBlurEffect.Style = .extraLight) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: style)
        let blurBackground = UIVisualEffectView(effect: blurEffect)
        addSubview(blurBackground)
        blurBackground.translatesAutoresizingMaskIntoConstraints = false
        blurBackground.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        blurBackground.topAnchor.constraint(equalTo: topAnchor).isActive = true
        blurBackground.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        blurBackground.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        return blurBackground
    }
}

3

Vous devez toujours utiliser .dark pour le style et ajouter le code suivant pour le rendre cool

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

Ce code fonctionne très bien pour moi! c'est pour Swift 4.x

let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.frame
self.view.insertSubview(blurEffectView, atIndex: 0)

0

Trouvé une autre façon .. J'utilise UIImage + ImageEffects d'Apple.

 UIImage *effectImage = [image applyExtraLightEffect];                        
 self.imageView.image = effectImage;

0

Dans une extension UIView:

func addBlurredBackground(style: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: style)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.frame = self.frame
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.addSubview(blurView)
    self.sendSubviewToBack(blurView)
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.