Como usar o UIVisualEffectView para desfocar a imagem?


208

Alguém poderia dar um pequeno exemplo de aplicação do desfoque a uma imagem? Eu tenho tentado descobrir o código por um tempo agora :( ainda novo no obj c!

O UIVisualEffectViewfornece uma abstração simples sobre efeitos visuais complexos. Dependendo do efeito desejado, os resultados podem afetar o conteúdo em camadas atrás da visualização ou o conteúdo adicionado ao contentView da visualização.

Aplique a UIVisualEffectViewem uma vista existente para aplicar um efeito de desfoque ou vibração à vista existente. Depois de adicionar o UIVisualEffectView à hierarquia de visualizações, adicione quaisquer subvisões ao contentView do UIVisualEffectView. Não adicione subvisões diretamente a UIVisualEffectViewele mesmo.

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


1
Tenha cuidado para adicionar vistas para UIVisualEffectView's contentView github.com/onmyway133/blog/issues/124
— onmyway133

Além disso, se você o estiver adicionando a uma subvisão e definindo seu quadro, não se esqueça de atualizar o quadro em viewDidLayoutSubviews para garantir que a rotação funcione.
— Steve Moser

Respostas:


415

Basta colocar essa visualização de desfoque no imageView. Aqui está um exemplo em Objective-C:

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

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

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

e Swift:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
muito obrigado! Esqueci-me sobre a definição do quadro :( Não há nada no google ainda para visual, de modo que este deve ser o primeiro termo de busca :)
— cNoob

1
Espero que a API não mude! Essa é uma das razões pelas quais as APIs da Apple ainda não lançadas podem ser complicadas. Por exemplo, algumas das APIs do UIKit Dynamics mudam ligeiramente entre a versão beta e a versão. Nada importante, mas eles teriam quebrado qualquer código de exemplo gravado nas APIs originais.
— Zev Eisenberg

5
Existe alguma maneira de animar / desfocar o desfoque?
— Ruben Martinez Jr.

3
@BS Você pode animar o alfa da visualização do efeito visual. Estrondo.
— Maciej Trybiło

2
O UIBlurEffect é incrível, mas observe que ele não funciona em dispositivos mais antigos, como o iPad2 - passei horas tentando descobrir por que ele estava apenas colocando uma camada translúcida na tela e não desfocando - tudo porque estava testando em um dispositivo mais antigo
— Keith

135

Aqui está como usar UIVibrancyEffect e UIBlurEffect com UIVisualEffectView

Objetivo-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];

Swift 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
A solução funciona mesmo sem subclassificação, apenas definirextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
— Palimondo

1
A Apple parece ter corrigido o erro. A solução subclasse / extensão não é mais necessário no iOS 8 beta 2.
— Benjamin Mayo

2
Obrigado. Testei e confirmei a correção de bug e editei a resposta.
— Matt Rundle

1
Estou tentando adicionar isso à minha visualização, mas toda vez que a apresento, ela fica borrada repetidamente até obter um fundo branco ... Estou removendo a visualização com removeFromSuperView depois de a dispensar, mas obtive o mesmo resultado .. .. alguma ideia?
— George Asda

@GeorgeAsda que tal em vez de ligar removeFromSuperView, você faz o [self.visualEffectView setHidden:NO];? Alocar e adicionar à visualização é uma operação cara do que ocultar ou exibir.
— Yoon Lee

46

Você também pode usar o construtor de interface para criar esses efeitos facilmente para situações simples. Como os valores z das vistas dependem da ordem em que estão listados no Esboço do documento, você pode arrastar um UIVisualEffectViewpara o contorno do documento antes da vista que deseja desfocar. Isso cria automaticamente um aninhado UIView, que é a contentViewpropriedade do dado UIVisualEffectView. Aninhe as coisas dentro dessa exibição que você deseja que apareçam sobre o desfoque.

XCode6 beta5

Você também pode aproveitar facilmente a vibração UIVisualEffect, que criará automaticamente outro aninhado UIVisualEffectViewno esboço do documento com a vibração ativada por padrão. Você pode adicionar um rótulo ou exibição de texto ao aninhado UIView(novamente, a contentViewpropriedade do UIVisualEffectView), para obter o mesmo efeito que o elemento da interface do usuário "> deslize para desbloquear".

insira a descrição da imagem aqui


Você pode confirmar que o que mostra é realmente desfocado? Minha imagem (o que você chamou de "BackgroundPhoto" em sua hierarquia) fica esmaecida sob a exibição translúcida Blur Style: Dark. (Versão de lançamento do Xcode 6.01 e usando o iOS Simulator)
— tobinjim

O que você quer dizer com 'está esmaecido'? Você não acha que está borrado então?
— ohhh

Ok, vou dar uma olhada em algumas horas.
— ohhh

Obrigado! Você tem uma hierarquia de visão em seu BackgroundPhoto que é recolhida nas capturas de tela ... Acabei de usar um UIImageView e atribuí uma foto a ele (um cachorro de cor clara contra fundo verde - a definição nítida entre as pernas brancas e a grama verde é tão nítido quando coberto pela visualização do efeito visual quanto quando não estiver).
— precisa saber é o seguinte

1
Eu vi que a mudança do tipo de borrão de escuro, a etiqueta fica cor branca ...
— Daniel

8

Prefiro criar efeitos visuais via Storyboard - nenhum código usado para criar ou manter elementos da interface do usuário. Também me dá suporte total à paisagem. Fiz uma pequena demonstração do uso de UIVisualEffects com Blur e também Vibrancy.

Demo no Github


8

Se alguém quiser a resposta no 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!

Atualização:

A partir de agora, ele está disponível no IB para que você não precise codificar nada :)


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];
}

Adicione um texto com a resposta para saber como a sua resposta ajuda o OP a corrigir o problema postado
— resposta

0

Isso é usado para desfocar fundos, claros ou escuros, para que o texto possa ser sobreposto mais facilmente. Opcionalmente, você pode ativar a vibração, que faz com que o texto seja renderizado em uma cor brilhante e contrastante ao lado do desfoque.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.