Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,565 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×