Hızlı bir şekilde arka plana bulanıklık efekti ekleme


119

Denetleyiciyi görüntülemek için bir arka plan görüntüsü ayarlıyorum. Ama aynı zamanda bu arka plana bulanıklık efekti eklemek istiyorum. Bunu nasıl yapabilirim?

Aşağıdaki kodla arka planı ayarlıyorum:

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

Bulanık görüntü için internette buldum bunu arka planıma nasıl uygulayabilirim?

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

Özel bulanıklık ölçeği stackoverflow.com/a/51406290/7576100
Jack

Yanıtlar:


336

Bu kodu test ettim ve iyi çalışıyor:

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

Swift 3.0 için:

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

Swift 4.0 için:

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

Burada sonucu görebilirsiniz:

bulanık görünüm

Veya bunun için bu kitaplığı kullanabilirsiniz:

https://github.com/FlexMonkey/Blurable


5
Bulanıklık ölçeğini değiştirmenin bir yolu var mı? Çok bulanık.
Tolgay Toklar

2
sadece değiştirUIBlurEffectStyle.Light
Dharmesh Kheni

11
Veya UIVisualEffectView üzerindeki alfa değerini 1.0'dan daha düşük bir değere ayarlayabilirsiniz. 0.8 veya 0.7'yi deneyin.
Duncan C

31
Apple, visualEffectVİew'in alfa değiştirilmesini önermiyor
Tolgay Toklar

4
tüm kontroller bu bulanıklığın altında gizlidir. Bunun yerine addSubview - self.view.insertSubview kullanın (blurEffectView, saat: 0)
Leonif

45

UIImageView için bir uzantı oluşturabilirsiniz.

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

Kullanımı:

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 Uzantısı

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

Kullanımı:

yourImageView.addBlurEffect()

Zeyilname:

extension UIView {

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

7
İyi fikir! Sadece makeBlurImage () olabilir ve sonra targetImageView yerine self'i kullanamaz mıydı?
Emanuele Fumagalli

1
Emin değilim ama hiçbir argüman iletilmezse bu kod çökebilir değil mi? Bu bir "if let tmpTargetImageView = targetImageView {}" ifadesine sahip olmalıdır
RomOne,

@RomOne Eğer bir argüman sağlamazsanız, derleme hatası / başarısız derleme alırsınız. Ayrıca, bir görüntü olmadan da çalışır, bu yüzden onu açmaya gerek yoktur; ve test, bir resim eklemeyi unutup unutmadığınızı gösterir.
Josh

Asıl nokta, bir nil ImageView geçirilirse çökecek olmasıdır. İdeal olan @EmanueleFumagalli'nin targetImageView yerine self'i kullanma fikridir, ancak bir koruma ifadesi kullanmak ve bir sıfır argümanı olması durumunda geri dönmek de mümkündür.
Uzaak

Görüntülere bulanık bir açıklama vermek daha iyidir. çok teşekkürler.
MRizwan33

13

@AlvinGeorge şunu kullanmalı:

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

kullanım :

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

11

Swift 3 için (iOS 10.0 ve 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

Karanlık efektli bulanık görüntü oluşturmak için CoreImage'ı da kullanabilirsiniz

  1. Görüntü için anlık görüntü oluştur

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
  2. CoreImage Filtrelerini istediğiniz gibi uygulayın

    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

Bu benim için Swift 5'te çalıştı

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

1
Merhaba @Marta, blurView'in kapasitesini nasıl azaltacağınızı biliyor musunuz?
Sky

5

Bu her zaman doğru çerçeveyi korur:

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

Stil için her zaman .dark kullanmalı ve havalı görünmesi için aşağıdaki kodu eklemelisiniz

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

Bu Kod Benim İçin İyi Çalışıyor! Swift 4.x için

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

0

Başka bir yol buldum .. Apple'ın UIImage + ImageEffects kullanıyorum.

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

0

Bir UIView uzantısında:

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)
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.