codefest 2011. Бусыгин Р. — Создание кастомных интерфейсов...
TRANSCRIPT
![Page 1: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/1.jpg)
1
Создание кастомныхинтерфейсов для iOSБусыгин Роман,Яндекс
![Page 2: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/2.jpg)
2
План рассказа
• Проблема стандартных элементов управления
• Что нужно знать для создания своего контрола
• Примеры реализованных контролов
• Ограничения
• Как не нужно делать
![Page 3: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/3.jpg)
3
Проблема стандартных элементов управления
![Page 4: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/4.jpg)
4
Знакомо?
4
![Page 5: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/5.jpg)
5
Доступные возможности кастомизации
![Page 6: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/6.jpg)
6
Сделать лучше
![Page 7: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/7.jpg)
7
Что нужно знать для создания своего контрола
![Page 8: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/8.jpg)
8
Основные составляющие
• Графический интерфейс
• Программный интерфейс
• Анимация
![Page 9: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/9.jpg)
9
Графический интерфейс
![Page 10: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/10.jpg)
10
Анатомия графического интерфейса
![Page 11: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/11.jpg)
11
Иерархия subviews
-[UIView subviews]
-[UIView description]
https://gist.github.com/877593
![Page 12: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/12.jpg)
12
Иерархия subviews
#import “UIView-YXDebug.h”- (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [self performSelector:@selector(dumpSubtree) withObject:nil afterDelay:2];}- (void)dumpSubtree { NSLog(@”%@”, [self.view subtreeDescription]);}
![Page 13: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/13.jpg)
13
Иерархия sublayers
-[CALayer sublayers]
-[CALayer renderInContext:]
-[CALayer setBorderWidth:]
-[CALayer setBorderColor:]
https://gist.github.com/877611
![Page 14: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/14.jpg)
14
Иерархия sublayers
#import “CALayer-YXDebug.h”- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {... [self performSelector:@selector(highlightSublayers) withObject:nil afterDelay:2];}- (void)highlightSublayers { [self.window.layer highlightSublayerBorders];}
![Page 15: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/15.jpg)
15
Иерархия sublayers
![Page 16: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/16.jpg)
16
UIKit Artwork Extractor
Извлекает все графические элементы системы
http://github.com/0xced/UIKit-Artwork-Extractor
![Page 17: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/17.jpg)
17
UIKit Artwork Extractor
![Page 18: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/18.jpg)
18
Программный интерфейс
![Page 19: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/19.jpg)
19
Основные составляющие
• Приложение
• Фрэймворк
![Page 20: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/20.jpg)
20
Анатомия приложения
• IPA — это ZIP-архив
• YourApp.ipa/Payload/YourApp.app/YourApp
![Page 21: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/21.jpg)
21
Препарируем приложение или фрэймворкotool (например, otool -L, otool -oV) Подробнее: man otool
nm (например, nm -a | grep ‘ FUN ‘) Подробнее: man nm, man stab
class-dump-z
http://code.google.com/p/networkpx/wiki/class_dump_z
![Page 22: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/22.jpg)
22
Препарируем приложениеKey-Value Coding
[yourControl valueForKey:@”yourKey”]
Objective-C runtime
object_getInstanceVariable()
![Page 23: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/23.jpg)
23
Анимация
![Page 24: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/24.jpg)
24
Препарируем анимацию
Плагин для iOS-симулятора — slowmo http://github.com/mschrag/slowmo
![Page 25: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/25.jpg)
25
Применяем на практике
![Page 26: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/26.jpg)
26
Что мы сделали
• YXTabBarController + YXTabBar
• YXSegmentedControl
• YXNavigationBar + YXSearchBar
• YXButton
![Page 27: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/27.jpg)
27
YXTabBarController + YXTabBar
YXTabBar
YXTabBarController
![Page 28: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/28.jpg)
28
YXSegmentedControl
YXSegmentedControl
UISegmentedControl
![Page 29: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/29.jpg)
29
YXSearchBar + YXNavigationBar
![Page 30: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/30.jpg)
30
YXButton
![Page 31: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/31.jpg)
31
Ограничения кастомных компонент
• Недоступность приватных частей iOS
• Отсутствие интеграции с Interface Builder
![Page 32: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/32.jpg)
32
Часто встречающиеся ошибки
• Дизайн ради дизайна
• Программная отрисовка интерфейса
• CoreGraphics
![Page 33: CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS](https://reader031.vdocuments.site/reader031/viewer/2022020110/555012cab4c90555618b4b1b/html5/thumbnails/33.jpg)
33
Заключение
• Рецепт кастомного интерфейса прост
• Графическая часть
• Программная часть
• Анимация
• Помните про ограничения