Александр Зимин - Как мы поддерживали In-Call Status Bar и адаптировали Badoo под iPhone X

Transcript

1. Александр Зимин Как мы поддерживали In-Call Status Bar и адаптировали Badoo под iPhone X
2. Александр Зимин Software Engineer в Badoo, London @ziminalex @azimin
3. О нас 350m Сообщений в день 350m Зарегистрированных пользователей 60m Ежемесячная аудитория 300k Регистраций в день
5. • Что такое In-Call Status Bar • Наш опыт “сражения” с ним • Дизайн под iPhone X • Наш опыт адаптации под него План
6. Все трюки, показанные в данном докладе выполнены хардкорнымы продуктовщиками, не стоит выполнять их в домашних VIPER условиях “ ”
7. 2009 2014 2017
8. In-Call Status Bar Злые 20 поинтов
14. https://double-high-status-bar.tumblr.com
19. Как все исправить?
24. Базовые проблемы На многие даже зеркал радаров нет
25. Экран загрузки Решения 1. Прятать status bar во время запуска 2. Использовать LaunchScreen.storyboard 3. Не рисовать контент по середине https://goo.gl/Wmb8XS
26. Неправильные отступы
27. self.containerScrollView = [[CancelableDragScrollView alloc] initWithFrame:self.view.frame]; VS self.containerScrollView = [[CancelableDragScrollView alloc] initWithFrame:self.view.bounds];
29. - (UIWindow *)mainWindow { if (!_mainWindow) { _mainWindow = [[[UIApplication sharedApplication] delegate] window]; } return _mainWindow; } // ... self.contentContainerView.bma_height = self.mainWindow.bma_height - menuViewHeight // ...
31. 618 + 49 + 20 = 687 (iPhone 7 height 667)
32. ChildViewController
33. Child View Controller
34. let redVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: “VC") self.addChildViewController(redVC) self.view.addSubview(redVC.view) redVC.didMove(toParentViewController: self)
36. let redVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: “VC") self.addChildViewController(redVC) self.view.addSubview(redVC.view) redVC.didMove(toParentViewController: self) redVC.view.translatesAutoresizingMaskIntoConstraints = false redVC.view.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true redVC.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true redVC.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
37. UIImagePickerController
38. let imagePickerController = UIImagePickerController() imagePickerController.sourceType = .camera self.present(imagePickerController, animated: true, completion: nil)
39. UIImagePickerController
40. http://www.openradar.me/34253549
41. • Написать свой компонент камеры • Работать с background color • Руками двигать view’s Решения
42. Как мы двигали status bar Через “волшебные” API
51. Окей, вернемся на обычный
53. window?.backgroundColor = UIColor.white class FirstViewController: UIViewController { } class MidleViewController: UIViewController { override var prefersStatusBarHidden: Bool { return true } } class LastViewController: UIViewController { override var prefersStatusBarHidden: Bool { return false } @IBAction func backAction(_ sender: Any) { self.dismiss(animated: true, completion: nil) } }
57. Тут, возможно, будет видео гличей без In-call status bar, которые мы получили, прееехав на публичные методы
58. Status Bar Home HE
59. public extension UIWindow { // https://openradar.appspot.com/2443851 func bma_forceAdjustmentsOfViews(isStatusBarHidden: Bool) { guard StatusBarManager.shared.isInCallStatusBar else { return } for view in self.subviews { self.adjustFrame(of: view, isStatusBarHidden: isStatusBarHidden, baseView: self) } self.forceAdjustmentsOfViewsRecursevly(isStatusBarHidden: isStatusBarHidden, baseView: self) } }
60. fileprivate func forceAdjustmentsOfViewsRecursevly(isStatusBarHidden: Bool, baseView: UIView) { for view in self.subviews { if view.isTransitionView { self.adjustFrame(of: view, isStatusBarHidden: isStatusBarHidden, baseView: baseView) } view.forceAdjustmentsOfViewsRecursevly(isStatusBarHidden: isStatusBarHidden, baseView: baseView) } }
61. fileprivate func adjustFrame(of view: UIView, isStatusBarHidden: Bool, baseView: UIView) { if isStatusBarHidden { view.frame = baseView.bounds } else { let inCallStatusBarOffset = StatusBarManager.shared.inCallStatusBarOffset view.frame = CGRect(x: 0, y: inCallStatusBarOffset, width: baseView.bounds.width, height: baseView.bounds.height - inCallStatusBarOffset) } }
64. Окей, Siri Что там с iPhone X
66. Базовые вещи
67. https://medium.com/rosberryapps/ios-safe-area-ca10e919526f
72. Популярные баги
73. Xib’ы
75. public func bma_adjustTopMarginToFitSafeAreaAndStatusBarOnOldVersions() { if #available(iOS 11.0, *) { } else { var margins = self.layoutMargins let oldStatusBarSpace: CGFloat = 20 margins.top = oldStatusBarSpace self.layoutMargins = margins } } - (void)viewWillLayoutSubviews { [super viewWillLayoutSubviews]; [self.view bma_adjustTopMarginToFitSafeAreaAndStatusBarOnOldVersions]; } https://twitter.com/ZiminAlex/status/920012746321747969
76. • Руками задавать constraint или марджины • Переписать на storyboard’ы • … Еще варианты?
77. https://stackoverflow.com/questions/46232929/why-page-push-animation- tabbar-moving-up-in-the-iphone-x
80. Хардкод
83. PagesQueueNormalLayoutConfigurationProvider
85. Window RootVC View top: 44 bottom: 34 top: 44 bottom: 34/0 Window RootVC View RootVC View top: 44 bottom: 34 top: 44 bottom: 34/0
86. Window RootVC View top: 20 bottom: 0 top: 0 bottom: 0 https://twitter.com/ZiminAlex/status/918534774477778944
87. Window RootVC View top: 44 bottom: 34 top: 44 bottom: 34/0 Window RootVC View RootVC View top: 44 bottom: 34 top: 44 bottom: 34/0
89. Window Root View Greedy View Window Root View Greedy View
90. public var bpui_keyWindowSafeAreaInsets: UIEdgeInsets? { if #available(iOS 11.0, *) { let windowInsets = self.keyWindow?.safeAreaInsets var rootViewSafeAreaInsets = self.keyWindow?.rootViewController?.view.safeAreaInsets rootViewSafeAreaInsets?.bottom = windowInsets?.bottom ?? rootViewSafeAreaInsets?.bottom ?? 0 return rootViewSafeAreaInsets } return nil }
92. Это плохое решение, если вы можете его избежать — не стоит его использовать
93. Клавиатура inout view сам себя не подвинет
95. self.textField.inputView = [[DatePickerWithInsets alloc] initWithFrame:CGRectZero date:[self birthdayDateForDatePicker] minimumDate:[self dateWithYearsAgo:130] maximumDate:[self dateWithYearsAgo:13] bottomInset: bottomInsets];
97. Редкие случаи
101. • Проверьте свои input view • Проверьте xib’ы • Места с хардкором решаются легко, но их сложно найти • Свой TabBar упростил нам жизнь • Есть и частные ситуации (полный профиль) • Подумайте как закрашивать плашки внизу • С рекламой все грустно Итоги
103. Вы не одни такие
105. • iOS Safe Area — https://medium.com/rosberryapps/ios-safe-area-ca10e919526f • Update your apps for iPhone X — https://developer.apple.com/ios/update-apps- for-iphone-x/ • Challenges of Supporting iPhone X — https://pspdfkit.com/blog/2017/ supporting-iphone-x/ • Updating Your App for iOS 11 — https://developer.apple.com/videos/play/ wwdc2017/204/ • What's New in Cocoa Touch — https://developer.apple.com/videos/play/ wwdc2017/201/
106. https://twitter.com/ziminalex
107. https://events.badoo.com
108. Спасибо! Давайте делать самые красивые приложения вместе