This homework training slides to demo how to build this app.

1. Play cards
Michael
13年8月2⽇日星期五

2. Problem
• http://bit.ly/18T5ns4
13年8月2⽇日星期五

3. Basic Requirements
• http://bit.ly/18T5X9d
13年8月2⽇日星期五

4. Observe the behaviors of objects
13年8月2⽇日星期五

5. View changes
CardView
showFront
showBack
lock
13年8月2⽇日星期五

6. CardView - Class
CarView
showFront
showBack
lock
13年8月2⽇日星期五

7. CardView - Objective-C
@interface CardView : UIImageView
-(void) showFront;
-(void) showBack;
-(void) lock;
@end
13年8月2⽇日星期五

8. showFront - think
• what is this meaning in UIImageView ?
• UIImageView has a property named image
• what is the implementation of show front
13年8月2⽇日星期五

9. showFront - implementation
@implementation CardView
-(void) showFront{
self.image = self.frontImage;
}
@end Do not have this property
13年8月2⽇日星期五

10. Add new property
CarView
frontImage
frontImage: UIImage
setFrontImage_(UIImage * newImage):void
showFront
showBack
lock
13年8月2⽇日星期五

11. Objective-C codes
@interface CardView : UIImageView
@property UIImage * frontImage;
-(void) showFront;
-(void) showBack;
-(void) lock;
@end
13年8月2⽇日星期五

12. The same policy for backImage
@interface CardView : UIImageView
@property UIImage * frontImage;
@property UIImage * backImage;
-(void) showFront;
-(void) showBack;
-(void) lock;
@end
13年8月2⽇日星期五

13. Testing
• test showFront
• test showBack
13年8月2⽇日星期五

14. Testing Code - test showFront
-(void) testShowFront{
CardView * card = [CardView new];
card.frontImage = [UIImage imageNamed:@"front0.png"];
[card showFront];
if( ![card.frontImage isEqual:card.image]){
NSLog(@”show front not works”);
}
}
13年8月2⽇日星期五

15. Testing Code - test showBack
-(void) testShowBack{
CardView * card = [CardView new];
card.backImage = [UIImage imageNamed:@"back.png"];
[card showBack];
if( ![card.backImage isEqual:card.image]){
NSLog(@”show back not works”);
}
}
13年8月2⽇日星期五

16. Refactor
-(void) testShowFront{
[self setUp];
//...
}
-(void) testShowBack{
[self setUp];
//...
}
-(void) setUp{
card = [CardView new];
}
@interface CardView{
CardView * card;
}
@end
13年8月2⽇日星期五

17. Demo
13年8月2⽇日星期五

18. Consider Lock/Unlock
CardView
lock
unlock
13年8月2⽇日星期五

19. Add unlock
@interface CardView : UIImageView
@property UIImage * frontImage;
@property UIImage * backImage;
-(void) showFront;
-(void) showBack;
-(void) lock;
-(void) unlock;
@end
13年8月2⽇日星期五

20. lock/Unlock - implementation
- (void)lock {
self.isLocked = YES;
self.layer.borderColor = [[UIColor blueColor]CGColor];
self.layer.borderWidth = 5.0;
}
- (void)unlock {
self.isLocked = NO;
self.layer.borderColor = [[UIColor blackColor]CGColor];
self.layer.borderWidth = 1.0;
}
change border colorisLocked ??????
13年8月2⽇日星期五

21. Add private property
• in CardView.m
@interface CardView()
@property BOOL isLocked;
@end
@implementation CardView
// ignored...
@end
13年8月2⽇日星期五

22. Lock behavior
• when lock, disable showFront or showBack
13年8月2⽇日星期五

23. showFront/back - updated
@implementation CardView
-(void) showFront{
if(self.isLocked)
return;
self.image = self.frontImage;
}
@end
lock behavior
13年8月2⽇日星期五

24. Tests
-(void) testShowFrontWhenLock{
[self setUp];
card.frontImage = [UIImage imageNamed:@"front0.png"];
card.backImage = [UIImage imageNamed:@"back.png"];
[card showFront];
[card lock];
[card showBack];
if( ![card.frontImage isEqual:card.image]){
NSLog(@”lock not works”);
}
}
13年8月2⽇日星期五

25. Continue to solve the problem
control all card objects
13年8月2⽇日星期五

26. IBOutletCollection - NSArray * cards
13年8月2⽇日星期五

27. Call the method on all objects in array
[self.cards makeObjectsPerformSelector:@selector(setBackImage:)
withObject:[UIImage imageNamed:@"back"] ];
CardView CardView CardView CardView CardView
[cardView setBackImage:[UIImage imageNamed:@”back”]]
cards
13年8月2⽇日星期五

28. - (void)prepareImages
{
[self.cards makeObjectsPerformSelector:@selector(setBackImage:)
withObject:[UIImage imageNamed:@"back"] ];
[self.cards enumerateObjectsUsingBlock:^(id obj, NSUInteger idx,
BOOL *stop) {
CardView * cardImage = obj;
cardImage.frontImage = [UIImage imageNamed:[NSString
stringWithFormat:@"front%d.png",idx]];
}];
[self.cards makeObjectsPerformSelector:@selector(showBack) ];
}
Prepare data
all card have back image
set front image
13年8月2⽇日星期五

29. Change Images
13年8月2⽇日星期五

30. Change Images
change Image
13年8月2⽇日星期五

31. Change Images
change Image
13年8月2⽇日星期五

32. Class Diagram - Add new method
CarView
+frontImage
+backImage
-isLocked
showFront
showBack
lock
unlock
changeImage
13年8月2⽇日星期五

33. Objective-C - implementation
-(void) changeImage{
if (self.isLocked) {
return;
}
if (self.isFront) {
[self showBack];
}else{
[self showFront];
}
}
13年8月2⽇日星期五

34. Add new property
CarView
+frontImage
+backImage
-isLocked
-isFront
showFront
showBack
lock
unlock
changeImage
13年8月2⽇日星期五

35. Private property
@interface CardView()
@property BOOL isLocked;
@property BOOL isFront;
@end
13年8月2⽇日星期五

36. Modified Related methods
• showFront
• showBack
13年8月2⽇日星期五

37. show front & show back
-(void) showFront{
if (self.isLocked) {
return;
}
self.image = self.frontImage;
self.isFront = YES;
}
-(void) showBack{
if (self.isLocked) {
return;
}
self.image = self.backImage;
self.isFront = NO;
}
13年8月2⽇日星期五

38. IBAction
13年8月2⽇日星期五

39. Demo
13年8月2⽇日星期五

40. Lets lock
Segmented Control
Touch
or
Get the object
[cardView lock]
13年8月2⽇日星期五

41. Segmented Control
0 1 2 3 4
CardView CardView CardView CardView CardView
cards
13年8月2⽇日星期五

42. Segmented Control
0 1 2 3 4
CardView CardView CardView CardView CardView
cards
13年8月2⽇日星期五

43. Segmented Control
0 1 2 3 4
CardView CardView CardView CardView CardView
cards
13年8月2⽇日星期五

44. Segmented Control
0 1 2 3 4
CardView CardView CardView CardView CardView
cards
[cardView lock]
13年8月2⽇日星期五

45. Touch
• CardView.m
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
if (self.isLocked) {
[self unlock];
}else{
[self lock];
}
}
13年8月2⽇日星期五

46. Demo
13年8月2⽇日星期五