нестандартные интерфейсы iOS

Нестандартные интерфейсы

Сергей ГаврилюкSenior iOS developer

24.06.2011

1

Примеры реализации

Friday, July 1, 11

Используйте стандартный интерфейс

2

Friday, July 1, 11

Когда нужен нестандартный интерфейс

• отсутствие необходимых компонентов

• impression

3

Friday, July 1, 11

Организация элементов интерфейса в  iOS

UIView

4

Friday, July 1, 11

Организация элементов интерфейса в  iOS

UIView UIControl-derived

4

Friday, July 1, 11

Организация элементов интерфейса в  iOS

UIView UIControl-derived

UIView based complex views

4

Friday, July 1, 11

Организация элементов интерфейса в  iOS

UIView

UIViewController

События:•appearance•rotation•memory warning•custom notifications

Отоброжение

5

Friday, July 1, 11

Организация элементов интерфейса в  iOS

UIView

UIViewController

События:•appearance•rotation•memory warning•custom notifications

Отоброжение

UINavigationController

UITabBarController

5

Friday, July 1, 11

Наследование UIControl

Состояние (значение)

Отображение Изменение

6

Friday, July 1, 11

Наследование UIControl

Состояние (значение)

Отображение Изменение

•Интерфейс класса•Отображение•Обработка touch событий

6

Friday, July 1, 11

Обработка touch событий

beginTrackingWithTouch:withEvent:

continueTrackingWithTouch:withEvent:

endTrackingWithTouch:withEvent:

7

Friday, July 1, 11

Demo

8

Friday, July 1, 11

STKnobControl

•Каждому состоянию (значению) соответствует одно из 128 пререндерных изображения

-(void) updateValuePresentation{ fKnobView.image = [UIImage imageNamed: [NSString stringWithFormat:@"Handle_%04d.png",

127-fCurrentValue]]; }

9

Friday, July 1, 11

STKnobControl•При обработке touch событий используется полярная система коордиант и учитывается только угол поворота...

! ! CGPoint currentPoint = [touch locationInView:self];! ! CGFloat currentX = (currentPoint.x - fKnobView.center.x);! ! CGFloat currentY = -(currentPoint.y - fKnobView.center.y);! ! CGFloat currentR = sqrt(currentX*currentX + currentY*currentY);! ! CGFloat currentAngle = asin(currentY/currentR);

...! ! CGPoint prevPoint = [touch previousLocationInView:self];! ! CGFloat prevX = (prevPoint.x - fKnobView.center.x);! ! CGFloat prevY = -(prevPoint.y - fKnobView.center.y);! !! ! CGFloat prevR = sqrt(prevX*prevX + prevY*prevY);! !! ! CGFloat prevAngle = asin(prevY/prevR);

...CGFloat angleDistance = (prevAngle-currentAngle);

10

Friday, July 1, 11

STKnobControl•При обработке touch событий используется полярная система коордиант и учитывается только угол поворота

NSInteger newValue = ceil((fCurrentAbsoluteAngle + angleDistance + 5*M_PI/6)*127/(5*M_PI/3));

10

Friday, July 1, 11

STKnobControl

•При изменении значения генерируется событие ValueChanged

...fCurrentValue = newValue;fCurrentAbsoluteAngle += angleDistance;[self updateValuePresentation];[self sendActionsForControlEvents:UIControlEventValueChanged];...

11

Friday, July 1, 11

SOSlider

•Набор состояний задается массивом строк

-(id) initWithStates:(NSArray*) states{! if((self = [super init])!= nil)! {! ! [self commonInit];! ! [self setStates:states];! }! return self;}

12

Friday, July 1, 11

SOSlider•После получения события endTracking ползунок “магнитится” в ближайшее дискретное состояние

-(void) endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{! CGFloat labelWidth = (self.frame.size.width-2)/(CGFloat)[fStates count];! NSInteger oldStateIndex = fCurrentState;!! fCurrentState = MIN(round(fKnobView.frame.origin.x/labelWidth), [fStates count]-1);!! [UIView beginAnimations:nil context:nil];! [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];!! fKnobView.frame = CGRectMake(1+ceil(fCurrentState*labelWidth), 1, labelWidth, self.frame.size.width-2);! [UIView commitAnimations];! ...}

13

Friday, July 1, 11

SOSlider

•Текст на ползунке меняется при изменении состояния

fKnobLabel.text = [(NSDictionary*)[fStates objectAtIndex:fCurrentState] objectForKey:@"name"];

CATransition* transiotion = [CATransition animation];transiotion.type = kCATransitionFade;[fKnobLabel.layer addAnimation:transiotion forKey:nil];

14

Friday, July 1, 11

SOSlider

•После изменения состояния генерируется событие ValueChanged

! if(oldStateIndex != fCurrentState)! ! [self sendActionsForControlEvents:UIControlEventValueChanged];

15

Friday, July 1, 11

Навигационный ViewController

• хранение пользовательских ViewControllers

• Пересылка UIViewController-related событий

• Навигацонный интерфейс для пользователя

• Transitions при переключениях между ViewControllers

16

Friday, July 1, 11

Demo

17

Friday, July 1, 11

Navigation

Собственная реализация NavigationBar

18

Friday, July 1, 11

Navigation

Стандартная функциональность UINavigationController:

PushPop

SetViewControllers

Animated:Yes/No

18

Friday, July 1, 11

Navigation

Все transition эффекты полностью идентичны стандартным в

UINavigationController

18

Friday, July 1, 11

TabBarController

Собственная реализация TabBar

• Эффект увеличения иконки активного таба

• Эффект перемещения иконки активного таба в центр

19

Friday, July 1, 11

TabBarController

При переключении табов используется push transition эффект в соответствии с

индексами переключаемых контроллеров в их массиве

19

Friday, July 1, 11

Спасибо за внимание

Сергей ГаврилюкSenior iOS [email protected]

20

Reference:git://github.com/softtechnics/UIControlsDemo.gitgit://github.com/softtechnics/NavigationControllerDemo.gitgit://github.com/softtechnics/TabBarControllerDemo.git

Friday, July 1, 11