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


208

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

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

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

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


1
Будьте осторожны , чтобы добавить взгляды UIVisualEffectView«s contentView github.com/onmyway133/blog/issues/124
onmyway133

Также, если вы добавляете его в подпредставление и устанавливаете его фрейм, не забудьте обновить фрейм в viewDidLayoutSubviews, чтобы убедиться, что вращение работает.
Стив Мозер

Ответы:


415

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

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

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

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

и Свифт:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
Спасибо большое! Я забыл об установке фрейма :( В Google пока ничего нет для визуального, так что это должен быть первый поисковый термин :)
cNoob

1
Надеюсь, API не изменится! Это одна из причин, по которой обсуждение еще не выпущенных API Apple может быть сложным. Например, некоторые из API-интерфейсов UIKit Dynamics немного изменяются между бета-версией и выпуском. Ничего особенного, но они сломали бы любой пример кода, написанный против оригинальных API.
Зев Айзенберг

5
Есть ли способ оживить размытие?
Рубен Мартинес мл.

3
@BS Вы можете анимировать альфа в представлении визуального эффекта. Boom.
Maciej Trybiło

2
UIBlurEffect потрясающий, но обратите внимание, что он не работает на старых устройствах, таких как iPad2 - я потратил часы, пытаясь понять, почему он просто накладывает полупрозрачный слой на мой экран, а не размывает его - все потому, что я тестировал на старом устройстве
Кит

135

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

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

Свифт 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
Обходной путь работает даже без подклассов, просто определитеextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
Apple, кажется, исправил ошибку. Обходной путь подкласса / расширения больше не требуется в iOS 8 beta 2.
Бенджамин Майо

2
Спасибо. Я проверил и подтвердил исправление ошибки и отредактировал ответ.
Мэтт Рандл

1
Я пытаюсь добавить это к своему представлению, но каждый раз, когда я представляю представление, оно размыто снова и снова, пока я не получу белый фон ... Я удаляю представление с помощью removeFromSuperView после того, как я отклоняю его, но я получаю тот же результат .. .. Любые идеи?
Джордж Асда

@ GeorgeAsda как насчет того, чтобы вместо звонка removeFromSuperViewсделать [self.visualEffectView setHidden:NO];? Выделение и добавление в представление является более дорогой операцией, чем скрытие или отображение.
Юн Ли

46

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

XCode6 beta5

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

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


Можете ли вы подтвердить, что то, что видно сквозь, на самом деле размыто? Мое изображение (то, что вы назвали "BackgroundPhoto" в вашей иерархии) просто затемнено в стиле размытия: темный полупрозрачный вид. (Выпуск версии Xcode 6.01 и использование симулятора iOS)
tobinjim

Что вы имеете в виду «просто затемненный»? Вы не думаете, что это размыто тогда?
ооооо

Хорошо, я посмотрю через несколько часов.
оооооо

Спасибо! У вас есть иерархия представлений на вашем BackgroundPhoto, которая свернута на скриншотах ... Я просто использовал UIImageView и назначил ему фотографию (светлая собака на зеленом фоне - четкое определение между белыми ногами и зеленой травой такой же резкий, когда покрыт визуальным эффектом, как когда нет).
Tobinjim

1
Я видел, что при смене типа размытия на Темный, этикетка приобретает белый цвет ...
Даниэль

8

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

Демо на Github


8

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


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

Добавьте текст с ответом, чтобы узнать, как ваш ответ помогает ОП в исправлении опубликованной проблемы
ρяσѕρєя K

0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.