Як використовувати UIVisualEffectView для розмиття зображення?

Чи може хтось навести невеликий приклад застосування розмиття до зображення? Я вже деякий час намагаюся розібратися з кодом :( досі новий у obj c!

Програма UIVisualEffectViewзабезпечує просту абстракцію над складними візуальними ефектами. Залежно від бажаного ефекту, результати можуть впливати на вміст, шаруватий за поданням, або на вміст, доданий до contentView перегляду.

Застосуйте а UIVisualEffectViewдо існуючого представлення, щоб застосувати ефект розмиття чи яскравості до вихідного подання. Після того, як ви додасте UIVisualEffectView до ієрархії перегляду, додайте будь-які підгляди до contentView UIVisualEffectView. Не додайте підпогляди безпосередньо до UIVisualEffectViewсебе.

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

Просто поставте цей розмитий погляд на 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)

Ось як використовувати 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];

Швидкий 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)

Ви також можете використовувати конструктор інтерфейсів, щоб легко створювати ці ефекти для простих ситуацій. Оскільки z-значення представлень залежатимуть від порядку, який вони перераховані у «Нариси документа», ви можете перетягнути UIVisualEffectViewконтур документа перед тим, як ви хочете розмити подання. Це автоматично створює вкладене UIView, що є contentViewвластивістю даної UIVisualEffectView. Вкладіть речі в межах цього виду, які ви хочете відобразити поверх розмиття.

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

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

Демо на Github

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

-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

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

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

Це використовується для розмивання фонів, будь то світлих або темних, щоб текст міг легше накладатись. Ви можете додатково ввімкнути яскравість, що спричиняє виведення тексту яскравим, контрастним кольором поряд із розмиттям.