신속하게 배경에 흐림 효과 추가


118

컨트롤러를 볼 배경 이미지를 설정하고 있습니다. 하지만이 배경에 블러 효과를 추가하고 싶습니다. 어떻게 할 수 있습니까?

다음 코드로 배경을 설정하고 있습니다.

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

인터넷에서 흐림 imageview를 찾았습니다.이를 내 배경에 어떻게 구현할 수 있습니까?

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

사용자 정의 블러 스케일은 여기를 참조하십시오. stackoverflow.com/a/51406290/7576100
Jack

답변:


334

이 코드를 테스트했으며 정상적으로 작동합니다.

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의 경우 :

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의 경우 :

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

여기에서 결과를 볼 수 있습니다.

흐릿한보기

또는이 lib를 사용할 수 있습니다.

https://github.com/FlexMonkey/Blurable


5
블러 스케일을 변경하는 방법이 있습니까? 너무 흐릿합니다.
Tolgay Toklar

2
단지 변화UIBlurEffectStyle.Light
다르 메쉬 Kheni

11
또는 UIVisualEffectView의 알파를 1.0 미만으로 설정할 수 있습니다. 0.8 또는 0.7을 시도하십시오.
Duncan C

31
애플은 visualEffectVİew의 변화 알파 권장하지 않습니다
Tolgay Toklar

4
모든 컨트롤은이 블러 아래에 숨겨져 있습니다. 대신 addSubview-self.view.insertSubview (blurEffectView, at : 0) 사용
Leonif

45

UIImageView를 확장 할 수 있습니다.

스위프트 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)
    }
}

용법:

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 확장

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

용법:

yourImageView.addBlurEffect()

추가:

extension UIView {

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

7
좋은 생각! 그것은 단지 makeBlurImage ()이고 targetImageView 대신 self를 사용할 수 없습니까?
Emanuele Fumagalli

1
확실하지 않지만 인수가 제대로 전달되지 않으면이 코드가 충돌 할 수 있습니까? 이것은 "할 경우 tmpTargetImageView = targetImageView {}"문이 있어야
RomOne

@RomOne 인수를 제공하지 않으면 컴파일 오류 / 실패한 빌드가 표시됩니다. 또한 이미지 없이도 작동하므로 래핑을 풀 필요가 없습니다. 테스트를 통해 이미지 추가를 잊었는지 여부를 확인할 수 있습니다.
Josh

요점은 nil ImageView가 전달되면 충돌합니다. 이상은 @EmanueleFumagalli의 targetImageView 대신 self를 사용하는 아이디어이지만 가드 문을 사용하고 nil 인수의 경우 반환하는 것도 가능합니다.
Uzaak

흐릿하게 이미지 설명을 제공하는 것이 좋습니다. 감사합니다.
MRizwan33

13

@AlvinGeorge 는 다음을 사용해야합니다.

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

사용법 :

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

11

Swift 3 (iOS 10.0 및 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

U는 CoreImage를 사용하여 어두운 효과로 흐린 이미지를 만들 수도 있습니다.

  1. 이미지 용 스냅 샷 만들기

    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 필터 적용

    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

이것은 Swift 5 에서 나를 위해 일했습니다.

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

1
안녕하세요 @Marta, BluredView의 용량을 줄이는 방법을 알고 있습니까?
Sky

5

이것은 항상 올바른 프레임을 유지합니다.

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

스타일에 항상 .dark를 사용하고 멋지게 보이도록 다음 코드를 추가해야합니다.

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

이 코드는 저에게 잘 작동합니다! 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

다른 방법을 찾았습니다. 저는 사과의 UIImage + ImageEffects를 사용합니다.

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

0

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)
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.