UIVisualEffectView를 사용하여 이미지를 흐리게 만드는 방법은 무엇입니까?


208

누군가 이미지에 흐림 효과를 적용하는 간단한 예를 들어 줄 수 있습니까? 나는 잠시 동안 코드를 알아 내려고 노력했다 :( obj c에서 여전히 새로운!

UIVisualEffectView복잡한 시각 효과를 통해 간단한 추상화를 제공한다. 원하는 효과에 따라 결과는보기 뒤에 계층화 된 컨텐츠 또는보기의 contentView에 추가 된 컨텐츠에 영향을 줄 수 있습니다.

적용 UIVisualEffectView유출되는보기에 흐림 또는 활기 효과를 적용하기 위해 기존의 볼 수 있습니다. UIVisualEffectView를 뷰 계층 구조에 추가 한 후 하위 뷰를의 contentView에 추가하십시오 UIVisualEffectView. 하위 뷰를 직접 UIVisualEffectView자체에 추가하지 마십시오 .

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView


1
UIVisualEffectViewcontentView github.com/onmyway133/blog/issues/124
onmyway133

또한 하위 뷰에 추가하고 프레임을 설정하는 경우 viewDidLayoutSubviews에서 프레임을 업데이트하여 회전이 작동하는지 잊지 마십시오.
Steve Moser

답변:


415

이 흐림보기를 imageView에 넣으십시오. Objective-C의 예는 다음과 같습니다.

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

그리고 스위프트 :

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
정말 고맙습니다! 이 첫 번째 검색어 :이어야한다, 그래서 나는, 시각적 아직 프레임 :( 구글에 거기에 아무것도 설정에 대한 잊었다
cNoob

1
API가 변경되지 않기를 바랍니다. 아직 출시되지 않은 Apple API를 논의하는 것이 까다로운 이유 중 하나입니다. 예를 들어 일부 UIKit Dynamics API는 베타와 릴리스간에 약간 변경됩니다. 중요한 것은 없지만 원래 API로 작성된 샘플 코드를 손상 시켰을 것입니다.
Zev Eisenberg 2016

5
어쨌든 블러 인 / 애니메이션을 애니메이션 할 수 있습니까?
Ruben Martinez Jr.

3
@BS 시각 효과보기의 알파에 애니메이션을 적용 할 수 있습니다. 팔.
Maciej Trybiło

2
UIBlurEffect는 훌륭하지만 iPad2와 같은 구형 장치에서는 작동하지 않습니다. 화면에 반투명 레이어를 배치하고 흐려지지 않는 이유를 알아 내려고 몇 시간을 보냈습니다-구형 장치에서 테스트했기 때문에 모든 것이 었습니다
Keith

135

UIVisualEffectView에 UIVibrancyEffect 및 UIBlurEffect를 사용하는 방법은 다음과 같습니다.

목표 -C :

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

스위프트 4 :

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

1
해결 방법은 서브 클래 싱 없이도 작동합니다.extension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
애플은 버그를 수정 한 것으로 보인다. 서브 클래스 / 확장 해결 방법은 더 이상 필요 아이폰 OS에서 8 베타 2 없습니다
벤자민 메이요

2
감사. 버그 수정을 테스트하고 확인했으며 답변을 편집했습니다.
매트 런들

1
나는 이것을 내보기에 추가하려고하지만보기를 제시 할 때마다 흰색 배경이 나타날 때까지 반복해서 흐려진다. .. 어떤 아이디어?
George Asda

@GeorgeAsda는 방법에 대한 호출하는 대신 removeFromSuperView, 당신은을 [self.visualEffectView setHidden:NO];? 뷰를 할당하고 뷰에 추가하는 것은 숨기거나 표시하는 것보다 비용이 많이 드는 작업입니다.
Yoon Lee

46

간단한 상황에서 인터페이스 빌더를 사용하여 이러한 효과를 쉽게 만들 수도 있습니다. 보기의 z- 값은 문서 개요에 나열된 순서에 따라 달라 지므로 UIVisualEffectView흐리게 표시하기 전에 문서 개요로 a 를 드래그 할 수 있습니다 . 이것은 자동으로 중첩 생성 UIView인, contentView주어진의 속성을 UIVisualEffectView. 이 뷰 내에서 흐림 위에 표시하려는 것을 중첩시킵니다.

XCode6 베타 5

vibrancy를 쉽게 활용할 수도 있습니다. 그러면 vibrancy가 기본적으로 활성화되어 문서 개요에 UIVisualEffect중첩 된 또 다른 중첩이 자동으로 만들어 UIVisualEffectView집니다. 그런 다음 레이블 또는 텍스트보기를 중첩 UIView(다시 말해의 contentView속성 UIVisualEffectView)에 추가하여 "> 슬라이드 잠금 해제"UI 요소와 동일한 효과를 얻을 수 있습니다.

여기에 이미지 설명을 입력하십시오


실제로 표시되는 내용이 실제로 흐릿함을 확인할 수 있습니까? 내 이미지 (계층 구조에서 "BackgroundPhoto"라고 함)는 흐림 스타일 : 어두운 반투명보기에서 흐리게 표시됩니다. (Xcode 6.01 릴리스 및 iOS 시뮬레이터 사용)
tobinjim

'흐리게 희미하다'는 것은 무엇을 의미합니까? 그때가 흐릿하다고 생각하지 않습니까?
ohhh

좋아요, 몇 시간 후에 살펴 보겠습니다.
ohhh

감사! BackgroundPhoto에 스크린 샷에서 축소 된 뷰 계층 구조가 있습니다. 방금 UIImageView를 사용하여 사진을 할당했습니다 (녹색 배경에 밝은 색의 개-흰색 다리와 녹색 잔디 사이의 선명한 정의는 시각 효과보기로 가리지 않을 때처럼 날카 로워집니다.
tobinjim

1
블러 유형을 어둡게 변경하면 레이블이 흰색으로 변하는 것을 보았습니다 ...
Daniel

8

UI 요소를 만들거나 유지 관리하는 데 코드가없는 스토리 보드를 통해 시각 효과를 만드는 것이 좋습니다. 그것은 나에게 완전한 조경 지원을 제공합니다. UIVisualEffects를 Blur 및 Vibrancy와 함께 사용하는 데모를 만들었습니다.

Github 데모


8

누군가 Swift의 답변을 원한다면 :

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

업데이트 :

현재로서는 IB에서 사용할 수 있으므로 아무것도 코딩 할 필요가 없습니다. :)


2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

답변이 게시 된 문제를 수정하는 데 도움이되는 방법에 대한 답변이 포함 된 텍스트를 추가하십시오
ρяσѕρєя K

0

텍스트를보다 쉽게 ​​오버레이 할 수 있도록 배경을 밝거나 어둡게 흐리게하는 데 사용됩니다. 선택적으로 생동감을 활성화하여 텍스트가 흐림과 함께 밝고 대조적 인 색상으로 렌더링되도록 할 수 있습니다.

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