1. Нестандартные
интерфейсы
Примеры реализации
Сергей Гаврилюк
Senior iOS developer
24.06.2011
1
Friday, July 1, 11

2. Используйте
стандартный
интерфейс
2
Friday, July 1, 11

3. Когда нужен нестандартный
интерфейс
• отсутствие необходимых компонентов
• impression
3
Friday, July 1, 11

4. Организация элементов
интерфейса в iOS
UIView
4
Friday, July 1, 11

5. Организация элементов
интерфейса в iOS
UIView UIControl-derived
4
Friday, July 1, 11

6. Организация элементов
интерфейса в iOS
UIView UIControl-derived
UIView based complex views
4
Friday, July 1, 11

7. Организация элементов
интерфейса в iOS
UIViewController
События:
Отоброжение
•appearance
•rotation UIView
•memory warning
•custom notifications
5
Friday, July 1, 11

8. Организация элементов
интерфейса в iOS
UINavigationController
UIViewController
События:
Отоброжение
•appearance
•rotation UIView
•memory warning
•custom notifications
UITabBarController
5
Friday, July 1, 11

9. Наследование UIControl
Состояние
(значение)
Отображение Изменение
6
Friday, July 1, 11

10. Наследование UIControl
Состояние
(значение) •Интерфейс класса
•Отображение
Отображение Изменение •Обработка touch
событий
6
Friday, July 1, 11

11. Обработка touch событий
beginTrackingWithTouch:withEvent:
continueTrackingWithTouch:withEvent:
endTrackingWithTouch:withEvent:
7
Friday, July 1, 11

12. Demo
8
Friday, July 1, 11

13. STKnobControl
•Каждому состоянию (значению)
соответствует одно из 128
пререндерных изображения
-(void) updateValuePresentation
{
fKnobView.image = [UIImage imageNamed:
[NSString stringWithFormat:@"Handle_%04d.png",
127-fCurrentValue]];
}
9
Friday, July 1, 11

14. 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

15. STKnobControl
•При обработке touch событий
используется полярная система
коордиант и учитывается только угол
поворота
NSInteger newValue = ceil((fCurrentAbsoluteAngle + angleDistance +
5*M_PI/6)*127/(5*M_PI/3));
10
Friday, July 1, 11

16. STKnobControl
•При изменении значения генерируется
событие ValueChanged
...
fCurrentValue = newValue;
fCurrentAbsoluteAngle += angleDistance;
[self updateValuePresentation];
[self sendActionsForControlEvents:UIControlEventValueChanged];
...
11
Friday, July 1, 11

17. SOSlider
•Набор состояний задается массивом
строк
-(id) initWithStates:(NSArray*) states
{
! if((self = [super init])!= nil)
! {
! ! [self commonInit];
! ! [self setStates:states];
! }
! return self;
}
12
Friday, July 1, 11

18. 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

19. 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

20. SOSlider
•После изменения состояния
генерируется событие ValueChanged
! if(oldStateIndex != fCurrentState)
! ! [self sendActionsForControlEvents:UIControlEventValueChanged];
15
Friday, July 1, 11

21. Навигационный
ViewController
• хранение пользовательских
ViewControllers
• Пересылка UIViewController-related
событий
• Навигацонный интерфейс для
пользователя
• Transitions при переключениях между
ViewControllers
16
Friday, July 1, 11

22. Demo
17
Friday, July 1, 11

23. Navigation
Собственная реализация NavigationBar
18
Friday, July 1, 11

24. Navigation
Стандартная функциональность
UINavigationController:
Push
Animated
Pop
:Yes/No
SetViewControllers
18
Friday, July 1, 11

25. Navigation
Все transition эффекты полностью
идентичны стандартным в
UINavigationController
18
Friday, July 1, 11

26. TabBarController
Собственная реализация TabBar
• Эффект увеличения иконки
активного таба
• Эффект перемещения иконки
активного таба в центр
19
Friday, July 1, 11

27. TabBarController
При переключении табов используется push
transition эффект в соответствии с
индексами переключаемых контроллеров в
их массиве
19
Friday, July 1, 11

28. Спасибо за внимание
Reference:
git://github.com/softtechnics/UIControlsDemo.git
git://github.com/softtechnics/NavigationControllerDemo.git
git://github.com/softtechnics/TabBarControllerDemo.git
Сергей Гаврилюк
Senior iOS developer
gsa@softtechnics.biz
20
Friday, July 1, 11