Jak korzystać z UIVisualEffectView do rozmycia obrazu?

208

Czy ktoś mógłby podać mały przykład zastosowania rozmycia na obrazie? Od jakiegoś czasu próbowałem wymyślić kod :( wciąż nowy w obj c!

UIVisualEffectViewZapewnia prosty abstrakcji nad złożonych efektów wizualnych. W zależności od pożądanego efektu wyniki mogą wpływać na treść ułożoną warstwą za widokiem lub zawartość dodaną do contentView widoku.

Zastosuj a UIVisualEffectViewdo istniejącego widoku, aby zastosować efekt rozmycia lub jaskrawości do wychodzącego widoku. Po dodaniu UIVisualEffectView do hierarchii widoków dodaj wszystkie widoki podrzędne do contentView widoku UIVisualEffectView. Nie dodawaj widoków podrzędnych bezpośrednio do UIVisualEffectViewsiebie.

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

c Nie
źródło
1
Należy uważać, aby dodać poglądy UIVisualEffectView„s contentView github.com/onmyway133/blog/issues/124
onmyway133
Również jeśli dodajesz go do widoku podrzędnego i ustawiasz jego ramkę, nie zapomnij zaktualizować ramki w viewDidLayoutSubviews, aby upewnić się, że obrót działa.
Steve Moser

Odpowiedzi:

415

Wystarczy umieścić ten widok rozmycia na imageView. Oto przykład w Celu C:

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

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

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

i Szybki:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)
BS
źródło
3
Dziękuję bardzo! Zapomniałem o ustawianiu ramki :( W Google nie ma jeszcze nic wizualnego, więc powinien to być pierwszy wyszukiwany termin :)
cNoob
1
Lepiej mieć nadzieję, że interfejs API się nie zmieni! To jeden z powodów, dla których dyskutowanie jeszcze nie wydanych interfejsów API Apple może być trudne. Na przykład niektóre interfejsy API UIKit Dynamics zmieniają się nieznacznie między wersją beta a wydaniem. Nic poważnego, ale złamałyby każdy przykładowy kod napisany w stosunku do oryginalnych interfejsów API.
Zev Eisenberg,
5
Czy jest jakiś sposób na animację wejścia / wyjścia rozmycia?
Ruben Martinez Jr.
3
@BS Można animować alfa widoku efektu wizualnego. Bum.
Maciej Trybiło
2
UIBlurEffect jest niesamowity, ale pamiętaj, że nie działa na starszych urządzeniach, takich jak iPad2 - spędziłem godziny próbując dowiedzieć się, dlaczego tylko nakładał półprzezroczystą warstwę na mój ekran i nie rozmywał się - to wszystko dlatego, że testowałem na starszym urządzeniu
Keith
135

Oto jak używać UIVibrancyEffect i UIBlurEffect z UIVisualEffectView

Cel 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)
Matt Rundle
źródło
1
Obejście działa nawet bez podklasy, wystarczy zdefiniowaćextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo
1
Wygląda na to, że Apple naprawił błąd. Obejście podklasy / rozszerzenia nie jest już konieczne w iOS 8 beta 2
Benjamin Mayo
2
Dzięki. Przetestowałem i potwierdziłem poprawkę błędu i zredagowałem odpowiedź.
Matt Rundle,
1
Próbuję dodać to do mojego widoku, ale za każdym razem, gdy prezentuję widok, jest rozmyty w kółko, dopóki nie uzyskam białego tła ... Usuwam widok za pomocą removeFromSuperView po jego odrzuceniu, ale otrzymuję ten sam wynik .. .. jakieś pomysły?
George Asda,
@GeorgeAsda, a może zamiast dzwonić removeFromSuperView, robisz [self.visualEffectView setHidden:NO];? Przydzielanie i dodawanie do widoku jest kosztowną operacją niż tworzenie ukrywania lub wyświetlania.
Yoon Lee,
46

Możesz także użyć konstruktora interfejsów, aby łatwo tworzyć te efekty w prostych sytuacjach. Ponieważ wartości Z widoków będą zależeć od kolejności, w jakiej są wymienione w UIVisualEffectViewkonspekcie dokumentu , możesz przeciągnąć na kontur dokumentu przed widokiem, który chcesz rozmazać. To automatycznie tworzy zagnieżdżenie UIView, które jest contentViewwłaściwością danego UIVisualEffectView. W tym widoku zagnieżdżaj rzeczy, które mają się pojawiać na szczycie rozmycia.

XCode6 beta5

Możesz także z łatwością skorzystać z żywotności UIVisualEffect, która automatycznie utworzy kolejną zagnieżdżoną UIVisualEffectVieww konspekcie dokumentu z domyślnie włączoną jaskrawością. Następnie możesz dodać widok zagnieżdżonej etykiety lub tekstu UIView(ponownie contentViewwłaściwość UIVisualEffectView), aby uzyskać taki sam efekt, jak element interfejsu użytkownika „> przesuń, aby odblokować”.

wprowadź opis zdjęcia tutaj

och
źródło
Czy możesz potwierdzić, że to, co pokazuje, jest faktycznie rozmyte? Mój obraz (tak zwany „PhotoPhoto” w swojej hierarchii) jest przyciemniony w półprzezroczystym widoku Styl rozmycia: Ciemny. (
Wydaj
Co masz na myśli mówiąc „właśnie przyciemniono”? Nie sądzisz, że to jest rozmyte?
ohhh
Dobra, zajrzę za kilka godzin.
ohhh
Dzięki! Na tle BackgroundPhoto masz hierarchię widoków, która jest zwinięta na zrzutach ekranu ... Właśnie użyłem UIImageView i przypisałem mu zdjęcie (jasny pies na zielonym tle - wyraźna definicja między białymi nogami i zieloną trawą to tak samo ostry, gdy jest objęty widokiem efektu wizualnego, jak gdy nie).
tobinjim
1
Widziałem, że zmieniając rodzaj rozmycia na Ciemny, etykieta zyskuje biały kolor ...
Daniel
8

Wolę tworzyć efekty wizualne za pomocą Storyboard - bez kodu używanego do tworzenia lub zarządzania elementami interfejsu użytkownika. Daje mi również pełne wsparcie krajobrazowe. Zrobiłem małą demonstrację użycia UIVisualEffects z Blur, a także Vibrancy.

Demo na Github

Patrik Vaberer
źródło
8

Jeśli ktoś chciałby uzyskać odpowiedź w 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!

Aktualizacja :

Na razie jest dostępny pod IB, więc nie musisz nic kodować :)

Amit Kalra
źródło
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];
}
Ananthu R. Krishnan
źródło
Dodaj tekst z odpowiedzią na pytanie, w jaki sposób twoja odpowiedź pomaga OP w naprawieniu opublikowanego problemu
ρяσсρєя K
0

Służy do rozmywania tła, zarówno jasnego, jak i ciemnego, dzięki czemu tekst można łatwiej nakładać. Możesz opcjonalnie włączyć jaskrawość, która powoduje, że tekst jest renderowany w jasnym, kontrastowym kolorze obok rozmycia.

Xab Ion
źródło