Top Banner
Play cards Michael 1382星期五
46

Homework2 play cards

May 17, 2015

Download

Technology

Michael Pan

This homework training slides to demo how to build this app.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Homework2 play cards

Play cardsMichael

13年8月2⽇日星期五

Page 2: Homework2 play cards

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

13年8月2⽇日星期五

Page 3: Homework2 play cards

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

13年8月2⽇日星期五

Page 4: Homework2 play cards

Observe the behaviors of objects

13年8月2⽇日星期五

Page 5: Homework2 play cards

View changesCardView

showFrontshowBack

lock

13年8月2⽇日星期五

Page 6: Homework2 play cards

CardView - Class

CarView

showFrontshowBacklock

13年8月2⽇日星期五

Page 7: Homework2 play cards

CardView - Objective-C

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

13年8月2⽇日星期五

Page 8: Homework2 play cards

showFront - think• what is this meaning in UIImageView ?

• UIImageView has a property named image

• what is the implementation of show front

13年8月2⽇日星期五

Page 9: Homework2 play cards

showFront - implementation@implementation CardView

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

@end Do not have this property

13年8月2⽇日星期五

Page 10: Homework2 play cards

Add new propertyCarView

frontImage

frontImage: UIImagesetFrontImage_(UIImage * newImage):voidshowFrontshowBacklock

13年8月2⽇日星期五

Page 11: Homework2 play cards

Objective-C codes@interface CardView : UIImageView

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

13年8月2⽇日星期五

Page 12: Homework2 play cards

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

13年8月2⽇日星期五

Page 13: Homework2 play cards

Testing • test showFront

• test showBack

13年8月2⽇日星期五

Page 14: Homework2 play cards

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

Page 15: Homework2 play cards

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

Page 16: Homework2 play cards

Refactor

-(void) testShowFront{[self setUp];

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

[self setUp]; //...}

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

}

@interface CardView{CardView * card;

}@end

13年8月2⽇日星期五

Page 17: Homework2 play cards

Demo

13年8月2⽇日星期五

Page 18: Homework2 play cards

Consider Lock/Unlock

CardView lock

unlock

13年8月2⽇日星期五

Page 19: Homework2 play cards

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

13年8月2⽇日星期五

Page 20: Homework2 play cards

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

Page 21: Homework2 play cards

Add private property• in CardView.m

@interface CardView()

@property BOOL isLocked;

@end

@implementation CardView// ignored...@end

13年8月2⽇日星期五

Page 22: Homework2 play cards

Lock behavior• when lock, disable showFront or showBack

13年8月2⽇日星期五

Page 23: Homework2 play cards

showFront/back - updated@implementation CardView

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

self.image = self.frontImage;}

@end

lock behavior

13年8月2⽇日星期五

Page 24: Homework2 play cards

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

Page 25: Homework2 play cards

Continue to solve the problem

control all card objects

13年8月2⽇日星期五

Page 26: Homework2 play cards

IBOutletCollection - NSArray * cards

13年8月2⽇日星期五

Page 27: Homework2 play cards

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

Page 28: Homework2 play cards

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

Page 29: Homework2 play cards

Change Images

13年8月2⽇日星期五

Page 30: Homework2 play cards

Change Images

change Image

13年8月2⽇日星期五

Page 31: Homework2 play cards

Change Images

change Image

13年8月2⽇日星期五

Page 32: Homework2 play cards

Class Diagram - Add new method

CarView

+frontImage+backImage-isLocked

showFrontshowBacklockunlockchangeImage

13年8月2⽇日星期五

Page 33: Homework2 play cards

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

13年8月2⽇日星期五

Page 34: Homework2 play cards

Add new property

CarView

+frontImage+backImage-isLocked-isFront

showFrontshowBacklockunlockchangeImage

13年8月2⽇日星期五

Page 35: Homework2 play cards

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

13年8月2⽇日星期五

Page 36: Homework2 play cards

Modified Related methods• showFront

• showBack

13年8月2⽇日星期五

Page 37: Homework2 play cards

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

Page 38: Homework2 play cards

IBAction

13年8月2⽇日星期五

Page 39: Homework2 play cards

Demo

13年8月2⽇日星期五

Page 40: Homework2 play cards

Lets lock

Segmented Control

Touch

or

Get the object

[cardView lock]

13年8月2⽇日星期五

Page 41: Homework2 play cards

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Page 42: Homework2 play cards

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Page 43: Homework2 play cards

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

13年8月2⽇日星期五

Page 44: Homework2 play cards

Segmented Control

0 1 2 3 4

CardView CardView CardView CardView CardView

cards

[cardView lock]

13年8月2⽇日星期五

Page 45: Homework2 play cards

Touch• CardView.m

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

13年8月2⽇日星期五

Page 46: Homework2 play cards

Demo

13年8月2⽇日星期五