Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Homework2 play cards

639 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

Homework2 play cards

  1. 1. Play cards Michael 13年8月2⽇日星期五
  2. 2. Problem • http://bit.ly/18T5ns4 13年8月2⽇日星期五
  3. 3. Basic Requirements • http://bit.ly/18T5X9d 13年8月2⽇日星期五
  4. 4. Observe the behaviors of objects 13年8月2⽇日星期五
  5. 5. View changes CardView showFront showBack lock 13年8月2⽇日星期五
  6. 6. CardView - Class CarView showFront showBack lock 13年8月2⽇日星期五
  7. 7. CardView - Objective-C @interface CardView : UIImageView -(void) showFront; -(void) showBack; -(void) lock; @end 13年8月2⽇日星期五
  8. 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. 9. showFront - implementation @implementation CardView -(void) showFront{ self.image = self.frontImage; } @end Do not have this property 13年8月2⽇日星期五
  10. 10. Add new property CarView frontImage frontImage: UIImage setFrontImage_(UIImage * newImage):void showFront showBack lock 13年8月2⽇日星期五
  11. 11. Objective-C codes @interface CardView : UIImageView @property UIImage * frontImage; -(void) showFront; -(void) showBack; -(void) lock; @end 13年8月2⽇日星期五
  12. 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. 13. Testing • test showFront • test showBack 13年8月2⽇日星期五
  14. 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. 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. 16. Refactor -(void) testShowFront{ [self setUp]; //... } -(void) testShowBack{ [self setUp]; //... } -(void) setUp{ card = [CardView new]; } @interface CardView{ CardView * card; } @end 13年8月2⽇日星期五
  17. 17. Demo 13年8月2⽇日星期五
  18. 18. Consider Lock/Unlock CardView lock unlock 13年8月2⽇日星期五
  19. 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. 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. 21. Add private property • in CardView.m @interface CardView() @property BOOL isLocked; @end @implementation CardView // ignored... @end 13年8月2⽇日星期五
  22. 22. Lock behavior • when lock, disable showFront or showBack 13年8月2⽇日星期五
  23. 23. showFront/back - updated @implementation CardView -(void) showFront{ if(self.isLocked) return; self.image = self.frontImage; } @end lock behavior 13年8月2⽇日星期五
  24. 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. 25. Continue to solve the problem control all card objects 13年8月2⽇日星期五
  26. 26. IBOutletCollection - NSArray * cards 13年8月2⽇日星期五
  27. 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. 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. 29. Change Images 13年8月2⽇日星期五
  30. 30. Change Images change Image 13年8月2⽇日星期五
  31. 31. Change Images change Image 13年8月2⽇日星期五
  32. 32. Class Diagram - Add new method CarView +frontImage +backImage -isLocked showFront showBack lock unlock changeImage 13年8月2⽇日星期五
  33. 33. Objective-C - implementation -(void) changeImage{ if (self.isLocked) { return; } if (self.isFront) { [self showBack]; }else{ [self showFront]; } } 13年8月2⽇日星期五
  34. 34. Add new property CarView +frontImage +backImage -isLocked -isFront showFront showBack lock unlock changeImage 13年8月2⽇日星期五
  35. 35. Private property @interface CardView() @property BOOL isLocked; @property BOOL isFront; @end 13年8月2⽇日星期五
  36. 36. Modified Related methods • showFront • showBack 13年8月2⽇日星期五
  37. 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. 38. IBAction 13年8月2⽇日星期五
  39. 39. Demo 13年8月2⽇日星期五
  40. 40. Lets lock Segmented Control Touch or Get the object [cardView lock] 13年8月2⽇日星期五
  41. 41. Segmented Control 0 1 2 3 4 CardView CardView CardView CardView CardView cards 13年8月2⽇日星期五
  42. 42. Segmented Control 0 1 2 3 4 CardView CardView CardView CardView CardView cards 13年8月2⽇日星期五
  43. 43. Segmented Control 0 1 2 3 4 CardView CardView CardView CardView CardView cards 13年8月2⽇日星期五
  44. 44. Segmented Control 0 1 2 3 4 CardView CardView CardView CardView CardView cards [cardView lock] 13年8月2⽇日星期五
  45. 45. Touch • CardView.m -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ if (self.isLocked) { [self unlock]; }else{ [self lock]; } } 13年8月2⽇日星期五
  46. 46. Demo 13年8月2⽇日星期五

×