Как использовать UIVisualEffectView для размытия изображения?

Может ли кто-нибудь привести небольшой пример применения размытия к изображению? Я уже некоторое время пытаюсь разобраться в коде :( Все еще новичок в obj c!

UIVisualEffectView обеспечивает простую абстракцию над сложными визуальными эффектами. В зависимости от желаемого эффекта результаты могут повлиять на контент, расположенный за представлением, или на контент, добавленный в contentView представления.

Примените UIVisualEffectView к существующему виду, чтобы применить эффект размытия или яркости к существующему виду. После добавления UIVisualEffectView в иерархию представлений добавьте любые подпредставления в contentView UIVisualEffectView. Не добавляйте подпредставления непосредственно в UIVisualEffectView.

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


person cNoob    schedule 05.06.2014    source источник


Ответы (6)


Просто поместите этот размытый вид в imageView. Вот пример в Objective-C:

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

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

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

и Swift:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)
person B.S.    schedule 06.06.2014
comment
большое спасибо! Я забыл о настройке фрейма :( В Google пока нет ничего визуального, так что это должен быть первый поисковый запрос :) - person cNoob; 06.06.2014
comment
Надеюсь, API не изменится! Это одна из причин, по которой обсуждение еще не выпущенных API Apple может быть сложным. Например, некоторые из API-интерфейсов UIKit Dynamics немного изменяются между бета-версией и выпуском. Ничего особенного, но они сломали бы любой пример кода, написанный против оригинальных API. - person Zev Eisenberg; 06.06.2014
comment
Будет ли эта линия добавить эффект яркости? [UIVibrancyEffect effectForBlurEffect: blurEffect]; - person cNoob; 06.06.2014
comment
@cNoob Vibrancy - совсем другое животное. Вам нужно создать новое представление и добавить яркое содержимое в contentView UIEffectView, а затем добавить его как часть представления размытия. - person BlueSpud; 25.06.2014
comment
Есть ли способ анимировать размытие / размытие? - person Ruben Martinez Jr.; 05.08.2014
comment
Не тестировалось, попробуйте изменить альфа-анимацию - person B.S.; 05.08.2014
comment
Как можно изменить стиль эффекта «на лету» без повторной инициализации visualEffectView? Скажем, visualEffectView.style = .Dark - person ton; 22.09.2014
comment
@ B.S. Вы можете анимировать альфа-канал визуального эффекта. Бум. - person Maciej Trybiło; 18.11.2014
comment
Может поддерживать только ios8? как насчет ios7 и ниже? - person MeganZhou; 04.12.2014
comment
есть ли способ предотвратить это добавление подпредставления blureffect для покрытия других объектов в контроллере представления? - person Will Von Ullrich; 07.07.2015
comment
UIBlurEffect потрясающий, но обратите внимание, что он не работает на старых устройствах, таких как iPad2 - я потратил часы, пытаясь понять, почему он просто накладывает полупрозрачный слой на мой экран, а не размывает - все потому, что я тестировал на более старом устройстве - person Keith; 29.01.2016
comment
@ MaciejTrybiło, вы не должны играть с альфой при использовании ÙIVisualEffectView, как говорит Apple. При использовании класса UIVisualEffectView избегайте альфа-значений, которые меньше 1 - person Tapas Pal; 05.09.2016

Вот как использовать UIVibrancyEffect и UIBlurEffect с UIVisualEffectView

Цель-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)
person Matt Rundle    schedule 14.06.2014
comment
Обходной путь работает даже без создания подклассов, просто определите extension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } } - person Palimondo; 16.06.2014
comment
Apple, похоже, исправила ошибку. Обходной путь подкласса / расширения больше не требуется в iOS 8 beta 2. - person Benjamin Mayo; 21.06.2014
comment
Спасибо. Я протестировал и подтвердил исправление ошибки и отредактировал ответ. - person Matt Rundle; 22.06.2014
comment
Я пытаюсь добавить это к своему представлению, но каждый раз, когда я представляю представление, оно становится размытым снова и снова, пока я не получу белый фон ... Я удаляю представление с помощью removeFromSuperView после того, как я его отклоняю, но получаю тот же результат .. .. Любые идеи? - person George Asda; 19.11.2014
comment
@GeorgeAsda, а как насчет того, чтобы вместо звонка removeFromSuperView сделать [self.visualEffectView setHidden:NO];? Выделение и добавление в представление - дорогостоящая операция, чем make hide или display. - person Yoon Lee; 28.02.2017

Вы также можете использовать построитель интерфейса, чтобы легко создавать эти эффекты в простых ситуациях. Поскольку z-значения представлений будут зависеть от порядка, в котором они перечислены в структуре документа, вы можете перетащить UIVisualEffectView на схему документа перед видом, который вы хотите размыть. Это автоматически создает вложенный UIView, который является свойством contentView данного UIVisualEffectView. Вложите в это представление объекты, которые вы хотите отобразить поверх размытия.

XCode6 beta5

Вы также можете легко воспользоваться преимуществами яркости UIVisualEffect, которая автоматически создаст еще один вложенный UIVisualEffectView в структуру документа с включенной яркостью по умолчанию. Затем вы можете добавить ярлык или текстовое представление к вложенному UIView (опять же, свойство contentView UIVisualEffectView), чтобы добиться того же эффекта, что и элемент пользовательского интерфейса "> слайд для разблокировки".

введите описание изображения здесь

person ohhh    schedule 18.08.2014
comment
Можете ли вы подтвердить, что то, что просвечивает, на самом деле размыто? Мое изображение (то, что вы назвали BackgroundPhoto в своей иерархии) просто затемнено в стиле размытия: темный полупрозрачный вид. (Выпуск версии Xcode 6.01 и с использованием симулятора iOS) - person tobinjim; 22.09.2014
comment
Что значит «просто затемнено»? Значит, вы не думаете, что это размыто? - person ohhh; 22.09.2014
comment
Хорошо, посмотрю через несколько часов. - person ohhh; 22.09.2014
comment
Спасибо! У вас есть иерархия представлений на вашем BackgroundPhoto, которая свернута на снимках экрана ... Я просто использовал UIImageView и назначил ему фотографию (светлая собака на зеленом фоне - четкое определение между белыми ногами и зеленой травой такой же резкий, когда он охвачен визуальным эффектом, как и когда нет). - person tobinjim; 22.09.2014
comment
Я провел все свое тестирование с помощью Interface Builder, поэтому никакого специального кода не было. В симуляторе iPad 2 не производит размытия, но iPad Air размывает, как и следовало ожидать. - person tobinjim; 23.09.2014
comment
Я считаю, что эффект на разных устройствах разный. На старых устройствах он кажется тусклым, а не размытым (например, iPad 2) - person Paul de Lange; 03.10.2014
comment
Привет, @ohhh. У меня та же конфигурация, что и на скриншотах, но когда я пытаюсь изменить цвет метки, я всегда получаю черный цвет. Вы знаете, почему это происходит? - person Daniel; 11.10.2014
comment
Я видел, что меняя тип размытия на Dark, метка приобретает белый цвет ... - person Daniel; 11.10.2014
comment
Поэтому я только что подтвердил, что размытие не будет выглядеть так же на старых устройствах. Запустите старый симулятор, и он будет выглядеть как темный / светлый непрозрачный вид. Более новые устройства размываются правильно. - person TheCodingArt; 03.11.2014
comment
это намного лучше, чем делать это в коде. Спасибо! - person Ugo; 05.01.2021

Я предпочитаю создавать визуальные эффекты с помощью раскадровки - код не используется для создания или поддержки элементов пользовательского интерфейса. Это также дает мне полную поддержку ландшафта. Я сделал небольшую демонстрацию использования UIVisualEffects с Blur, а также Vibrancy.

Демо на Github

person Patrik Vaberer    schedule 14.04.2015

Если кому-то нужен ответ на 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, поэтому вам не нужно ничего кодировать для него :)

person Amit Kalra    schedule 09.08.2015

person    schedule
comment
Добавьте текст с ответом о том, как ваш ответ помогает OP в устранении опубликованной проблемы - person ρяσѕρєя K; 11.01.2016