배경에 신속하게 흐림 효과 추가
배경 이미지를 컨트롤러 표시로 설정하고 있습니다.하지만 이 배경에는 블러 효과를 더하고 싶습니다.이거 어떻게 해?
다음 코드로 배경을 설정합니다.
self.view.backgroundColor = UIColor(patternImage: UIImage(named: "testBg")!)
인터넷에서 blur imageview를 찾았는데 어떻게 하면 제 배경에 구현할 수 있을까요?
var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
// 2
var blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = imageView.bounds
// 3
imageView.addSubview(blurView)
이 코드를 테스트해 본 결과 정상적으로 동작하고 있습니다.
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
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)
}
}
사용방법:
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()
}
}
Swift 5.0:
import UIKit
extension UIImageView {
func applyBlurEffect() {
let blurEffect = UIBlurEffect(style: .light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
addSubview(blurEffectView)
}
}
@Alvin George는 다음과 같이 말한다.
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)
또한 Core Image를 사용하여 어두운 효과로 흐릿한 이미지를 만들 수도 있습니다.
이미지 스냅숏 작성
func snapShotImage() -> UIImage { UIGraphicsBeginImageContext(self.frame.size) if let context = UIGraphicsGetCurrentContext() { self.layer.renderInContext(context) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } return UIImage() }원하는 대로 Core Image 필터 적용
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() }
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)
Swift 5에서 작동했습니다.
let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurredView.frame = self.view.bounds
backgroundimage.addSubview(blurredView)
이것은 항상 올바른 프레임을 유지합니다.
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
}
}
스타일에는 항상 .dark를 사용하고, 멋있게 보이려면 다음 코드를 추가해야 합니다.
blurEffectView.backgroundColor = .black
blurEffectView.alpha = 0.4
이 코드는 정상적으로 동작하고 있습니다.Swift 4.x용입니다.
let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.frame
self.view.insertSubview(blurEffectView, atIndex: 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)
}
다른 방법을 찾았어요..저는 애플의 UIImage+ImageEffects를 사용하고 있습니다.
UIImage *effectImage = [image applyExtraLightEffect];
self.imageView.image = effectImage;
let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.backgroundColor = .black
blurEffectView.alpha = 0.5
blurEffectView.frame = topView.bounds
if !self.presenting {
blurEffectView.frame.origin.x = 0
} else {
blurEffectView.frame.origin.x = -topView.frame.width
}
blurEffectView.frame.origin.x = -topView.frame.width
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
UIView.animate(withDuration: 0.2, delay: 0.0, options: [.curveEaseIn]) {
if !self.presenting {
blurEffectView.frame.origin.x = -topView.frame.width
} else {
blurEffectView.frame.origin.x = 0
}
view.addSubview(blurEffectView)
} completion: { (status) in
}
@Maruta https://stackoverflow.com/a/56334283/16457129 님의 답변에 감사드립니다.다른 사람이 물어보면 뷰의 배경색으로 흐릿한 효과를 줄일 수 있습니다.
func drawBackgroundBlur() {
backgroundView.layer.cornerRadius = 27
// Here, you can increase the alpha value to increase the blur effect
backgroundView.backgroundColor = UIColor.white.withAlphaComponent(0.05)
let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurredView.frame = backgroundRewardsView.bounds
blurredView.layer.cornerRadius = 27
backgroundView.addSubview(blurredView)
}
Swift 5.7 - 커스텀 반지름으로 흐릿함
사용 예:
let view = UIImageView(image: bluredImage(view: superview!, radius: 1.5))
내선번호:
extension UIView {
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?.value(forKey: kCIOutputImageKey) as? CIImage {
let explosureFilter = CIFilter(name: "CIExposureAdjust")
explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey)
explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey)
if let explosureImage = explosureFilter?.value(forKey: kCIOutputImageKey) as? CIImage {
let filter = CIFilter(name: "CIGaussianBlur")
filter?.setValue(explosureImage, forKey: kCIInputImageKey)
filter?.setValue("\(radius)", forKey:kCIInputRadiusKey)
if let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
let bounds = UIScreen.main.bounds
let cgImage = context.createCGImage(result, from: bounds)
let returnImage = UIImage(cgImage: cgImage!)
return returnImage
}
}
}
}
return UIImage()
}
private func snapShotImage() -> UIImage {
UIGraphicsBeginImageContext(self.frame.size)
if let context = UIGraphicsGetCurrentContext() {
self.layer.render(in: context)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
return UIImage()
}
}
언급URL : https://stackoverflow.com/questions/30953201/adding-blur-effect-to-background-in-swift
'programing' 카테고리의 다른 글
| WPF 창을 올바르게 폐기하는 방법은 무엇입니까? (0) | 2023.04.24 |
|---|---|
| UICollection View의 셀 간격 (0) | 2023.04.24 |
| AngularJS에서 키 누르기 이벤트를 사용하는 방법 (0) | 2023.04.24 |
| 일반 목록 - 목록 내 항목 이동 (0) | 2023.04.24 |
| Oracle에서 고유한 행 수를 계산하는 방법 (0) | 2023.04.24 |