W aplikacji Muzyka nowego iOS widzimy okładkę albumu za widokiem, który ją rozmywa.
Jak można osiągnąć coś takiego? Przeczytałem dokumentację, ale nic tam nie znalazłem.
ios
objective-c
graphics
filtering
core-image
kondratyevdev
źródło
źródło
Odpowiedzi:
Możesz użyć,
UIVisualEffectView
aby osiągnąć ten efekt. Jest to natywny interfejs API, który został precyzyjnie dostrojony pod kątem wydajności i żywotności baterii, a ponadto jest łatwy do wdrożenia.Szybki:
Cel C:
Jeśli prezentujesz ten kontroler widoku modalnie, aby rozmyć zawartą pod nim zawartość, musisz ustawić modalny styl prezentacji na Over Current Context i ustawić kolor tła, aby wyczyścić, aby upewnić się, że bazowy kontroler widoku pozostanie widoczny, gdy zostanie on zaprezentowany na wierzchu.
źródło
insertSubView:belowSubView:
komentarza w tym kodzie użyłem następującego ustawienia, aby ustawić rozmycie jako tło widoku:view.insertSubview(blurEffectView, atIndex: 0)
UIAccessibilityIsReduceTransparencyEnabled()
.Obraz podstawowy
Ponieważ ten obraz na zrzucie ekranu jest statyczny, możesz użyć go
CIGaussianBlur
z Core Image (wymaga iOS 6). Oto przykład: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mPamiętaj, że jest to wolniejsze niż inne opcje na tej stronie.
Rozmycie stosu (pudełko + gaussa)
Accelerate Framework
W sesji „Implementing Engaging UI na iOS” z WWDC 2013 Apple wyjaśnia, jak utworzyć rozmyte tło (o 14:30) i wspomina o metodzie
applyLightEffect
zaimplementowanej w przykładowym kodzie przy użyciu Accelerate.framework.GPUImage używa shaderów OpenGL do tworzenia dynamicznych rozmyt. Ma kilka rodzajów rozmycia: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Istnieje nawet GPUImageiOSBlurFilter, który „powinien w pełni powielać efekt rozmycia zapewniany przez panel sterowania iOS 7” ( tweet , artykuł ). Artykuł jest szczegółowy i zawiera wiele informacji.
Od indieambitions.com: Wykonaj rozmycie za pomocą vImage . Algorytm jest także używany w iOS-RealTimeBlur .
Od Nick Lockwood: https://github.com/nicklockwood/FXBlurView Przykład pokazuje rozmycie w widoku przewijania. Rozmywa się z dispatch_async, a następnie synchronizuje, aby wywoływać aktualizacje z UITrackingRunLoopMode, dzięki czemu rozmycie nie jest opóźnione, gdy UIKit nadaje większy priorytet przewijaniu UIScrollView. Wyjaśnia to książka Nicka iOS Core Animation , która jest świetna.
iOS-blur To zabiera warstwę rozmycia paska narzędzi UIToolbar i umieszcza go w innym miejscu. Apple odrzuci Twoją aplikację, jeśli użyjesz tej metody. Zobacz https://github.com/mochidev/MDBlurView/issues/4
Z blogu Evadne: LiveFrost: Szybki, synchroniczny konwertowanie migawek UIView . Świetny kod i świetna lektura. Kilka pomysłów z tego postu:
Inne rzeczy
Andy Matuschak powiedział na Twitterze: „Wiesz, w wielu miejscach, w których wygląda na to, że robimy to w czasie rzeczywistym, jest statyczny dzięki sprytnym sztuczkom”.
Na stronie doubleencore.com mówią: „stwierdziliśmy, że promień rozmycia 10 punktów plus wzrost nasycenia o 10 punktów najlepiej naśladuje efekt rozmycia w iOS 7 w większości przypadków”.
Rzut oka na prywatne nagłówki SBFProceduralWallpaperView firmy Apple .
Wreszcie, nie jest to prawdziwe rozmycie, ale pamiętaj, że możesz ustawić rasterizationScale, aby uzyskać obraz w pikselach: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/
źródło
UIImage
przeciwnym razie będzie wyglądał zbyt duży na urządzeniu Retina ...Postanowiłem opublikować pisemną wersję Objective-C z zaakceptowanej odpowiedzi, aby podać więcej opcji w tym pytaniu.
Ograniczenia można usunąć, jeśli chcesz zwiększyć, jeśli obsługujesz tylko tryb pionowy lub po prostu dodam flagę do tej funkcji, aby ich użyć, czy nie.
źródło
Nie sądzę, że wolno mi opublikować kod, ale powyższy post wspominający o przykładowym kodzie WWDC jest poprawny. Oto link: https://developer.apple.com/downloads/index.action?name=WWDC%202013
Plik, którego szukasz, jest kategorią w UIImage, a metodą jest applyLightEffect.
Jak zauważyłem powyżej w komentarzu, Apple Blur ma nasycenie i inne rzeczy dzieją się poza rozmyciem. Proste rozmycie nie zadziała ... jeśli chcesz naśladować ich styl.
źródło
Myślę, że najłatwiejszym rozwiązaniem jest zastąpienie paska narzędzi UIToolbar, który rozmywa wszystko za nim w systemie iOS 7. Jest dość podstępny, ale jego wdrożenie jest bardzo proste i szybkie!
Możesz to zrobić z dowolnym widokiem, po prostu uczyń go podklasą
UIToolbar
zamiastUIView
. Można nawet zrobić zUIViewController
„sview
nieruchomości, na przykład ...1) utwórz nową klasę, która jest „podklasą”
UIViewController
i zaznacz pole „Z XIB dla interfejsu użytkownika”.2) Wybierz Widok i przejdź do inspektora tożsamości w prawym panelu (alt-Command-3). Zmień „Klasa” na
UIToolbar
. Teraz przejdź do inspektora atrybutów (alt-Command-4) i zmień kolor „Tła” na „Wyczyść kolor”.3) Dodaj widok podrzędny do widoku głównego i podłącz go do IBOutleta w interfejsie. Nazywają go
backgroundColorView
. Będzie to wyglądać mniej więcej tak, jako prywatna kategoria w.m
pliku implementacji ( ).4) Przejdź do implementacji kontrolera widoku (
.m
pliku ) i zmień-viewDidLoad
metodę, aby wyglądać następująco:Daje to ciemnoszary widok, który rozmywa wszystko za nim. Żadnego śmiesznego biznesu, żadnego powolnego zamazania obrazu rdzenia, używając wszystkiego, co masz na wyciągnięcie ręki, dostarczonego przez OS / SDK.
Możesz dodać widok tego kontrolera widoku do innego widoku w następujący sposób:
Daj mi znać, jeśli coś będzie niejasne, chętnie pomogę!
Edytować
Pasek narzędzi UIToolbar został zmieniony w wersji 7.0.3, aby dać możliwie niepożądany efekt przy użyciu kolorowego rozmycia.
Kiedyś mogliśmy ustawić kolor za pomocą
barTintColor
, ale jeśli robiłeś to wcześniej, musisz ustawić składnik alfa na mniej niż 1. W przeciwnym razie pasek narzędzi UITool będzie całkowicie nieprzezroczysty - bez rozmycia.Można to osiągnąć w następujący sposób: (mając na uwadze
self
podklasęUIToolbar
)To nada rozmytemu widokowi niebieskawy odcień.
źródło
self.backgroundColorView.opaque = NO;
self.backgroundColorView.alpha = 0.5;
self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
ale tło nie jest rozmyte, po prostu daj ładny efekt. i tak dziękuję!Oto szybka implementacja w Swift przy użyciu CIGaussianBlur:
źródło
Niestandardowa skala rozmycia
Możesz spróbować
UIVisualEffectView
z ustawieniem niestandardowym jako -Wyjście: - dla
blurEffect.setValue(1...
&blurEffect.setValue(2..
źródło
(NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()
Naprawdę doceniłbym pomoc!Oto prosty sposób na dodanie niestandardowego rozmycia bez targowania się za pomocą prywatnych interfejsów API za pomocą UIViewPropertyAnimator :
Najpierw zadeklaruj właściwość klasy:
Następnie ustaw widok rozmycia w
viewDidLoad()
:Uwaga: To rozwiązanie nie jest odpowiednie dla
UICollectionView
/UITableView
komórekźródło
Z Xcode możesz to zrobić łatwo. Postępuj zgodnie z instrukcjami z xcode. Widok efektów wizualnych Drage na uiview lub imageview.
Happy Coding :)
źródło
Zaakceptowana odpowiedź jest poprawna, ale brakuje tutaj ważnego kroku, na wypadek gdyby ten widok - dla którego chcesz uzyskać rozmyte tło - jest prezentowany za pomocą
[self presentViewController:vc animated:YES completion:nil]
Domyślnie będzie to negować rozmycie, gdy UIKit usuwa widok prezentera, który faktycznie rozmazujesz. Aby uniknąć tego usunięcia, dodaj ten wiersz przed poprzednim
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
Lub użyj innych
Over
stylów.źródło
CEL C
SWIFT 3.0
od: https://stackoverflow.com/a/24083728/4020910
źródło
Korzystanie z UIImageEffects
Dla osób, które chcą mieć większą kontrolę, możesz skorzystać z
UIImageEffects
przykładowego kodu Apple .Możesz skopiować kod
UIImageEffects
z Biblioteki programistów Apple: Rozmycie i zabarwienie obrazuA oto jak go zastosować:
źródło
źródło
Znalazłem to przez przypadek, daje mi naprawdę świetne (prawie duplikaty z Apple) wyniki i używa frameworka. - http://pastebin.com/6cs6hsyQ * Nie napisane przeze mnie
źródło
Ta odpowiedź jest oparta na doskonałej wcześniejszej odpowiedzi Mitji Semolic . Przekształciłem go w swift 3, dodałem wyjaśnienie tego, co dzieje się w komentach, uczyniłem go rozszerzeniem UIViewController, aby każdy VC mógł go wywoływać do woli, dodał niewyraźny widok, aby pokazać selektywną aplikację, i dodał blok uzupełniający, aby wywołujący kontroler widoku może zrobić, co chce, po zakończeniu rozmycia.
Potwierdziłem, że działa zarówno z iOS 10.3.1, jak i iOS 11
źródło
Ważny dodatek do odpowiedzi @ Joeya
Odnosi się to do sytuacji, w której chcesz przedstawić niewyraźne-background
UIViewController
zUINavigationController
.Cieszyć się!
źródło
Wersja Swift 3 odpowiedzi Kev, aby zwrócić nieostry obraz -
źródło
Kod 2019
Oto pełniejszy przykład z wykorzystaniem niesamowitej techniki @AdamBardon.
{Poza tym: ogólnie rzecz biorąc, inżynieria iOS
didMoveToWindow
może być dla Ciebie bardziej odpowiedniadidMoveToSuperview
. Po drugie, możesz użyć innego sposobu wykonania porzucenia, ale porzucenie to dwie linie kodu tam pokazane.}BlurryBall
jest po prostuUIVisualEffectView
. Zwróć uwagę na widok efektów wizualnych. Jeśli potrzebujesz zaokrąglonych rogów lub cokolwiek innego, zrób to w tej klasie.źródło
Firma Apple udostępniła rozszerzenie klasy UIImage o nazwie UIImage + ImageEffects.h. W tej klasie masz pożądane metody rozmycia widoku
źródło
Oto kod Swift 2.0 dla rozwiązania dostarczonego w zaakceptowanej odpowiedzi :
źródło
Jeśli doda widok ciemnego rozmycia dla tableView, to pięknie sprawi, że:
źródło
Możesz bezpośrednio rozmyć tło za pomocą „Widoku efektu wizualnego z rozmyciem” i „Widoku efektu wizualnego z rozmyciem i jaskrawością”.
Aby zrobić Rozmycie tła w aplikacji na iOS, wystarczy ...
Krok 1 Obraz
Krok 2 Obraz
Układ aplikacji przed kliknięciem dowolnego przycisku!
Widok aplikacji po kliknięciu przycisku, który rozmywa całe tło aplikacji!
źródło
Na wypadek, gdyby komukolwiek to pomogło, oto szybkie rozszerzenie, które stworzyłem na podstawie odpowiedzi Jordana H. Jest napisane w Swift 5 i może być używane z Celu C.
UWAGA: Jeśli chcesz rozmazać tło UILabel bez wpływu na tekst, powinieneś utworzyć UIView kontenera, dodać UILabel do UIView kontenera jako widok podrzędny, ustawić backgroundColor UILabel na UIColor.clear, a następnie wywołać blurBackground (styl : UIBlurEffect.Style, fallbackColor: UIColor) na UIView kontenera. Oto szybki przykład tego napisanego w Swift 5:
źródło
Swift 4:
Aby dodać nakładkę lub widok wyskakujący Możesz również użyć widoku kontenera, za pomocą którego otrzymujesz bezpłatny kontroler widoku (widok kontenera otrzymujesz ze zwykłej palety / biblioteki obiektów)
Kroki:
Posiadaj widok (ViewForContainer na zdjęciu), który zawiera ten widok kontenera, aby go przyciemnić, gdy wyświetlana jest zawartość widoku kontenera. Podłącz gniazdo do pierwszego kontrolera widoku
Ukryj ten widok po załadowaniu 1. VC
Pokaż po kliknięciu przycisku wprowadź tutaj opis obrazu
Aby przyciemnić ten widok, gdy wyświetlana jest zawartość widoku kontenera, ustaw Tło widoków na Czarne, a krycie na 30%
Dodałem odpowiedź do tworzenia widoku popview w innym pytaniu Stackoverflow https://stackoverflow.com/a/49729431/5438240
źródło
Prosta odpowiedź brzmi: dodaj widok podrzędny i zmień go na alfa.
źródło