2012年9月7日 星期五

IOS手指辨識基本實作(五)

使用UISwipeGestureRecognizer實作出電子書的翻頁

1. 先開一個專案

2.放置兩個Label及一個UIImageView在Storyboard上


3.  將Mac上的Icon圖片加入到檔案中

4.將草莓圖案放入UIImageView上

5.將兩個Label及 UIImageView註冊到mySwipeViewController.h上

6.並在mySwipeViewController.h上增加一個pages的變數,形態設為strong。


7. 在mySwipeViewController.m上面增加一些控制程式碼
#import "mySwipeViewController.h"

@interface mySwipeViewController ()

@end

@implementation mySwipeViewController
@synthesize bookImage;
@synthesize pageLabel;
@synthesize actionLabel;
@synthesize pages;

int currentTag = 1;

- (void) screenWasSwipe: (UISwipeGestureRecognizer *)recognizer {
   
    if (recognizer.direction == UISwipeGestureRecognizerDirectionDown)
        actionLabel.text = @"動作:向下滑動";
    else if (recognizer.direction == UISwipeGestureRecognizerDirectionUp)
        actionLabel.text = @"動作:向上滑動";
    else if (recognizer.direction == UISwipeGestureRecognizerDirectionRight)
        actionLabel.text = @"動作:向右滑動";
    else if (recognizer.direction == UISwipeGestureRecognizerDirectionLeft)
        actionLabel.text = @"動作:向左滑動";
    else
        actionLabel.text = @"Not thing";
   
    NSString *currentName = [pages objectAtIndex:currentTag-1];
   
    [bookImage setImage:[UIImage imageNamed:currentName]];
   
    [bookImage setUserInteractionEnabled:YES];
   
    currentTag ++;
   
    if (currentTag >=6)
        currentTag = 1;
   
    bookImage.tag = currentTag;
   
    //翻頁動畫效果
    UIView *currentView=[self.view viewWithTag:currentTag];
   
    [UIView beginAnimations:@"animationID" context:nil];
    [UIView setAnimationDuration:0.7f];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationRepeatAutoreverses:NO];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
   
    [currentView removeFromSuperview];
    [self.view addSubview:bookImage];
   
    [UIView commitAnimations];
   
   
    pageLabel.text = [NSString stringWithFormat:@"頁碼:%d", currentTag ];
   
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
   
   
   
    // swipe up
    UISwipeGestureRecognizer *swipeUp = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(screenWasSwipe:)];
   
    swipeUp.numberOfTouchesRequired = 1;
   
    swipeUp.direction = UISwipeGestureRecognizerDirectionUp;
   
    [self.view addGestureRecognizer:swipeUp];
   
   
   
    // swipe down
    UISwipeGestureRecognizer *swipeDown = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(screenWasSwipe:)];
   
    swipeDown.numberOfTouchesRequired = 1;
   
    swipeDown.direction = UISwipeGestureRecognizerDirectionDown;
   
    [self.view addGestureRecognizer:swipeDown];
   
   
    // swipe Right
    UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(screenWasSwipe:)];
   
    swipeRight.numberOfTouchesRequired = 1;
   
    swipeRight.direction = UISwipeGestureRecognizerDirectionRight;
   
    [self.view addGestureRecognizer:swipeRight];
   
   
   
    // swipe Left
    UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(screenWasSwipe:)];
   
    swipeLeft.numberOfTouchesRequired = 1;
   
    swipeLeft.direction = UISwipeGestureRecognizerDirectionLeft;
   
    [self.view addGestureRecognizer:swipeLeft];
   
   
    pages=[[NSArray alloc] initWithObjects:@"Green Apple.gif",@"Orange.gif",@"Pear.gif",@"Red Apple.gif",@"Strawberry.gif",
           nil];

}

为了能让上页下页翻页的时候找到关联的页面,采用了如下机制:
  • 将图片封装为UIImageView显示
  • 可以为UIImageView设置一个tag值,值为数组下标+1
  • 这样,上级view有方法能根据tag查询到UIImageView,比如:UIView *currentView=[self.view viewWithTag:currentTag];
  • 设置一个成员变量currentTag保存当前的tag值


8. 完成後的執行結果如下,會有五種水果輪流出現,並顯示翻頁效果及翻頁動作,共有五頁循環出現。







沒有留言: