Создайте тень вокруг UIVisualEffectView, не закрывая весь вид

Можно ли создать тень вокруг UIVisualView с помощью UIBlurEffect, не позволяя UIVisualView окрашиваться тенью под ним?

Я в основном просто хочу тень вокруг вида, но с этим кодом тень будет покрывать весь вид, что сильно затемняет весь вид:

let borderPath = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 15, height: 15)).cgPath

shadowView.frame = view.bounds
shadowView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
shadowView.layer.shadowOpacity = 0.3
shadowView.layer.shadowRadius = 3.0
shadowView.backgroundColor = UIColor.clear

shadowView.layer.shadowPath = borderPath
shadowView.layer.shadowOffset = CGSize(width: 0, height: 0)
self.view.insertSubview(shadowView, at: 0)

let blurEffect = UIBlurEffect(style: .extraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = view.bounds
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
blurView.clipsToBounds = true
blurView.layer.cornerRadius = 15
view.insertSubview(blurView, aboveSubview: shadowView)

EDIT.
Мне нужно добиться того же, что и в приложении Apple Maps. Где перетаскиваемый любимый вид использует UIVisualEffectView и тень вокруг его верхней части, не мешая фону UIVisualEffectView.

См. примеры скриншотов: введите здесь описание изображения введите здесь описание изображения


ios swift uiblureffect uivisualeffectview shadow
person alengqvist    schedule 05.10.2016    source источник
comment
вы можете применить вид ниже к исходному виду и применить тень к этому виду. Убедитесь, что вид, который вы собираетесь установить ниже, имеет те же размеры.   -  person iO.S-C.    schedule 06.10.2016
comment
Я не понимаю, что вы имеете в виду. Пожалуйста, покажите мне пример.   -  person alengqvist    schedule 06.10.2016

Ответы (5)


arrow_upward
5
arrow_downward

Итак, проблема заключалась в том, что мой фон в основном представлении был белым. И с UIBlurEffect .extraLight, используемым на фоне, который светлее, чем BlurEffect, тень под UIVisualView кажется темнее, чем с более ярким фоном.

Также описано в этом вопросе:
​​Fix UIVisualEffectView extra светлое размытие серого цвета на белом фоне

ОБНОВЛЕНИЕ

Я нашел проект, объясняющий, как решить эту проблему, на Github. Решение включает создание 9- часть UIImage для представления тени. Создатель также объясняет основные слои карт iOS 10.

person alengqvist    schedule 08.10.2016
comment
есть решение для белого/прозрачного фона? - person ronhippler; 20.10.2016
comment
Я думаю, вы можете попытаться обрезать тень так, чтобы внешняя часть тени была только видимой, а внутренняя часть тени была четкой. - person alengqvist; 20.10.2016

arrow_upward
2
arrow_downward

Итак, я пытаюсь воссоздать внешний вид карт iOS 10. Я решил подключить приложение карт в симуляторе к отладчику, чтобы посмотреть, что происходит...

Просмотреть разбивку отладчика

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

Я также взял ресурс (используя это) из приложения "Карты", чтобы не создавать свой собственный. Жаль, что у них есть только @2x художественные работы :/

CardShadowFull@2x.png

person liamnichols    schedule 02.03.2017
comment
Достигли ли вы какого-либо прогресса в воссоздании Карт iOS10 в своем проекте? - person alengqvist; 08.05.2017
comment
@alengqvist: я просто хотел воспроизвести внешний вид этой границы и выполнил эту задачу. Следует отметить, что актив, который я позаимствовал из приложения карт, имеет специальный нерегулярный угловой радиус, поэтому он не будет выстраиваться, если вы просто установите обычное значение layer.cornerRadius. - person liamnichols; 24.05.2017
comment
Небольшой вопрос, как вы подключили отладчик к приложению Apple Map?? - person Pascale Beaulac; 21.09.2017
comment
@MaudeBeaulac: Xcode › Меню › Отладка › Присоединить к процессу, а затем выберите любой процесс симулятора, который вы хотите :) - person liamnichols; 30.09.2017
comment
Я пробовал это, но он говорит мне, что у меня нет разрешения. - person Pascale Beaulac; 04.10.2017
comment
@MaudeBeaulac Вы нацелены на симулятор, да? Невозможно сделать это на реальном устройстве - person liamnichols; 08.10.2017

arrow_upward
2
arrow_downward

Я нашел в iOS 12, это не проблема, UIVisualEffectView игнорирует тень нижних видов, он просто видит сквозь тень, как будто тени не существует.

person zgjie    schedule 27.07.2018
comment
Я смотрю на симулятор iOS 13.4, тень меняет размытие - person Kamen Dobrev; 28.09.2020

arrow_upward
1
arrow_downward

Хитрость заключается в том, чтобы не устанавливать shadowPath слоя. Если он установлен, тень рисуется ниже вида визуального эффекта и, как следствие, затемняет размытый вид.

В документации для shadowPath указано:

Если вы укажете значение для этого свойства, слой создаст свою тень, используя указанный путь вместо составного альфа-канала слоя.

Часть «вместо…» — это то, что нам действительно нужно: тень должна быть составлена ​​после рендеринга содержимого на основе того, что содержимое оставляет прозрачным. Теперь вас может удержать от того, чтобы не устанавливать shadowPath, потому что в документации также говорится, что «явный путь обычно улучшает производительность рендеринга». Тем не менее, я не видел никаких проблем в реальной жизни до сих пор. Я предполагаю, что по сравнению со стоимостью рендеринга UIVisualEffectView рисование тени не имеет значения.

Также убедитесь, что тень установлена ​​на супервиде UIVisualEffectView, а не на родственном виде.

person Ortwin Gentz    schedule 14.11.2018

arrow_upward
0
arrow_downward

Я обычно решаю такие ситуации, используя композицию представлений. Вместо того, чтобы устанавливать тень в целевом представлении, я создаю ShadowView и помещаю его за целевым видом, оба вида с одним и тем же кадром.

Я опубликовал пример и код в этом вопросе.

Примером результата такого подхода является следующее:

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

person kanobius    schedule 29.05.2019