Hinzufügen eines Unschärfeeffekts zum Hintergrund in Kürze


117

Ich stelle ein Hintergrundbild ein, um den Controller anzuzeigen. Aber ich möchte diesem Hintergrund auch einen Unschärfeeffekt hinzufügen. Wie kann ich das machen?

Ich setze Hintergrund mit folgendem Code:

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

Ich habe im Internet für unscharfe Bildansicht gefunden, wie ich dies in meinem Hintergrund implementieren kann.

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

Bitte sehen Sie hier für benutzerdefinierte Unschärfeskala stackoverflow.com/a/51406290/7576100
Jack

Antworten:


331

Ich habe diesen Code getestet und er funktioniert einwandfrei:

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

Für 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)

Für 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)

Hier sehen Sie das Ergebnis:

verschwommene Sicht

Oder Sie können diese Bibliothek dafür verwenden:

https://github.com/FlexMonkey/Blurable


5
Gibt es eine Möglichkeit, die Unschärfeskala zu ändern? Es ist zu verschwommen.
Tolgay Toklar

2
einfach ändernUIBlurEffectStyle.Light
Dharmesh Kheni

11
Oder Sie können das Alpha in UIVisualEffectView auf weniger als 1,0 einstellen. Versuchen Sie 0,8 oder 0,7.
Duncan C

31
Apple empfiehlt nicht, das Alpha von visualEffectVİew
Tolgay Toklar am

4
Alle Steuerelemente sind unter dieser Unschärfe verborgen. Stattdessen addSubview - benutze self.view.insertSubview (blurEffectView, at: 0)
Leonif

45

Sie können eine Erweiterung von UIImageView erstellen.

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)
    }
}

Verwendung:

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)
}

Swift 3-Erweiterung

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)
    }
}

Verwendung:

yourImageView.addBlurEffect()

Nachtrag:

extension UIView {

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

7
Gute Idee! Könnte es nicht einfach makeBlurImage () sein und dann self anstelle von targetImageView verwenden?
Emanuele Fumagalli

1
Ich bin nicht sicher, aber dieser Code kann abstürzen, wenn kein Argument übergeben wird, oder? Dies sollte eine "if let tmpTargetImageView = targetImageView {}"
-Anweisung haben

@RomOne Sie würden einfach einen Kompilierungsfehler / einen fehlgeschlagenen Build erhalten, wenn Sie kein Argument angeben. Es würde auch ohne ein Bild funktionieren, so dass Sie das nicht auspacken müssen. und Tests würden Ihnen zeigen, ob Sie vergessen haben, ein Bild hinzuzufügen oder nicht.
Josh

Der Punkt ist, dass es abstürzen würde, wenn keine ImageView übergeben wird. Das Ideal ist @EmanueleFumagallis Idee, self anstelle von targetImageView zu verwenden, aber es ist auch möglich, eine guard-Anweisung zu verwenden und im Falle eines Null-Arguments zurückzukehren.
Uzaak

Es ist besser, Bilder auch mit unscharfen Bildern zu beschreiben. Gut, danke.
MRizwan33

13

@AlvinGeorge sollte nur verwenden:

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)
    }
}

Verwendung :

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

11

Für Swift 3 (iOS 10.0 und 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

Sie können CoreImage auch verwenden, um unscharfe Bilder mit dunklem Effekt zu erstellen

  1. Machen Sie einen Schnappschuss für das Bild

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
    
  2. Wenden Sie CoreImage-Filter wie gewünscht an

    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

Das hat bei Swift 5 bei mir funktioniert

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

1
Hallo @Marta, wissen Sie, wie Sie die Kapazität der verschwommenen Ansicht reduzieren können?
Sky

5

Dieser behält immer den richtigen Rahmen:

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

Sie sollten immer .dark für den Stil verwenden und den folgenden Code hinzufügen, damit er cool aussieht

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

Dieser Code funktioniert gut für mich! Es ist für 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

Einen anderen Weg gefunden. Ich verwende UIImage + ImageEffects von Apple.

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

0

In einer UIView-Erweiterung:

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)
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.