Thêm hiệu ứng làm mờ cho nền trong swift


117

Tôi đang thiết lập một hình ảnh nền để xem bộ điều khiển. Nhưng tôi cũng muốn thêm hiệu ứng làm mờ cho nền này. Tôi có thể làm cái này như thế nào?

Tôi đang thiết lập nền với mã sau đây:

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

Tôi tìm thấy trên internet cho hình ảnh mờ làm thế nào tôi có thể thực hiện điều này vào nền của tôi?

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

Vui lòng xem tại đây để biết quy mô mờ stackoverflow.com/a/51406290/7576100
Jack

Câu trả lời:


331

Tôi đã kiểm tra mã này và nó hoạt động tốt:

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

Đối với 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)

Dành cho 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)

Tại đây bạn có thể thấy kết quả:

nhìn mờ

Hoặc bạn có thể sử dụng lib này cho điều đó:

https://github.com/FlexMonkey/Blurable


5
Có cách nào để thay đổi quy mô mờ? Nó quá mờ.
Tokgay Toklar

2
chỉ cần thay đổiUIBlurEffectStyle.Light
Dharmesh Kheni

11
Hoặc bạn có thể đặt alpha trên UIVisualEffectView thành nhỏ hơn 1.0. Hãy thử 0,8 hoặc 0,7.
Duncan C

31
Apple không khuyến nghị thay đổi alpha của visualEffectVtubew
Tolgay Toklar

4
tất cả các điều khiển được ẩn dưới mờ này. Thay vào đó addSubview - sử dụng self.view.insertSubview (BlurEffectView, tại: 0)
Leonif

45

Bạn có thể tạo một phần mở rộng của 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)
    }
}

Sử dụng:

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

Tiện ích mở rộng 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)
    }
}

Sử dụng:

yourImageView.addBlurEffect()

Phụ lục:

extension UIView {

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

7
Ý kiến ​​hay! Không thể chỉ là makeBlurImage () và sau đó sử dụng self thay vì targetImageView?
Emanuele Fumagalli

1
Tôi không chắc nhưng mã này có thể bị sập nếu không có đối số nào được thông qua phải không? Điều này sẽ có câu lệnh "if let tmpTargetImageView = targetImageView {}"
RomOne

@RomOne Đơn giản là bạn sẽ gặp lỗi biên dịch / bản dựng không thành công nếu bạn không cung cấp đối số. Ngoài ra, nó sẽ hoạt động mà không có hình ảnh nên không cần phải mở khóa đó; và kiểm tra sẽ cho bạn thấy nếu bạn quên thêm hình ảnh hay không.
Josh

Điểm là nó sẽ sụp đổ nếu một ImageView không được thông qua. Lý tưởng là ý tưởng của @EmanueleFumagalli về việc sử dụng bản thân thay vì targetImageView, nhưng cũng có thể sử dụng câu lệnh bảo vệ và trả về trong trường hợp không có đối số.
Uzaak

tốt hơn là đưa ra mô tả hình ảnh quá mờ. cũng cảm ơn
MRizwan33

13

@AlvinGeorge chỉ nên sử dụng:

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

cách sử dụng :

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

11

Dành cho Swift 3 (iOS 10.0 và 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

Bạn cũng có thể sử dụng CoreImage để tạo hình ảnh mờ với hiệu ứng tối

  1. Chụp ảnh nhanh

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
  2. Áp dụng Bộ lọc CoreImage như bạn muốn với

    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

Điều này làm việc cho tôi trên Swift 5

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

1
Xin chào @Marta, Bạn có biết cách giảm dung lượng của bladedView không?
Bầu trời

5

Cái này luôn giữ đúng khung:

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

Bạn nên luôn luôn sử dụng .dark cho kiểu và thêm đoạn mã sau để làm cho nó trông thật tuyệt

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

Mã này đang hoạt động tốt cho tôi! dành cho 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

Tìm thấy một cách khác .. Tôi sử dụng UIImage + ImageEffects của apple.

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

0

Trong tiện ích mở rộng 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)
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.