- PVSM.RU - https://www.pvsm.ru -

Blur в iOS7

С седьмой версией iOS многие элементы UI стали выглядеть привлекательнее (см. Session 226, Implementing Engaging UI on iOS [1]).

Например, теперь поп-оверы, большинство баров и алерты имеют размытый фон.

Blur в iOS7

Что делать, если хочется добавить блюр в свой контрол, подскажет эта статья.

Блюр бывает разный

Есть два типа блюра: статический и динамический. Как и следует из названия, первый размывает контент единожды, а второй обновляется через небольшие промежутки времени.

Реализовать блюр несложно. Общая схема такая: сделать снимок фона за view, (например, при помощи renderInContext [2]), размыть его и установить полученное изображение в качестве фона view. В случае динамического блюра все вышеперечисленные действия выполняются по таймеру. Как пример такого подхода рекомендую глянуть FXBlurView [3].

Главным плюсом 7-ки в плане блюра является высокая скорость работы. Например, можно смотреть видео и при этом панель с регулировкой громкости будет блюриться в реальном времени без каких-либо лагов.

Итак, способы реализовать быстрый блюр в iOS 7.

Кража лейера

Идея довольно проста. Раз у UIToolbar есть прозрачность, то можно взять и использовать его лейер в качестве фона.

UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:[self bounds]]];
[toolbar setBarTintColor:[UIColor greenColor]];
[self.layer insertSublayer:[self.toolbar layer] atIndex:0];

Подход хорош, работает стабильно и очень прост.
Уже есть готовая реализация под названием iOS-blur [4] (доступна через CocoaPods).

Использование drawViewHierarchyInRect:afterScreenUpdates

Если стоит задача наворотить хитрый блюр, то придется самим брать фон и размывать его.
К счастью, в iOS 7 появился чрезвычайно быстрый способ создания снимков view drawViewHierarchyInRect:afterScreenUpdates [5].

Blur в iOS7
На картинке из презентации видно, что скорость получения снимка view возросла в 15 раз!

Использовать довольно просто (готовая реализация [6]):

-(UIImage *)blurredSnapshot
{
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, self.window.screen.scale);
    [self drawViewHierarchyInRect:self.frame afterScreenUpdates:NO];
    UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
    UIImage *blurredSnapshotImage = [snapshotImage applyLightEffect];
    UIGraphicsEndImageContext();
    return blurredSnapshotImage;
}

Как пример реализации динамического блюра рекомендую глянуть 7blur [7].

Заключение

Блюр на iOS7 работает очень быстро, и его несложно реализовать. Так что смело используйте его в своих приложениях, не боясь потерять производительность.

Автор: Fanruten

Источник [8]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/news/46522

Ссылки в тексте:

[1] Session 226, Implementing Engaging UI on iOS: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CD8QFjAB&url=http%3A%2F%2Fdevstreaming.apple.com%2Fvideos%2Fwwdc%2F2013%2F226xbx5xinmlvbdabxux9k3kt%2F226%2F226.pdf&ei=NS1oUvOLOaWu4ASM34GwDA&usg=AFQjCNFoAqrc8iGAJ8h1OAYMplaEe_cW4w&sig2=qG01J03tADQbPb9DWIHUeg&bvm=bv.55123115,d.bGE&cad=rja

[2] renderInContext: https://developer.apple.com/library/ios/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instm/CALayer/renderInContext:

[3] FXBlurView: https://github.com/nicklockwood/FXBlurView

[4] iOS-blur: https://github.com/JagCesar/iOS-blur?source=cc

[5] drawViewHierarchyInRect:afterScreenUpdates: https://developer.apple.com/library/ios/documentation/uikit/reference/uiview_class/UIView/UIView.html#//apple_ref/occ/instm/UIView/drawViewHierarchyInRect:afterScreenUpdates:

[6] готовая реализация: https://github.com/muukii0803/iOS7-Blur

[7] 7blur: https://github.com/justinmfischer/7blur

[8] Источник: http://habrahabr.ru/post/198792/