Александр Зимин (Uberchord Engineering), Интерфейс по кусочкам: эффективное взаимодействие между iOS разработчиком и дизайнером, CodeFest 2017

https://2017.codefest.ru/lecture/1192

С каждым месяцем появляется все больше новых подходов, архитектурных паттернов и библиотек для разработки мобильных приложений. В то же время очень мало разговоров о работе с UI и передачу ресурсов от дизайнера к разработчику. В этом докладе Александр поделится лучшими практиками взаимодействия iOS разработчиков и дизайнеров в их команде с примерами из реальной жизни.

Transcript

1. Интерфейс по кусочкам Зимин Александр
2. iOS Developer UI Engineer CocoaHeads Russia macOS Developer Co-Founder Организатор Маркетинг, Дизайн, Аналитика, …
3. VIPER Swift Rx Fastline Promises MVVM Protocol-Oriented Programming Realm
4. План • Проблемы
5. План • Проблемы • Цвета и шрифты Дизайнер Разработчик
6. План • Проблемы • Цвета и шрифты • Передача ассетов
7. План • Проблемы • Цвета и шрифты • Передача ассетов • Свизлинг для дизайна
8. План • Проблемы • Цвета и шрифты • Передача ассетов • Свизлинг для дизайна • Планы на будущее
9. Проблемы
10. • Дизайн: • Может поменяться • Много рутины • Не вызывает runtime или compile ошибки
11. Цвета
12. 7F98BB 7F98BB 7F98BB 3870BE 3870BE 3870BE &%*k? &%*k?
13. extension UIColor { static var appBlue: UIColor { return UIColor(hexString: "7F98BB") } }
14. extension UIColor { static var mainColor: UIColor { return UIColor(hexString: "7F98BB") } }
15. &%*k?
16. extension UIColor { enum ColorType: String { case gray = "8C8C8C" case darkGray = "6C6C6C" } convenience init(_ colorType: ColorType) { self.init(hexString: colorType.rawValue) } }
17. extension UIColor { enum ComponentType { case navigationBar case separator var colorType: ColorType { switch self { case .navigationBar: return .gray case .separator: return .darkGray } } } convenience init(componentType: ComponentType) { self.init(componentType.colorType) } }
18. extension UIColor { enum ComponentType { case navigationBar case separator var colorType: ColorType { switch self { case .navigationBar: return .gray case .separator: return .darkGray } } } convenience init(componentType: ComponentType) { self.init(componentType.colorType) } } Не может содержать HEX строк!
19. let grayColor = UIColor(.gray) let separatorColor = UIColor(componentType: .separator)
20. Шрифты
21. extension UIFont { enum FontType { case gothamProMedium(size: CGFloat) case gothamPro(size: CGFloat) } convenience init(_ fontType: FontType) { switch fontType { case let .gothamProMedium(size): self.init(name: "GothamPro-Medium", size: size)! case let .gothamPro(size): self.init(name: "GothamPro", size: size)! } } }
22. https://github.com/krzysztofzablocki/Sourcery
23. Передача ассетов
26. x3 Labels Switcher States Label Button
31. http://utom.design/measure/
32. https://zeplin.io
33. https://zeplin.io
34. Свизлинг
35. viewDidLoad customViewDidLoad
36. viewDidLoad customViewDidLoad • При вызове viewDidLoad вызывается customViewDidLoad • При вызове customViewDidLoad вызывается viewDidLoad
37. private var swizzleTextValue: Void = { swizzleMethods(objectClass: UILabel.self, originalSelector: #selector(setter: UILabel.text), swizzledSelector: #selector(UILabel.setStaticText(_:))) }() extension UILabel { open override class func initialize() { _ = swizzleTextValue } @objc fileprivate func setStaticText(_ text: String?) { setStaticText(text) // You actions } }
38. private var swizzleTextValue: Void = { swizzleMethods(objectClass: UILabel.self, originalSelector: #selector(setter: UILabel.text), swizzledSelector: #selector(UILabel.setStaticText(_:))) }() extension UILabel { open override class func initialize() { _ = swizzleTextValue } @objc fileprivate func setStaticText(_ text: String?) { setStaticText(text) // You actions } }
39. private var swizzleTextValue: Void = { swizzleMethods(objectClass: UILabel.self, originalSelector: #selector(setter: UILabel.text), swizzledSelector: #selector(UILabel.setStaticText(_:))) }() extension UILabel { open override class func initialize() { _ = swizzleTextValue } @objc fileprivate func setStaticText(_ text: String?) { setStaticText(text) // You actions } } Плохо!
42. extension UILabel { static func swizzleText() { _ = swizzleTextValue } @objc fileprivate func setStaticText(_ text: String?) { setStaticText(text) // You actions } }
43. extension UILabel { static func swizzleText() { _ = swizzleTextValue } // ... } • Вызывать swizzleText(): • Где нибудь в AppDelegate или его проксировании • Вызывать в load() у UILabel в Obj-c
44. Свизлинг
45. Это безопасно?
46. Это быстро?
47. let value = clock() for i in 0..<1000000 { cell.textLabel?.text = "\(i)" } let result = Double(clock() - value) print(result)
49. До свизлинга Плосле свизлинга 2463609.0 2665523.0 2238332.0 2565639.0 2240086.0 2560924.0 2278225.0 2579298.0 2247269.0 2561646.0 2246613.0 2563499.0 2228041.0 2571111.0 15%
50. Локализация
52. private var swizzleTextValue: Void = { swizzleMethods(objectClass: UILabel.self, originalSelector: #selector(setter: UILabel.text), swizzledSelector: #selector(UILabel.setLocalizedText(_:))) }()
53. extension UILabel { static func swizzleText() { _ = swizzleTextValue } @objc fileprivate func setLocalizedText(_ text: String?) { if let text = text, !isInsideButton { setLocalizedText(text.tripleLengthPseudolanguage) } else { setLocalizedText(text) } } private var isInsideButton: Bool { let superview = self.superview return superview is UIButton } }
55. Керн
56. @implementation UINavigationItem (AZTitleConfiguration) + (void)load { static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ SwizzleInstanceMethod(self, @selector(setTitle:), @selector(az_setTitleWithConfiguration:)); }); } @end
57. // We setup view with our own label, because we want to use kern spacing and other appearance staf - (void)az_setTitleWithConfiguration:(NSString *)title { if (title == nil) { title = @""; } [self az_setTitleWithConfiguration:[title uppercaseString]]; NSDictionary *attributes = [[UINavigationBar appearance] titleTextAttributes]; NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:[title uppercaseString] attributes:attributes]; // … fill self.titleView if already UILabel UILabel *titleLabel = [UILabel new]; titleLabel.attributedText = attributedString; [titleLabel sizeToFit]; self.titleView = titleLabel; }
58. // We setup view with our own label, because we want to use kern spacing and other appearance staf - (void)az_setTitleWithConfiguration:(NSString *)title { if (title == nil) { title = @""; } [self az_setTitleWithConfiguration:[title uppercaseString]]; NSDictionary *attributes = [[UINavigationBar appearance] titleTextAttributes]; NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:[title uppercaseString] attributes:attributes]; // … fill self.titleView if already UILabel UILabel *titleLabel = [UILabel new]; titleLabel.attributedText = attributedString; [titleLabel sizeToFit]; self.titleView = titleLabel; }
59. // We setup view with our own label, because we want to use kern spacing and other appearance staf - (void)az_setTitleWithConfiguration:(NSString *)title { if (title == nil) { title = @""; } [self az_setTitleWithConfiguration:[title uppercaseString]]; NSDictionary *attributes = [[UINavigationBar appearance] titleTextAttributes]; NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:[title uppercaseString] attributes:attributes]; // … fill self.titleView if already UILabel UILabel *titleLabel = [UILabel new]; titleLabel.attributedText = attributedString; [titleLabel sizeToFit]; self.titleView = titleLabel; }
60. // We setup view with our own label, because we want to use kern spacing and other appearance staf - (void)az_setTitleWithConfiguration:(NSString *)title { if (title == nil) { title = @""; } [self az_setTitleWithConfiguration:[title uppercaseString]]; NSDictionary *attributes = [[UINavigationBar appearance] titleTextAttributes]; NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:[title uppercaseString] attributes:attributes]; // … fill self.titleView if already UILabel UILabel *titleLabel = [UILabel new]; titleLabel.attributedText = attributedString; [titleLabel sizeToFit]; self.titleView = titleLabel; } if ([self.titleView isKindOfClass:[UILabel class]]) { UILabel *label = (UILabel*)self.titleView; label.attributedText = attributedString; return; }
61. Лейаут
63. @interface NSLayoutConstraint (UCConstraintBuild) @property (nonatomic, assign) IBInspectable CGFloat screenWidthPercent; @property (nonatomic, assign) IBInspectable CGFloat screenHeightPercent; @end
64. @implementation NSLayoutConstraint (UCConstraintBuild) - (void)setScreenWidthPercent:(CGFloat)screenWidthPercent { self.constant = round([self screenBounds].size.width * screenWidthPercent); } - (CGFloat)screenWidthPercent { return (self.constant / [self screenBounds].size.width); } @end
66. Планы на будущее
67. https://github.com/krzyzanowskim/Natalie
68. https://github.com/SwiftGen/SwiftGen
69. { "colors": [ { "name": "lightWhite", "color": "F5F5F5" } ], "fonts": [ { "name": "bold", "fontName": "ProximaNova-Extrabld" } ] }
70. "code_templates": { "font": "UIFont(.$name, size: $size)", "textColor": "UIColor(.$)", "backgroundColor": "UIColor(.$)" }
71. "styles": { "text.default": { "font.size": 20, "font.name": "SFUIText-Light", "textColor": "red" }, "text.title": { "parents": ["text.default"], "font.name": "bold", "textColor": "$themeColor" } }
72. extension UILabel: Stylable { func apply(style: Style) { // ... } } label.apply(style: Styles.Text.Title)
73. One more thing
74. @objc protocol Foo { init() } final class Bar: Foo { init() {} deinit { print("destroying") } } let x: Foo.Type = Bar.self _ = x.init()
75. @objc protocol Foo { init() } final class Bar: Foo { init() {} deinit { print("destroying") } } let x: Foo.Type = Bar.self _ = x.init()
76. protocol Foo { init() } final class Bar: Foo { init() {} deinit { print("destroying") } } let x: Foo.Type = Bar.self _ = x.init()
77. https://bugs.swift.org/browse/SR-3935
78. Спасибо за внимание! Зимин Александр azimin@me.com @ZiminAlex