Как добиться эффекта размытия в реальном времени для панели навигации так же, как приложение Trailers в iPhone.
i.e По мере прокрутки содержимое должно размываться за панель навигации. Пожалуйста, помогите мне с кодом.
Спасибо!
Я хочу добиться такого эффекта: -
Apple представила новые классы UIVisualEffectView и другие, чтобы добавить прозрачность и эффект размытия на представления из выпуска iOS 8.0.
Вот как вы можете использовать его, чтобы добавить эффект размытия на панель навигации или любой другой UIView:
func addBlurEffect() {
let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
visualEffectView.frame = bounds!
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.navigationController?.navigationBar.addSubview(visualEffectView)
// Here you can add visual effects to any UIView control.
// Replace custom view with navigation bar in above code to add effects to custom view.
}
Objective C Code:
- (void) addBlurEffect {
// Add blur view
CGRect bounds = self.navigationController.navigationBar.bounds;
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
visualEffectView.frame = bounds;
visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.navigationController.navigationBar addSubview:visualEffectView];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];
// Here you can add visual effects to any UIView control.
// Replace custom view with navigation bar in above code to add effects to custom view.
}
ОБНОВИТЬ:
Если вы обнаружите, что после добавления эффекта размытия на навигационную панель кнопки навигации не отображаются, добавьте нижнюю строку после добавления кода blurView.
Swift:
self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)
Цель C:
[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];
Отмечено: в iOS 11 функция sendSubviewToBack не работает нормально. Чтобы достичь этого, мы должны использовать zPosition, чтобы поместить эффект эффекта размытия в другие виды.
self.visualEffectView.layer.zPosition = -1;
Objective-C код
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
self.navigationController.navigationBar.translucent = YES;
// Add blur view
CGRect bounds = self.navigationController.navigationBar.bounds;
bounds.size.height += 20;
bounds.origin.y -= 20;
_visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
self.visualEffectView.frame = bounds;
self.visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.visualEffectView.userInteractionEnabled = NO;
self.visualEffectView.layer.zPosition = -1;
[self.navigationController.navigationBar addSubview:self.visualEffectView];
[self.navigationController.navigationBar sendSubviewToBack:self.visualEffectView];
Swift 4 code
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
var bounds = view.bounds
bounds.size.height += 20
bounds.origin.y -= 20
visualEffectView.isUserInteractionEnabled = false
visualEffectView.frame = bounds
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.navigationController?.navigationBar.addSubview(visualEffectView)
visualEffectView.layer.zPosition = -1
extension UINavigationBar {
func installBlurEffect() {
isTranslucent = true
setBackgroundImage(UIImage(), for: .default)
let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
var blurFrame = bounds
blurFrame.size.height += statusBarHeight
blurFrame.origin.y -= statusBarHeight
let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurView.isUserInteractionEnabled = false
blurView.frame = blurFrame
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
addSubview(blurView)
blurView.layer.zPosition = -1
}
}
navigationController?.navigationBar.installBlurEffect()
Я добавил @Kampai, @Damasio с моими настройками, чтобы решить мои проблемы (что было связано с pushNavigation). Код будет поддерживать Swift 4.0 +, iOS9, Xcode 9
В вашем ViewController ViewDidLoad() просто вызовите
addBlurEffect(toView: self.navigationController?.navigationBar)
функция:
//MARK :- It can be used in navBarGlassEffect view
func addBlurEffect(toView view:UIView?) {
// Add blur view
guard let view = view else { return }
//This will let visualEffectView to work perfectly
if let navBar = view as? UINavigationBar{
navBar.setBackgroundImage(UIImage(), for: .default)
navBar.shadowImage = UIImage()
}
var bounds = view.bounds
bounds.offsetBy(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0
let blurEffect = UIBlurEffect(style: .dark)
let visualEffectView = UIVisualEffectView(effect: blurEffect)
visualEffectView.isUserInteractionEnabled = false
visualEffectView.frame = bounds
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.insertSubview(visualEffectView, at: 0)
}
Если после ответа @Kampai вы получите строку статуса, не попадающую в действие, добавьте это:
bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0
Вопрос, заданный в в этом разделе.
SWIFT 3:
func addBlurEffect(toView view:UIView?) {
// Add blur view
guard let view = view else { return }
//This will let visualEffectView to work perfectly
if let navBar = view as? UINavigationBar{
navBar.setBackgroundImage(UIImage(), for: .default)
navBar.shadowImage = UIImage()
}
var bounds = view.bounds
bounds.offsetBy(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0
let blurEffect = UIBlurEffect(style: .dark)
let visualEffectView = UIVisualEffectView(effect: blurEffect)
visualEffectView.isUserInteractionEnabled = false
visualEffectView.frame = bounds
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.insertSubview(visualEffectView, at: 0)
}
Сначала я добавил метод addBlurEffect(), а затем в AppDelegate, я добавил
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().backgroundColor = UIColor.clearColor()
UINavigationBar.appearance().translucent = true
Теперь он работает для меня
Ключевое примечание: после того, как u реализует выше код для добавления размытия, 1. U нужно отправить свое размытие назад, чтобы показать другие вещи 2. U нужно установить, чтобы ваше взаимодействие с пользователем размытия было ложным, чтобы иметь возможность использовать элементы на панели навигации.
Это новое решение, которое отлично работает применительно к UIToolbar.
extension UIToolbar {
func toolBarBlurEffect() {
isTranslucent = true
setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
var blurFrame = bounds
blurFrame.size.height += statusBarHeight
let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
blurView.isUserInteractionEnabled = false
blurView.frame = blurFrame
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
addSubview(blurView)
blurView.layer.zPosition = -1
}
}
Использование аналогично:
navigationController?.toolbar.toolBarBlurEffect()