нестандартные интерфейсы ios
TRANSCRIPT
Нестандартные интерфейсы
Сергей Гаврилюк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