Play cardsMichael

13年8月2⽇日星期五

Problem• http://bit.ly/18T5ns4

13年8月2⽇日星期五

Basic Requirements• http://bit.ly/18T5X9d

13年8月2⽇日星期五

Observe the behaviors of objects

13年8月2⽇日星期五

View changesCardView

showFrontshowBack

lock

13年8月2⽇日星期五

CardView - Class

CarView

showFrontshowBacklock

13年8月2⽇日星期五

CardView - Objective-C

@interface CardView : UIImageView-(void) showFront;-(void) showBack;-(void) lock;@end

13年8月2⽇日星期五

showFront - think• what is this meaning in UIImageView ?

• UIImageView has a property named image

• what is the implementation of show front

13年8月2⽇日星期五

showFront - implementation@implementation CardView

-(void) showFront{ self.image = self.frontImage;}

@end Do not have this property

13年8月2⽇日星期五

Add new propertyCarView

frontImage

frontImage: UIImagesetFrontImage_(UIImage * newImage):voidshowFrontshowBacklock

13年8月2⽇日星期五

Objective-C codes@interface CardView : UIImageView

@property UIImage * frontImage;-(void) showFront;-(void) showBack;-(void) lock;@end

13年8月2⽇日星期五

The same policy for backImage@interface CardView : UIImageView@property UIImage * frontImage;@property UIImage * backImage;-(void) showFront;-(void) showBack;-(void) lock;@end

13年8月2⽇日星期五

Testing • test showFront

• test showBack

13年8月2⽇日星期五

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⽇日星期五

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⽇日星期五

Refactor

-(void) testShowFront{[self setUp];

//...}-(void) testShowBack{

[self setUp]; //...}

-(void) setUp{card = [CardView new];

}

@interface CardView{CardView * card;

}@end

13年8月2⽇日星期五

Demo

13年8月2⽇日星期五

Consider Lock/Unlock

CardView lock

unlock

13年8月2⽇日星期五

Add unlock@interface CardView : UIImageView@property UIImage * frontImage;@property UIImage * backImage;-(void) showFront;-(void) showBack;-(void) lock;-(void) unlock;@end

13年8月2⽇日星期五

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⽇日星期五

Add private property• in CardView.m

@interface CardView()

@property BOOL isLocked;

@end

@implementation CardView// ignored...@end

13年8月2⽇日星期五

Lock behavior• when lock, disable showFront or showBack

13年8月2⽇日星期五

showFront/back - updated@implementation CardView

-(void) showFront{if(self.isLocked)return;

self.image = self.frontImage;}

@end

lock behavior

13年8月2⽇日星期五

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⽇日星期五

Continue to solve the problem

control all card objects

13年8月2⽇日星期五

IBOutletCollection - NSArray * cards

13年8月2⽇日星期五

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⽇日星期五

- (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 dataall card have back image

set front image

13年8月2⽇日星期五

Change Images

13年8月2⽇日星期五

Change Images

change Image

13年8月2⽇日星期五

Change Images

change Image

13年8月2⽇日星期五

Class Diagram - Add new method

CarView

+frontImage+backImage-isLocked

showFrontshowBacklockunlockchangeImage

13年8月2⽇日星期五

Objective-C - implementation-(void) changeImage{ if (self.isLocked) { return; } if (self.isFront) { [self showBack]; }else{ [self showFront]; }}

13年8月2⽇日星期五

Add new property

CarView

+frontImage+backImage-isLocked-isFront

showFrontshowBacklockunlockchangeImage

13年8月2⽇日星期五

Private property@interface CardView()@property BOOL isLocked;@property BOOL isFront;@end

13年8月2⽇日星期五

Modified Related methods• showFront

• showBack

13年8月2⽇日星期五

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⽇日星期五

IBAction

13年8月2⽇日星期五

Demo

13年8月2⽇日星期五

Lets lock

Segmented Control

Touch

or

Get the object

[cardView lock]

13年8月2⽇日星期五

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

[cardView lock]

13年8月2⽇日星期五

Touch• CardView.m

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ if (self.isLocked) { [self unlock]; }else{ [self lock]; } }

13年8月2⽇日星期五

Demo

13年8月2⽇日星期五