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

1. Интерфейс по кусочкам
Зимин Александр

2. iOS Developer
UI Engineer
CocoaHeads
Russia
macOS Developer
Co-Founder
Организатор
Маркетинг, Дизайн, Аналитика, …

3. VIPER
Swift
RxFastline
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