Создание кастомных интерфейсов для iOS Бусыгин Роман, Яндекс
План рассказа <ul><li>Проблема стандартных элементов управления </li></ul><ul><li>Что нужно знать для создания своего конт...
Проблема стандартных элементов управления
Знакомо?
Доступные возможности кастомизации
Сделать лучше
Что нужно знать для создания своего контрола
Основные составляющие <ul><li>Графический интерфейс </li></ul><ul><li>Программный интерфейс </li></ul><ul><li>Анимация </l...
Графический интерфейс
Анатомия графического интерфейса
Иерархия subviews -[UIView subviews] -[UIView description] https://gist.github.com/877593
Иерархия subviews #import “UIView-YXDebug.h” - (void) viewDidAppear :(BOOL)animated {  [super  viewDidAppear :animated];  ...
Иерархия sublayers -[CALayer sublayers] -[CALayer renderInContext:] -[CALayer setBorderWidth:] -[CALayer setBorderColor:] ...
Иерархия sublayers #import “CALayer-YXDebug.h”- (BOOL) application :(UIApplication *)application didFinishLaunchingWithOpt...
Иерархия sublayers
UIKit Artwork Extractor Извлекает все графические элементы системы http://github.com/0xced/UIKit-Artwork-Extractor
UIKit Artwork Extractor
Программный интерфейс
Основные составляющие <ul><li>Приложение </li></ul><ul><li>Фрэймворк </li></ul>
Анатомия приложения <ul><li>IPA — это ZIP-архив </li></ul><ul><li>YourApp.ipa/Payload/YourApp.app/YourApp </li></ul>
Препарируем приложение или фрэймворк otool (например, otool -L, otool -oV) Подробнее: man otool nm (например, nm -a | grep...
Препарируем приложение Key-Value Coding [yourControl valueForKey:@”yourKey”] Objective-C runtime object_getInstanceVariabl...
Анимация
Препарируем анимацию Плагин для iOS-симулятора — slowmo http:// github.com/mschrag/slowmo
Применяем на практике
Что мы сделали <ul><li>YXTabBarController + YXTabBar </li></ul><ul><li>YXSegmentedControl </li></ul><ul><li>YXNavigationBa...
YXTabBarController + YXTabBar YXTabBar YXTabBarController
YXSegmentedControl YXSegmentedControl UISegmentedControl
YXSearchBar + YXNavigationBar
YXButton
Ограничения кастомных компонент <ul><li>Недоступность приватных частей iOS </li></ul><ul><li>Отсутствие интеграции с Inter...
Часто встречающиеся ошибки <ul><li>Дизайн ради дизайна </li></ul><ul><li>Программная отрисовка интерфейса </li></ul><ul><l...
Заключение <ul><li>Рецепт кастомного интерфейса прост </li></ul><ul><li>Графическая часть </li></ul><ul><li>Программная ча...
Вопросы? Бусыгин Роман, Яндекс [email_address] @nskboy
Upcoming SlideShare
Loading in …5
×

CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS

1,197
-1

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,197
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CodeFest 2011. Бусыгин Р. — Создание кастомных интерфейсов для iOS

  1. 1. Создание кастомных интерфейсов для iOS Бусыгин Роман, Яндекс
  2. 2. План рассказа <ul><li>Проблема стандартных элементов управления </li></ul><ul><li>Что нужно знать для создания своего контрола </li></ul><ul><li>Примеры реализованных контролов </li></ul><ul><li>Ограничения </li></ul><ul><li>Как не нужно делать </li></ul>
  3. 3. Проблема стандартных элементов управления
  4. 4. Знакомо?
  5. 5. Доступные возможности кастомизации
  6. 6. Сделать лучше
  7. 7. Что нужно знать для создания своего контрола
  8. 8. Основные составляющие <ul><li>Графический интерфейс </li></ul><ul><li>Программный интерфейс </li></ul><ul><li>Анимация </li></ul>
  9. 9. Графический интерфейс
  10. 10. Анатомия графического интерфейса
  11. 11. Иерархия subviews -[UIView subviews] -[UIView description] https://gist.github.com/877593
  12. 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 ]);} ]);}
  13. 13. Иерархия sublayers -[CALayer sublayers] -[CALayer renderInContext:] -[CALayer setBorderWidth:] -[CALayer setBorderColor:] https://gist.github.com/877611
  14. 14. Иерархия sublayers #import “CALayer-YXDebug.h”- (BOOL) application :(UIApplication *)application didFinishLaunchingWithOptions :(NSDictionary *)launchOptions { ... [self performSelector :@selector(highlightSublayers) withObject: nil afterDelay :2];}- (void) highlightSublayers { [self.window.layer highlightSublayerBorders ];} ];}
  15. 15. Иерархия sublayers
  16. 16. UIKit Artwork Extractor Извлекает все графические элементы системы http://github.com/0xced/UIKit-Artwork-Extractor
  17. 17. UIKit Artwork Extractor
  18. 18. Программный интерфейс
  19. 19. Основные составляющие <ul><li>Приложение </li></ul><ul><li>Фрэймворк </li></ul>
  20. 20. Анатомия приложения <ul><li>IPA — это ZIP-архив </li></ul><ul><li>YourApp.ipa/Payload/YourApp.app/YourApp </li></ul>
  21. 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
  22. 22. Препарируем приложение Key-Value Coding [yourControl valueForKey:@”yourKey”] Objective-C runtime object_getInstanceVariable()
  23. 23. Анимация
  24. 24. Препарируем анимацию Плагин для iOS-симулятора — slowmo http:// github.com/mschrag/slowmo
  25. 25. Применяем на практике
  26. 26. Что мы сделали <ul><li>YXTabBarController + YXTabBar </li></ul><ul><li>YXSegmentedControl </li></ul><ul><li>YXNavigationBar + YXSearchBar </li></ul><ul><li>YXButton </li></ul>
  27. 27. YXTabBarController + YXTabBar YXTabBar YXTabBarController
  28. 28. YXSegmentedControl YXSegmentedControl UISegmentedControl
  29. 29. YXSearchBar + YXNavigationBar
  30. 30. YXButton
  31. 31. Ограничения кастомных компонент <ul><li>Недоступность приватных частей iOS </li></ul><ul><li>Отсутствие интеграции с Interface Builder </li></ul>
  32. 32. Часто встречающиеся ошибки <ul><li>Дизайн ради дизайна </li></ul><ul><li>Программная отрисовка интерфейса </li></ul><ul><li>CoreGraphics </li></ul>
  33. 33. Заключение <ul><li>Рецепт кастомного интерфейса прост </li></ul><ul><li>Графическая часть </li></ul><ul><li>Программная часть </li></ul><ul><li>Анимация </li></ul><ul><li>Помните про ограничения </li></ul>
  34. 34. Вопросы? Бусыгин Роман, Яндекс [email_address] @nskboy

×