Константин Чернухо_popups, alerts and windows
DESCRIPTION
Popups, alerts and windows Константин Чернухо Яндекс Беларусь Как красиво и безболезненно создать кастомный попап на iOS на основе UIWindow, и при этом не иметь проблем с вращением девайса. Особенности поведения UIAlertView. Как сделать поведение кастомного попапа идентичным системному. Все это рассматривается в контексте существующих готовых сторонних решений, их плюсов и минусов.TRANSCRIPT
![Page 1: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/1.jpg)
1
Kanstantsin Charnukha iOS developer
Popups, alerts and windows
![Page 2: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/2.jpg)
2
Goal
• Fullscreen popup • Overlaps status
bar • Customizable
button color • Customizable
button title color
![Page 3: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/3.jpg)
3
Customizable transition animations
![Page 4: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/4.jpg)
4
Custom popup VS UIAlertView
![Page 5: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/5.jpg)
5
Customization items
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
![Page 6: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/6.jpg)
6
UIAlertView сustomization by using its properties
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
![Page 7: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/7.jpg)
7
UIAlertView сustomization by using UIAppearance
UI_APPEARANCE_SELECTOR: NONE 1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
![Page 8: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/8.jpg)
8
UIAlertView сustomization by subclassing
- (void)show - (void)drawRect:(CGRect)rect
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
![Page 9: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/9.jpg)
9
Subclassing sample
• Simple • Keeps UIAlertView
behavior
• Fragile • Inflexible • Limited
WCAlertView: https://github.com/m1entus/WCAlertView
![Page 10: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/10.jpg)
10
Custom UIView
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations • Status bar • showInView:
![Page 11: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/11.jpg)
11
Custom UIView + keyWindow
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
• Status bar • show • Device rotation
![Page 12: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/12.jpg)
12
Key Window Sample
• Status bar • Custom transitions • Flexible
• Rotation • Multiple views
presentation
JKProgressHUD: https://bitbucket.org/kluivers/jkprogresshud
![Page 13: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/13.jpg)
13
UIView + UIWindow + UIViewController
1. Corners 2. Highlighted button color 3. Cancel button title color 4. Transition animations
• Status bar • show • Device rotation
![Page 14: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/14.jpg)
14
Requisites
1. UIWindow + UIWindowLevelAlert 2. Root UIViewController = custom
container 3. Alert UIViewController 4. AlertView 5. Singleton = window controller 6. Duck typing
![Page 15: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/15.jpg)
15
1. UIWindow + UIWindowLevelAlert
- (UIWindow *)window { if (_window == nil) { _window =
[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; _window.windowLevel = UIWindowLevelAlert; _window.opaque = NO; _window.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [_window setRootViewController:[self rootViewController]]; } return _window; }
Requisites
![Page 16: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/16.jpg)
16
2. Root UIViewController - (MyAlertRootViewController *)rootViewController { if (_rootViewController == nil) { _rootViewController = [[MyAlertRootViewController alloc] init]; _rootViewController.delegate = self; } return _rootViewController; }
Requisites
![Page 17: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/17.jpg)
17
3. Alert UIViewController 4. AlertView // MyAlertView - (void)show { [[MyAlertsController sharedInstance] showAlert:self animated:YES]; } - (void)dismissWithClickedButtonIndex:(NSInteger)buttonIndex
animated:(BOOL)animated { [[MyAlertsController sharedInstance] dissmissAlert:self
animated:animated]; }
Requisites
![Page 18: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/18.jpg)
18
5. Singleton (window controller)
- (void)showAlert:(UIView<MyTransitionDelegate> *)alertView animated:(BOOL)animated
{ [self.window setHidden:NO]; MyAlertViewController *viewController =
[[MyAlertViewController alloc] init]; viewController.alertView = alertView; [self.rootViewController displayViewController:viewController
animated:animated]; }
Requisites
![Page 19: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/19.jpg)
19
6. Duck typing - (id)initWithTitle:(NSString *)title message:(NSString *)message delegate:(id<MyAlertViewDelegate>)delegate cancelButtonTitle:(NSString *)cancelButtonTitle otherButtonTitles:(NSString *)otherButtonTitles, ... NS_REQUIRES_NIL_TERMINATION; - (void)show; - (void)dismissWithClickedButtonIndex:(NSInteger)buttonIndex animated:(BOOL)animated; - (NSInteger)addButtonWithTitle:(NSString *)title; - (NSString *)buttonTitleAtIndex:(NSInteger)buttonIndex;
Requisites
![Page 20: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/20.jpg)
20
Examples
![Page 21: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/21.jpg)
21
Examples
![Page 22: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/22.jpg)
22
Examples
![Page 23: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/23.jpg)
23
Problems solved
• Corners MyAlertView.layer.cornerRadius
• Highlighted button color [UIButton setImage:forState:] • Cancel button title color setCancelButtonTitleColor: • Transition animations [MyAlertViewController showAnimated:completion] • Rotation Automatically by UIViewControllers
![Page 24: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/24.jpg)
24
Advanced problems
• Multiple alerts simultaneously • Transition events • Interaction with system UIAlertView
![Page 25: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/25.jpg)
25
Demo
Multiple alerts
![Page 26: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/26.jpg)
26
Multiple alerts simultaneous display
• Alert displayed + show = dismiss + display
• Running transition + show/hide = add transition to wait queue
![Page 27: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/27.jpg)
27
Transition events
1. Will Present 2. Did Present 3. Will Present 4. Did Present 5. Will Dismiss 6. Did Present 7. Did Dismiss 8. Will Dismiss 9. Did Dismiss
![Page 28: Константин Чернухо_Popups, alerts and windows](https://reader033.vdocument.in/reader033/viewer/2022042817/559c1da01a28abde298b4607/html5/thumbnails/28.jpg)
28
Interaction with UIAlertView
• UIWindowDidBecomeVisible • UIWindowDidBecomeHidden • UIWindowDidBecomeKey • UIWindowDidResignKey
• What should be done on receiving notifications?