转：UISwipeGestureRecognizer&nbs…

使用手指動態來切換UIView，意思就是說當手指頭接觸螢幕然後橫向或是縱向劃過螢幕後，就可以切換不同的畫面。

關於手指動態偵測的API，主要是UIGestureRecognizer，他衍生的subclass包含，



UITapGestureRecognizer

UIPinchGestureRecognizer

UIRotationGestureRecognizer

UISwipeGestureRecognizer

UIPanGestureRecognizer

UILongPressGestureRecognizer



以UISwipeGestureRecognizer為例，若要讓UIView具備手指動態的偵測，必須先行宣告swipe gesture recognizer然後設定recognizer接收到手指動態事件之後，誰要對這個事件作反應。



//宣告UISwipeGestureRecognizer，同時指定target及action
//self 將對手指動態事件執行switchViews的反應
UISwipeGestureRecognizer *swipeGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self

action:*selector(switchViews)];



//指定偵測手指劃過螢幕的方向為由右至左
swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirectionLeft;



//加入swipe gesture recognizer到主要的viewcontroller中
[self.view addGestureRecognizer:swipeGestureRecognizer];



//釋放swipeGestureRecognizer所佔的記憶體
[swipeGestureRecognizer release];



設定完swipe gesture recoginzer之後，各位就可以在switchViews方法中加入所需的code來切換不同的畫面(UIView)

 

tap是指轻触手势。类似鼠标操作的点击。从iOS 3.2版本开始支持完善的手势api：



    tap：轻触

    long press：在一点上长按

    pinch：两个指头捏或者放的操作

    pan：手指的拖动

    swipe：手指在屏幕上很快的滑动

    rotation：手指反向操作



这为开发者编写手势识别操作，提供了很大的方便，想想之前用android写手势滑动的代码（编写android简单的手势切换视图示例），尤其感到幸福。



这里写一个简单的tap操作。在下面视图的蓝色视图内增加对tap的识别：



image



 



当用手指tap蓝色视图的时候，打印日志输出：



image



代码很简单，首先要声明tap的recognizer：



    UITapGestureRecognizer *recognizer=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapFrom:)];

    [infoView addGestureRecognizer:recognizer];

    [recognizer release];



在这里：



    initWithTarget:self，要引用到Controller，因为一般这部分代码写在controller中，用self；

    action:@selector(handleTapFrom:)，赋值一个方法名，用于当手势事件发生后的回调；

    [infoView addGestureRecognizer:recognizer]，为view注册这个手势识别对象，这样当手指在该视图区域内，可引发手势，之外则不会引发



对应的回调方法：



    -(void)handleTapFrom:(UITapGestureRecognizer *)recognizer{

        NSLog(@">>>tap it");

    }



controller相关方法完整的代码（包含了一些与本文无关的视图构建代码）：



    // Implement loadView to create a view hierarchy programmatically, without using a nib.
    - (void)loadView {

        //去掉最顶端的状态拦
        [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide];

       

        UIImage *image=[UIImage imageNamed:@"3.jpg"];

       

        //创建背景视图
        self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

        UIImageView *backgroudView=[[UIImageView alloc] initWithImage:image];

        [self.view addSubview:backgroudView];

       

        

       

        UIView *bottomView=[[UIView alloc]  initWithFrame:CGRectMake(0, 1024-70, 768, 70)];

        bottomView.backgroundColor=[UIColor grayColor];

        bottomView.alpha=0.8;

       

        //UIButton *backButton=[[UIButton alloc] initWithFrame:CGRectMake(10, 10, 100, 40)];
        UIButton *backButton=[UIButton buttonWithType: UIButtonTypeRoundedRect];

        [backButton setTitle:@"ok" forState:UIControlStateNormal];

        backButton.frame=CGRectMake(10, 15, 100, 40);

       

        [bottomView addSubview:backButton];

       

        [self.view addSubview:bottomView];

       

        UIView *infoView=[[UIView alloc] initWithFrame:CGRectMake(200, 700, 768-400, 70)];

        infoView.backgroundColor=[UIColor blueColor];

        infoView.alpha=0.6;

        infoView.layer.cornerRadius=6;

        infoView.layer.masksToBounds=YES;

        [self.view addSubview:infoView];

       

        UITapGestureRecognizer *recognizer=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapFrom:)];

        [infoView addGestureRecognizer:recognizer];

        [recognizer release];

    }



    -(void)handleTapFrom:(UITapGestureRecognizer *)recognizer{

        NSLog(@">>>tap it");

    }



     



     



     



     



    翻页效果，类似下面的样子：



    imageimage



    在电子书应用中会很常见。这里需要两个要点：



        翻页动画

        手势上下轻扫（swipe）的处理



     



    先说一下轻扫（swipe）的实现，可以参考编写简单的手势示例：Tap了解手势种类。



    在viewDidLoad方法中注册了对上、下、左、右四个方向轻松的处理方法：



        - (void)viewDidLoad {

           

            UISwipeGestureRecognizer *recognizer;

           

            recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];

            [recognizer setDirection:(UISwipeGestureRecognizerDirectionRight)];

            [[self view] addGestureRecognizer:recognizer];

            [recognizer release];

           

            recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];

            [recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];

            [[self view] addGestureRecognizer:recognizer];

            [recognizer release];

           

            recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];

            [recognizer setDirection:(UISwipeGestureRecognizerDirectionDown)];

            [[self view] addGestureRecognizer:recognizer];

            [recognizer release];

           

            recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];

            [recognizer setDirection:(UISwipeGestureRecognizerDirectionLeft)];

            [[self view] addGestureRecognizer:recognizer];

            [recognizer release];

           

           

            [super viewDidLoad];



         



    可以看到，都是同一个方法，handleSwipeFrom。



    在该方法中，再识别具体是哪个方向的轻扫手势，比如判断是向下的轻扫：



        -(void)handleSwipeFrom:(UISwipeGestureRecognizer *)recognizer {

            NSLog(@"Swipe received.");

           

            if (recognizer.direction==UISwipeGestureRecognizerDirectionDown) {

                NSLog(@"swipe down");



    判断是向上的轻扫：



        if (recognizer.direction==UISwipeGestureRecognizerDirectionUp) {

            NSLog(@"swipe up");



    有关动画的处理，比如向下（往回）翻页，类似这样：



        [UIView beginAnimations:@"animationID" context:nil];

        [UIView setAnimationDuration:0.7f];

        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

        [UIView setAnimationRepeatAutoreverses:NO];

        [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];



        [currentView removeFromSuperview];

        [self.view addSubview:contentView];



        [UIView commitAnimations];



    向上（向前）翻页，只需改为：



        [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:contentView];



        [UIView commitAnimations];



    如果是电子书，还需要考虑一个问题，就是有多个页面（图形），比如50页。那么需要有一个数据结构来保存这些页面的图片路径：



        objc数据结构，比如数组

        sqlite数据库表



    这样，写一套翻页代码和加载什么图形之间就可以解耦。



    本文示例使用的是数组，类似这样：



        pages=[[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",

                         nil];



    图片保存在resources下。



    为了能让上页下页翻页的时候找到关联的页面，采用了如下机制：



        将图片封装为UIImageView显示

        可以为UIImageView设置一个tag值，值为数组下标+1

        这样，上级view有方法能根据tag查询到UIImageView，比如：UIView *currentView=[self.view viewWithTag:currentTag];

        设置一个成员变量currentTag保存当前的tag值



    比如这样，当应用加载的时候显示第一页：



            currentTag=1;

           

            NSString *path = [[NSBundle mainBundle] pathForResource:@"pageflip1" ofType:@"mp3"];

            player=[[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:path] error:NULL];

           

            //[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
            [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide];

            UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 

            [contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]]; 

            [contentView setUserInteractionEnabled:YES];

            contentView.tag=currentTag;



    在翻页时的处理：



        if (currentTag<[pages count]) {

            UIView *currentView=[self.view viewWithTag:currentTag];

            currentTag++;

           

            UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

            [contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]]; 

            [contentView setUserInteractionEnabled:YES];

            contentView.tag=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:contentView];

           

            [UIView commitAnimations];