IOS 七种手势详解(动图+Demo下载)

原创Blog,转载请注明出处

blog.csdn.net/hello_hwc

欢迎关注我的博客专栏,这个关于IOS SDK的专栏我会持续更新

IOS SDK详解



前言:

触摸是交互的核心,而手势是触摸的上层封装,易于使用,不易出错。本文介绍了7种常用手势,多数手势我都配合Core Animation举了一个例子。给读者一些参考。最后,Demo的链接我会放到最后。



Demo源代码下载

CSDN下载

GitHub下载


一 UIGestureRecognizer

UIGestureRecognizer是一个抽象类,定义了手势所需的一些基本的属性和方法。当然,也可以自定义自己的手势,近期不会更新相关文章,所以不在本文的考虑范畴。七种子类是常用的也是IOS SDK提供的类。

UITapGestureRecognizer

UIPinchGestureRecognizer

UIRotationGestureRecognizer

UISwipeGestureRecognizer

UIPanGestureRecognizer

UIScreenEdgePanGestureRecognizer

UILongPressGestureRecognizer

一些常用的方法

位置信息

获得触摸的位置
- (CGPoint)locationInView:(UIView *)view
获得某一个触摸的位置
- (CGPoint)locationOfTouch:(NSUInteger)touchIndex
                    inView:(UIView *)view
当前手势有几个触摸
- (NSUInteger)numberOfTouches

State

这个很重要,因为要通过State来判断手势的情况

@property(nonatomic, readwrite) UIGestureRecognizerState state
绑定手势的view
@property(nonatomic, readonly) UIView *view

取消或者延迟

@property(nonatomic) BOOL cancelsTouchesInView
@property(nonatomic) BOOL delaysTouchesBegan
@property(nonatomic) BOOL delaysTouchesEnded

两个手势之间关系

- (void)requireGestureRecognizerToFail:(UIGestureRecognizer *)otherGestureRecognizer

二 UITapGestureRecognizer

Demo的效果图-tap一下,图片抖动

第一个手势,我在storyboard上添加

然后,在响应手势的函数中添加动画

- (IBAction)tap:(UITapGestureRecognizer *)sender {
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position.x";
    NSInteger initalPositionX = self.imageview.layer.position.x;
    animation.values = @[@(initalPositionX),
                         @(initalPositionX + 10),
                         @(initalPositionX - 10),
                         @(initalPositionX + 10),
                         @(initalPositionX)];
    animation.keyTimes = @[
                           @(0),
                           @(1/6.0),
                           @(3/6.0),
                           @(5/6.0),
                           @(1)];
    animation.removedOnCompletion = YES;
    [self.imageview.layer addAnimation:animation forKey:@"keyFrame"];
}

属性和方法介绍

@property(nonatomic) NSUInteger numberOfTapsRequired //手势需要tap几下

@property(nonatomic) NSUInteger numberOfTapsRequired //手势需要几根手指


三 UIPinchGestureRecognizer

效果如-pinch则放大图片

实现代码

-(void)viewWillAppear:(BOOL)animated{
    CGRect imageFrame;
    //按照设备的不同调整大小
    if ([[UIDevice currentDevice].model isEqualToString:@"ipad"]) {
        imageFrame = CGRectMake(0,0,300,200);
    }else
    {
        imageFrame = CGRectMake(0,0,240,160);
    }
    self.imageview = [[UIImageView alloc] initWithFrame:imageFrame];
    self.imageview.image = [UIImage imageNamed:@"Image3.jpg"];
    self.imageview.center = self.view.center;
    [self.view addSubview:self.imageview];
    [self.imageview setUserInteractionEnabled:YES];
    //绑定手势
    UIPinchGestureRecognizer * pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinch:)];
    [self.imageview addGestureRecognizer:pinch];
    self.isLargeView = NO;
    self.oldFrame = self.imageview.frame;
}

-(void)pinch:(UIPinchGestureRecognizer *)pinch{
    if (pinch.state == UIGestureRecognizerStateRecognized) {
        if (!self.isLargeView && pinch.velocity > 0) {
            self.backgroundView = [[UIView alloc] initWithFrame:self.view.frame];
            self.backgroundView.backgroundColor = [UIColor blackColor];
            self.backgroundView.alpha = 0.0;
            self.imageview.backgroundColor = [UIColor blueColor];
            [self.view insertSubview:self.backgroundView belowSubview:self.imageview];
            [UIView animateWithDuration:0.8
                                  delay:0.0
                                options:UIViewAnimationOptionCurveEaseInOut
                             animations:^{
                                 self.backgroundView.alpha = 1.0;
                                 if ([[UIDevice currentDevice].model isEqualToString:@"ipad"]) {
                                     self.imageview.frame = CGRectMake(0,300,768,512);
                                 }else
                                 {
                                     self.imageview.frame = CGRectMake(0,220,320,210);
                                 }
                             }
                             completion:^(BOOL finished) {
                                 self.isLargeView = YES;

                             }];
        }
        if (self.isLargeView &&  pinch.velocity < 0) {
            [UIView animateWithDuration:0.8
                             animations:^{
                                 self.backgroundView.alpha = 0.0;
                                 self.imageview.frame = self.oldFrame;

                             }
                             completion:^(BOOL finished) {
                                 [self.backgroundView removeFromSuperview];
                                 self.backgroundView = nil;
                                 self.isLargeView = NO;
                             }];
        }
    }
}

属性和方法介绍

@property(nonatomic) CGFloat scale //scale的绝对值(相对最初的距离)

@property(nonatomic, readonly) CGFloat velocity //速度


四 UIRotationGestureRecognizer

效果如图-旋转

实现代码

-(void)viewDidLoad{
    self.imageview.userInteractionEnabled = YES;
    UIRotationGestureRecognizer * rotate = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotate:)];
    [self.imageview addGestureRecognizer:rotate];
}
-(void)rotate:(UIRotationGestureRecognizer *)sender{
    if (sender.state == UIGestureRecognizerStateChanged) {
        self.imageview.transform = CGAffineTransformMakeRotation(sender.rotation);
    }
}

属性和方法介绍

@property(nonatomic) CGFloat rotation //旋转的绝对值(相对最初)

@property(nonatomic, readonly) CGFloat velocity //速度


五 UISwipeGestureRecognizer

效果如图-翻页

实现代码

-(void)viewDidLoad{
    UISwipeGestureRecognizer * swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)];
    swipe.numberOfTouchesRequired = 2;
    [swipe setDirection:UISwipeGestureRecognizerDirectionUp];
    [self.containview addGestureRecognizer:swipe];
    self.image2.userInteractionEnabled = YES;
    self.image2.hidden = YES;
    self.image3.userInteractionEnabled = YES;
    self.image3.hidden = NO;
}
-(void)swipe:(UISwipeGestureRecognizer *)sender{

    if (sender.state == UIGestureRecognizerStateRecognized) {
        [UIView transitionWithView:self.containview
                          duration:0.8
                           options:UIViewAnimationOptionTransitionCurlUp
                        animations:^{
                            self.image3.hidden = !self.image3.hidden;
                            self.image2.hidden = !self.image2.hidden;
                        } completion:^(BOOL finished) {

                        }];
    }

}

属性和方法介绍

@property(nonatomic) UISwipeGestureRecognizerDirection direction //方向

@property(nonatomic) NSUInteger numberOfTouchesRequired //需要的触摸(手指)数量


六 UIPanGestureRecognizer

效果如图-拖动图片随着移动,停止后回到原始位置

实现代码

-(void)viewDidLoad{
    CGRect imageFrame;
    if ([[UIDevice currentDevice].model isEqualToString:@"ipad"]) {
        imageFrame = CGRectMake(0,0,300,200);
    }else
    {
        imageFrame = CGRectMake(0,0,240,160);
    }

    self.imageview = [[UIImageView alloc] initWithFrame:imageFrame];
    self.imageview.image = [UIImage imageNamed:@"Image3.jpg"];
    self.imageview.center = self.view.center;
    [self.view addSubview:self.imageview];
    UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    self.imageview.userInteractionEnabled = YES;
    [self.imageview addGestureRecognizer:pan];
    self.initalCenter = self.imageview.center;
}
-(void)pan:(UIPanGestureRecognizer *)sender{
    if (sender.state == UIGestureRecognizerStateBegan) {

    }else if(sender.state == UIGestureRecognizerStateChanged){
        CGPoint translation = [sender translationInView:self.view];
        self.imageview.center = CGPointMake(self.initalCenter.x + translation.x,self.initalCenter.y + translation.y);
    }else{
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options:UIViewAnimationOptionCurveEaseInOut animations:^{
                                self.imageview.center = self.initalCenter;
                            } completion:^(BOOL finished) {

                        }];
    }
}
属性方法介绍
@property(nonatomic) NSUInteger maximumNumberOfTouches //手势所需的最大手指数
@property(nonatomic) NSUInteger minimumNumberOfTouches //手势所需的最小手指数
- (CGPoint)translationInView:(UIView *)view //在view中移动的距离
- (CGPoint)velocityInView:(UIView *)view //移动速度


七 UIScreenEdgePanGestureRecognizer

效果如图-实现简单的侧拉效果

实现代码

-(void)viewDidLoad{
    UIScreenEdgePanGestureRecognizer * edge = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgePan:)];
    edge.edges = UIRectEdgeRight;
    [self.view addGestureRecognizer:edge];
}
-(void)edgePan:(UIScreenEdgePanGestureRecognizer *)sender{
    if (sender.state == UIGestureRecognizerStateBegan) {
        self.edgeView = [[UIView alloc] initWithFrame:CGRectOffset(self.view.frame,CGRectGetWidth(self.view.frame),0)];
        self.edgeView.backgroundColor = [UIColor blueColor];
        self.offsetCenter = self.edgeView.center;
        [self.view addSubview:self.edgeView];
    }else if(sender.state == UIGestureRecognizerStateChanged){
        CGPoint translation = [sender translationInView:self.view];
        self.edgeView.center = CGPointMake(self.offsetCenter.x + translation.x,self.offsetCenter.y);
    }else if(sender.state == UIGestureRecognizerStateEnded)
    {
        if ([sender velocityInView:self.view].x < 0) {
            [UIView animateWithDuration:0.3 animations:^{
                self.edgeView.center = self.view.center;
            }];
        }else{
            [UIView animateWithDuration:0.3
                                  delay:0.0
                                options:UIViewAnimationOptionBeginFromCurrentState
                             animations:^{
                                 self.edgeView.center = self.offsetCenter;
                             }
                             completion:^(BOOL finished) {
                                 [self.edgeView removeFromSuperview];
                                 self.edgeView = nil;
                             }];
        }
    }else{
        [UIView animateWithDuration:0.3
                              delay:0.0
                            options:UIViewAnimationOptionBeginFromCurrentState
                         animations:^{
                             self.edgeView.center = self.offsetCenter;
                         }
                         completion:^(BOOL finished) {
                             [self.edgeView removeFromSuperview];
                             self.edgeView = nil;
                         }];
    }
}
属性和方法介绍
@property(readwrite, nonatomic, assign) UIRectEdge edges //哪些边缘添加edgePan

八 UILongPressGestureRecognizer

效果如图-长按删除图片

实现代码

-(void)viewDidLoad{
    self.imageview.userInteractionEnabled = YES;
    UILongPressGestureRecognizer * longpress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longpress:)];
    longpress.minimumPressDuration = 0.5;
    longpress.numberOfTapsRequired = 0;
    longpress.cancelsTouchesInView = YES;
    longpress.delegate = self;
    [self.imageview addGestureRecognizer:longpress];
}
-(void)longpress:(UILongPressGestureRecognizer *)sender{
    if (sender.state == UIGestureRecognizerStateBegan){
        UIAlertView * alertview = [[UIAlertView alloc] initWithTitle:@"Warning"
                                                             message:@"Delete this image?"
                                                            delegate:self
                                                   cancelButtonTitle:@"Cancel"
                                                   otherButtonTitles:@"OK", nil];
        [alertview show];
        [sender cancelsTouchesInView];
    }
}
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
    if (buttonIndex == 1) {
        [UIView animateWithDuration:1.0
                              delay:0.0
                            options:0
                         animations:^{
                             self.imageview.alpha = 0.0;
                         } completion:^(BOOL finished) {
                             [self.imageview removeFromSuperview];
                         }];
    }
    self.imageview.userInteractionEnabled = YES;
}
属性和方法介绍
@property(nonatomic) CFTimeInterval minimumPressDuration //手势识别的最小按压时间
@property(nonatomic) NSUInteger numberOfTouchesRequired //几根手指
@property(nonatomic) NSUInteger numberOfTapsRequired //识别手势需要的预先点击数目,通常为0
@property(nonatomic) CGFloat allowableMovement //允许移动的距离


时间: 2024-12-15 13:30:03

IOS 七种手势详解(动图+Demo下载)的相关文章

Linux网卡bond的七种模式详解

像Samba.Nfs这种共享文件系统,网络的吞吐量非常大,就造成网卡的压力很大,网卡bond是通过把多个物理网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,具体的功能取决于采用的哪种模式. 一.bond的七种模式介绍:1.mode=0(balance-rr)(平衡抡循环策略)链路负载均衡,增加带宽,支持容错,一条链路故障会自动切换正常链路.交换机需要配置聚合口,思科叫port channel.特点:传输数据包顺序是依次传输(即:第1个包走eth0,下一个包就走eth1-.一直循环

iOS七种手势

// 初始化一个UIimageView UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 300, 300)]; imageView.image = [UIImage imageNamed:@"12.jpg"]; // UIImageView的用户交互是默认关闭的,要想使他可以处理触摸事件,我们得手动打开它 [imageView setUserInteractionEnable

IOS中的手势详解

1.点击 UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click)]; //设置当前需要点击的次数 [tap setNumberOfTapsRequired:1]; //设置当前需要触发事件的手指数量 [tap setNumberOfTouchesRequired:2]; //设置当前代理 tap.delegate=self; [_view add

TCP的三次握手与四次挥手(详解+动图)

常用的熟知端口号 应用程序 FTP TFTP TELNET SMTP DNS HTTP SSH MYSQL 熟知端口 21,20 69 23 25 53 80 22 3306 传输层协议 TCP UDP TCP TCP UDP TCP     TCP概述 TCP把连接作为最基本的对象,每一条TCP连接都有两个端点,这种断点我们叫作套接字(socket),它的定义为端口号拼接到IP地址即构成了套接字,例如,若IP地址为192.3.4.16 而端口号为80,那么得到的套接字为192.3.4.16:8

Red Hat Virtualization网卡bond七种模式详解

1.绑定介绍 绑定(bond) 是由多个网卡组合成的.一个单一的.由软件定义的网络设备.因为一个绑定是由多个网卡组成的,因此它可以提供比单一网卡更高的网络传输速度,并提供了更好的网络容错功能(绑定只有在所有的网卡都出现问题时才会停止工作).但是,绑定设备有一个限制:绑定必须由相同型号的网卡组成. 绑定设备的数据包传输算法是由绑定的模式所决定的. 注意:模式 1.2.3 和 4 支持虚拟机网络(使用网桥)和非虚拟机网络(无网桥):模式 0.5 和 6 只支持非虚拟机网络(无网桥). 2.绑定模式

iOS学习--UIScrollView 原理详解

iOS学习--UIScrollView 原理详解 http://blog.csdn.net/yanfangjin/article/details/7898189 ScrollView UIScrollView UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容. Scroll View为你处理缩小放大手势,UIScrollView实现了这些手势,并且替你处理对于它们的探测和回应.其中需要注意的子类是UITableView以及UITextView(用来显示大量的文字).

OSI七层模型详解 TCP/IP协议

总结 OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 等等 表示层 数据格式化,代码转换,数据加密 没有协议 会话层 解除或建立与别的接点的联系 没有协议 传输层 提供端对端的接口 TCP,UDP 网络层 为数据包选择路由 IP,ICMP,OSPF,EIGRP,IGMP 数据链路层 传输有地址的帧以及错误检测功能 SLIP,CSLIP,PPP,MTU 物理层 以二进制数据形式在物理媒体上

IOS 友盟使用详解

IOS 友盟使用详解 这篇博客将会详细介绍友盟的使用,希望对博友们有所帮助. 首先我们在浏览器上搜索友盟. 在这里我们选择官网这个,进去友盟官网后我们按照下图进行选择. 接下来选择如下图 Next 这样我们便进入到了帮助文档 如果还没有友盟账号那么我们就需要注册一下了(点击图片中的注册即可) 注册成功并且登陆后我们需要按照操作获取Appkey 操作如图 NEXT 成功获取Appkey(复制下来,接下来会用到) 返回帮助文档 接下来是下载(安装)SDK,我么可以按照图片中的两种方法操作. 我选择了

JAVA:23种设计模式详解(转)

设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代 码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合理的运用 设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应,每一个模式描述了一个在我