34
1 Создание кастомных интерфейсов для iOS Бусыгин Роман, Яндекс

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

Embed Size (px)

Citation preview

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

1

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

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

2

План рассказа

• Проблема стандартных элементов управления

• Что нужно знать для создания своего контрола

• Примеры реализованных контролов

• Ограничения

• Как не нужно делать

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

3

Проблема стандартных элементов управления

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

4

Знакомо?

4

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

5

Доступные возможности кастомизации

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

6

Сделать лучше

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

7

Что нужно знать для создания своего контрола

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

8

Основные составляющие

• Графический интерфейс

• Программный интерфейс

• Анимация

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

9

Графический интерфейс

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

10

Анатомия графического интерфейса

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

11

Иерархия subviews

-[UIView subviews]

-[UIView description]

https://gist.github.com/877593

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

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

13

Иерархия sublayers

-[CALayer sublayers]

-[CALayer renderInContext:]

-[CALayer setBorderWidth:]

-[CALayer setBorderColor:]

https://gist.github.com/877611

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

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

15

Иерархия sublayers

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

16

UIKit Artwork Extractor

Извлекает все графические элементы системы

http://github.com/0xced/UIKit-Artwork-Extractor

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

17

UIKit Artwork Extractor

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

18

Программный интерфейс

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

19

Основные составляющие

• Приложение

• Фрэймворк

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

20

Анатомия приложения

• IPA — это ZIP-архив

• YourApp.ipa/Payload/YourApp.app/YourApp

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

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

22

Препарируем приложениеKey-Value Coding

[yourControl valueForKey:@”yourKey”]

Objective-C runtime

object_getInstanceVariable()

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

23

Анимация

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

24

Препарируем анимацию

Плагин для iOS-симулятора — slowmo http://github.com/mschrag/slowmo

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

25

Применяем на практике

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

26

Что мы сделали

• YXTabBarController + YXTabBar

• YXSegmentedControl

• YXNavigationBar + YXSearchBar

• YXButton

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

27

YXTabBarController + YXTabBar

YXTabBar

YXTabBarController

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

28

YXSegmentedControl

YXSegmentedControl

UISegmentedControl

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

29

YXSearchBar + YXNavigationBar

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

30

YXButton

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

31

Ограничения кастомных компонент

• Недоступность приватных частей iOS

• Отсутствие интеграции с Interface Builder

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

32

Часто встречающиеся ошибки

• Дизайн ради дизайна

• Программная отрисовка интерфейса

• CoreGraphics

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

33

Заключение

• Рецепт кастомного интерфейса прост

• Графическая часть

• Программная часть

• Анимация

• Помните про ограничения

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

34

Вопросы?

Бусыгин Роман,Яндекс

[email protected]@nskboy