{"id":17950,"date":"2015-04-20T00:28:28","date_gmt":"2015-04-19T18:58:28","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=17950"},"modified":"2015-04-20T00:28:28","modified_gmt":"2015-04-19T18:58:28","slug":"paging-with-uiscreenedgepangesturerecognizer","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/paging-with-uiscreenedgepangesturerecognizer\/","title":{"rendered":"Paging With UIScreenEdgePanGestureRecognizer"},"content":{"rendered":"<h2 class=\"western\"><span style=\"color: #006837\"><span style=\"font-family: Bitter, serif\"><span style=\"font-size: x-large\"><b>How To Use UIScreenEdgePanGestureRecognizer for Paging in iPhone 5<\/b><\/span><\/span><\/span><\/h2>\n<p>Before we get started, let me give you a brief overview of how you use UIScreenEdgePanGestureRecognizers and why they\u2019re so handy.<br \/>\nUsing UIScreenEdgePanGestureRecognizers is extremely simple. You just perform the following steps:<\/p>\n<ol>\n<li>\n<p align=\"LEFT\"><em><span style=\"color: #006837\"><span style=\"font-family: inherit\"><span style=\"font-size: small\"><b>Create a screen edge pan gesture recognizer<\/b><\/span><\/span><\/span><\/em><span style=\"color: #000000\"><span style=\"font-family: inherit\"><span style=\"font-size: small\">. When you create a gesture recognizer(screen edge pan gesture), you specify a callback method so the gesture recognizer can send you updates when the gesture starts, changes, or ends.This tutorial also assumes that you know how to use Interface Builder to add new objects to a view and connect outlets between your code <\/span><\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"LEFT\"><em><span style=\"color: #006837\"><span style=\"font-family: inherit\"><span style=\"font-size: small\"><b>Add the screen edge pan gesture recognizer to a view.<\/b><\/span><\/span><\/span><\/em><span style=\"color: #000000\"><span style=\"font-family: inherit\"><span style=\"font-size: small\">\u00a0Each gesture recognizer is associated with one (and only one) view. When a touch occurs within the bounds of that view, the gesture recognizer will look to see if it matches the type of touch it\u2019s looking for, and if a match is found it will notify the callback method.<\/span><\/span><\/span><\/p>\n<p align=\"LEFT\"><span style=\"color: #000000\"><span style=\"font-family: inherit\"><span style=\"font-size: small\">This tutorial also assumes that you know how to use Interface Builder to add new objects to a view and connect outlets between your code<\/span><\/span><\/span><\/p>\n<\/li>\n<\/ol>\n<h2><\/h2>\n<h2 class=\"western\"><span style=\"color: #006837\"><span style=\"font-family: Bitter, serif\"><span style=\"font-size: x-large\"><b>Paging With Screen Edge Pan Gesture\u00a0Demo Video<\/b><\/span><\/span><\/span><\/h2>\n<p>In this sample video you can see how UIScreenPanGesture will work to implement paging.<\/p>\n<p><iframe loading=\"lazy\" width=\"625\" height=\"469\" src=\"https:\/\/www.youtube.com\/embed\/-WJri7elTkY?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2 class=\"western\"><span style=\"color: #006837\"><span style=\"font-family: Bitter, serif\"><span style=\"font-size: x-large\"><b>Getting Started<\/b><\/span><\/span><\/span><\/h2>\n<p>First download the starter project for this PagingWithUIScreenEdgePanGesture\u00a0tutorial here\u00a0<a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/04\/SampleProject-UIScreenEdgePanGesture.zip\">SampleProject-UIScreenEdgePanGesture<\/a>. This project provides a basic UI to get you started \u2013 no UIScreenEdgePanGesture code has been added yet.<\/p>\n<h2 class=\"western\"><span style=\"color: #006837\"><span style=\"font-family: Bitter, serif\"><span style=\"font-size: x-large\"><b>Paging With ScreenEdgePanGesture Code<\/b><\/span><\/span><\/span><\/h2>\n<p>Make the following changes to ViewController.m:<\/p>\n<p>1. First you need to add the left and right view for paging. Add this to the top of <em>ViewController.m<\/em>, just underneath all the #import lines.<\/p>\n<div style=\"font-size: 13px\">\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #400080\">ProfileView<\/span> <span style=\"color: #002200\">*<\/span>leftProfileView;<\/pre>\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #400080\">ProfileView<\/span> <span style=\"color: #002200\">*<\/span>rightProfileView;<\/pre>\n<\/div>\n<p>2. Create a UIScreenEdgePanGestureRecognizer in your project. We requires two<br \/>\nUIScreenEdgePanGestureRecognizer objects for left and right edge of screen.\u00a0Add this to the top of <em>ViewController.m<\/em>, just underneath all the #import lines.<\/p>\n<div style=\"font-size: 13px\">\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #400080\">UIScreenEdgePanGestureRecognizer<\/span> <span style=\"color: #002200\">*<\/span>leftEdgeGesture;<\/pre>\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #400080\">UIScreenEdgePanGestureRecognizer<\/span> <span style=\"color: #002200\">*<\/span>rightEdgeGesture;<\/pre>\n<\/div>\n<p>3. Create left &amp; right edge gesture in -addGestureRecognizer method. Add\u00a0these gestures\u00a0to your self.view, so that it will work across the entire iPhone screen.<\/p>\n<p><span style=\"color: #11740a;font-style: italic\">\/\/ Replace addGestureRecognizer\u00a0with the following<\/span><\/p>\n<div style=\"font-size: 13px\">\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #002200\">-<\/span> <span style=\"color: #002200\">(<\/span>void<span style=\"color: #002200\">)<\/span>addGestureRecognizer\r\n<span style=\"color: #002200\">{<\/span>\r\n    leftEdgeGesture <span style=\"color: #002200\">=<\/span> <span style=\"color: #002200\">[<\/span><span style=\"color: #002200\">[<\/span><span style=\"color: #400080\">UIScreenEdgePanGestureRecognizer<\/span> alloc<span style=\"color: #002200\">]<\/span>initWithTarget<span style=\"color: #002200\">:<\/span>self \r\n    action<span style=\"color: #002200\">:<\/span><span style=\"color: #a61390\">@selector<\/span><span style=\"color: #002200\">(<\/span>handleLeftEdgeGesture:<span style=\"color: #002200\">)<\/span><span style=\"color: #002200\">]<\/span>;\r\n    leftEdgeGesture.edges <span style=\"color: #002200\">=<\/span> <span style=\"color: #400080\">UIRectEdgeLeft<\/span>;\r\n    leftEdgeGesture.delegate <span style=\"color: #002200\">=<\/span> self;\r\n    <span style=\"color: #002200\">[<\/span>self.view addGestureRecognizer: leftEdgeGesture<span style=\"color: #002200\">]<\/span>;\r\n\r\n    rightEdgeGesture <span style=\"color: #002200\">=<\/span> <span style=\"color: #002200\">[<\/span><span style=\"color: #002200\">[<\/span><span style=\"color: #400080\">UIScreenEdgePanGestureRecognizer<\/span> alloc<span style=\"color: #002200\">]<\/span>initWithTarget<span style=\"color: #002200\">:<\/span>self \r\n    action<span style=\"color: #002200\">:<\/span><span style=\"color: #a61390\">@selector<\/span><span style=\"color: #002200\">(<\/span>handleRightEdgeGesture:<span style=\"color: #002200\">)<\/span><span style=\"color: #002200\">]<\/span>;\r\n    rightEdgeGesture.edges <span style=\"color: #002200\">=<\/span> <span style=\"color: #400080\">UIRectEdgeLeft<\/span>;\r\n    rightEdgeGesture.delegate <span style=\"color: #002200\">=<\/span> self;\r\n    <span style=\"color: #002200\">[<\/span>self.view addGestureRecognizer: rightEdgeGesture<span style=\"color: #002200\">]<\/span>;\r\n<span style=\"color: #002200\">}<\/span>\r\n<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<p>4. Handle Left UIScreenEdgePanGesture state. The complete logic to get other profile after swiping either through left or right edge is given\u00a0below. Uncomment the lines of code from before:<\/p>\n<div style=\"font-size: 13px\">\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #002200\">-<\/span> <span style=\"color: #002200\">(<\/span>void<span style=\"color: #002200\">)<\/span>handleLeftEdgeGesture<span style=\"color: #002200\">:<\/span><span style=\"color: #002200\">(<\/span><span style=\"color: #a61390\">UIScreenEdgePanGestureRecognizer*<\/span><span style=\"color: #002200\">)<\/span>gesture\r\n<span style=\"color: #002200\">{\r\n\r\n<\/span>    \/\/These Lines below are commented\r\n    CGPoint translation =  <span style=\"color: #002200\">[<\/span>gesture translationInView:gesture.view<span style=\"color: #002200\">]<\/span>;\r\n    CGFloat width = self.view.frame.size.width;\r\n    CGFloat percent = MAX<span style=\"color: #002200\">(<\/span> <span style=\"color: #002200\">[<\/span>gesture translationInView:self.view <span style=\"color: #002200\">]<\/span>.x, <span style=\"color: #2400d9\">0<\/span><span style=\"color: #002200\">)<\/span>\/width;\r\n    <span style=\"color: #a61390\">switch<\/span><span style=\"color: #002200\">(<\/span>gesture.state<span style=\"color: #002200\">)<\/span> {\r\n      <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateBegan:\r\n      { \r\n       <span style=\"color: #a61390\">if<\/span>(--currentIndex &lt;<span style=\"color: #2400d9\">0<\/span>){\r\n          <span style=\"color: #a61390\">return<\/span>;\r\n         }\r\n         CGRect leftProfileViewFrame = CGRectMake(-screenWidth,0,screenWidth,screenHeight);\r\n         leftProfileView = [[ProfileView alloc]initWithFrame:leftProfileViewFrame\r\n                                                            withArray:photosUrlArray\r\n                                                           currentIndex:currentIndex];\r\n         [self.view addSubview:leftProfileView];\r\n         UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:leftProfileView.bounds];\r\n         leftProfileView.layer.masksToBounds = NO;\r\n         leftProfileView.layer.shadowColor = [UIColor blackColor].CGColor;\r\n         leftProfileView.layer.shadowOffset = CGSizeMake(<span style=\"color: #2400d9\">0.0<\/span>f, <span style=\"color: #2400d9\">5.0<\/span>f);\r\n         leftProfileView.layer.shadowOpacity = <span style=\"color: #2400d9\">1<\/span>;\r\n         leftProfileView.layer.shadowPath = shadowPath.CGPath;\r\n         }\r\n         <span style=\"color: #a61390\">break<\/span>;\r\n       <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateChanged:\r\n         <span style=\"color: #a61390\">if<\/span>(currentIndex &lt;<span style=\"color: #2400d9\">0<\/span>){\r\n         <span style=\"color: #a61390\">return<\/span>;\r\n         }\r\n         centerProfileView.frame = CGRectMake(<span style=\"color: #2400d9\">0<\/span> + translation.x\/<span style=\"color: #2400d9\">3<\/span>, <span style=\"color: #2400d9\">0<\/span>, screenWidth, <span style=\"color: #2400d9\">480<\/span>);\r\n         leftProfileView.frame = CGRectMake(-screenWidth + translation.x, <span style=\"color: #2400d9\">0<\/span>, screenWidth,<span style=\"color: #2400d9\">480<\/span>);\r\n         [leftProfileView setUserInteractionEnabled:NO];\r\n         [self.view setUserInteractionEnabled:NO];\r\n         <span style=\"color: #a61390\">break<\/span>;\r\n       <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateEnded:\r\n        <span style=\"color: #a61390\">if<\/span>(currentIndex &lt;<span style=\"color: #2400d9\">0<\/span>){\r\n          currentIndex = <span style=\"color: #2400d9\">0<\/span>;\r\n           <span style=\"color: #a61390\">return<\/span>;\r\n        }\r\n        <span style=\"color: #a61390\">if<\/span>(percent &gt; <span style=\"color: #2400d9\">0.5<\/span> || fabs([gesture velocityInView:self.view].x) &gt; <span style=\"color: #2400d9\">1000<\/span>)\r\n        {           \r\n         [UIView animateWithDuration:<span style=\"color: #2400d9\">0.2<\/span> delay:<span style=\"color: #2400d9\">0.0<\/span> \r\n                                              options:UIViewAnimationOptionTransitionNone\r\n                                              animations:^{         \r\n         centerProfileView.frame=CGRectMake(screenWidth,self.view.frame.origin.y,screenWidth,screenHeight);\r\n         leftProfileView.frame=CGRectMake(<span style=\"color: #2400d9\">0<\/span>, self.view.frame.origin.y,screenWidth,screenHeight);\r\n         }completion:^ (BOOL completed) {\r\n          [centerProfileView removeFromSuperview];\r\n          centerProfileView = leftProfileView;\r\n         }];\r\n         }<span style=\"color: #a61390\">else<\/span>{\r\n          [UIView animateWithDuration:0.2 delay:0.0 options:\r\n          UIViewAnimationOptionTransitionNone animations:^{\r\n          centerProfileView.frame=CGRectMake(<span style=\"color: #2400d9\">0<\/span> , self.view.frame.origin.y,screenWidth,screenHeight);\r\n          leftProfileView.frame=CGRectMake(-screenWidth, self.view.frame.origin.y,screenWidth,screenHeight);\r\n          } completion:^ (BOOL completed) { \r\n          [leftProfileView removeFromSuperview];\r\n          leftProfileView = nil;\r\n          currentIndex++;\r\n          }];\r\n         }\r\n          [leftProfileView setUserInteractionEnabled:YES];\r\n          [self.view setUserInteractionEnabled:YES];\r\n          <span style=\"color: #a61390\">break<\/span>;\r\n         <span style=\"color: #a61390\">default<\/span>:\r\n          NSLog(@\"unhandled state for gesture=%@\", gesture);\r\n    }\r\n    \r\n<span style=\"color: #002200\">}<\/span>\r\n<\/pre>\n<\/div>\n<p>5. Handle Right UIScreenEdgePanGesture state.Uncomment the lines of code from before:<\/p>\n<div style=\"font-size: 13px\">\n<pre class=\"objc\" style=\"font-family: monospace\"><span style=\"color: #002200\">-<\/span> <span style=\"color: #002200\">(<\/span>void<span style=\"color: #002200\">)<\/span>handleRightEdgeGesture<span style=\"color: #002200\">:<\/span><span style=\"color: #002200\">(<\/span><span style=\"color: #a61390\">UIScreenEdgePanGestureRecognizer*<\/span><span style=\"color: #002200\">)<\/span>gesture\r\n<span style=\"color: #002200\">{\r\n\r\n<\/span> \/\/ These lines below are commented\r\n    CGPoint translation =  <span style=\"color: #002200\">[<\/span>gesture translationInView:gesture.view<span style=\"color: #002200\">]<\/span>;\r\n    CGFloat width = self.view.frame.size.width;\r\n    CGFloat percent = MAX<span style=\"color: #002200\">(<\/span> <span style=\"color: #002200\">[<\/span>-gesture translationInView:self.view <span style=\"color: #002200\">]<\/span>.x, <span style=\"color: #2400d9\">0<\/span><span style=\"color: #002200\">)<\/span>\/width;\r\n    <span style=\"color: #a61390\">switch<\/span><span style=\"color: #002200\">(<\/span>gesture.state<span style=\"color: #002200\">)<\/span> {\r\n      <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateBegan:\r\n      { \r\n       <span style=\"color: #a61390\">if<\/span>(++currentIndex&gt;=[photosUrlArray count]){\r\n          <span style=\"color: #a61390\">return<\/span>;\r\n         }\r\n         CGRect rightProfileViewFrame = CGRectMake(screenWidth , 0, screenWidth, screenHeight);\r\n         rightProfileView = [[ProfileView alloc]initWithFrame:rightProfileView\r\n                                                            withArray:photosUrlArray\r\n                                                           currentIndex:currentIndex];\r\n         [self.view addSubview:rightProfileView];\r\n         UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:rightProfileView.bounds];\r\n         rightProfileView.layer.masksToBounds = NO;\r\n         rightProfileView.layer.shadowColor = [UIColor blackColor].CGColor;\r\n         rightProfileView.layer.shadowOffset = CGSizeMake(<span style=\"color: #2400d9\">0.0<\/span>f, <span style=\"color: #2400d9\">5.0<\/span>f);\r\n         rightProfileView.layer.shadowOpacity = <span style=\"color: #2400d9\">1<\/span>;\r\n         rightProfileView.layer.shadowPath = shadowPath.CGPath;\r\n         }\r\n         <span style=\"color: #a61390\">break<\/span>;\r\n       <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateChanged:\r\n         <span style=\"color: #a61390\">if<\/span>(currentIndex&gt;=[photosUrlArray count]){\r\n         <span style=\"color: #a61390\">return<\/span>;\r\n         }\r\n         centerProfileView.frame = CGRectMake(<span style=\"color: #2400d9\">0<\/span> + translation.x\/<span style=\"color: #2400d9\">3<\/span>, <span style=\"color: #2400d9\">0<\/span>, screenWidth, <span style=\"color: #2400d9\">480<\/span>);\r\n         rightProfileView.frame = CGRectMake(screenWidth + translation.x, <span style=\"color: #2400d9\">0<\/span>, screenWidth,<span style=\"color: #2400d9\">480<\/span>);\r\n         [rightProfileView setUserInteractionEnabled:NO];\r\n         [self.view setUserInteractionEnabled:NO];\r\n         <span style=\"color: #a61390\">break<\/span>;\r\n       <span style=\"color: #a61390\">case<\/span> UIGestureRecognizerStateEnded:\r\n        <span style=\"color: #a61390\">if<\/span>(currentIndex&gt;=[photosUrlArray count]){\r\n          currentIndex = [photosUrlArray count]-<span style=\"color: #2400d9\">1<\/span>;\r\n           <span style=\"color: #a61390\">return<\/span>;\r\n        }\r\n        <span style=\"color: #a61390\">if<\/span>(percent &gt; <span style=\"color: #2400d9\">0.5<\/span> || fabs([gesture velocityInView:self.view].x) &gt; <span style=\"color: #2400d9\">1000<\/span>)\r\n        {            \r\n         [UIView animateWithDuration:<span style=\"color: #2400d9\">0.2<\/span> delay:<span style=\"color: #2400d9\">0.0<\/span> \r\n                                              options:UIViewAnimationOptionTransitionNone\r\n                                              animations:^{         \r\n         centerProfileView.frame=CGRectMake(-screenWidth,self.view.frame.origin.y,screenWidth,screenHeight);\r\n         rightProfileView.frame=CGRectMake(<span style=\"color: #2400d9\">0<\/span>, self.view.frame.origin.y,screenWidth,screenHeight);\r\n         }completion:^ (BOOL completed) {\r\n          [centerProfileView removeFromSuperview];\r\n          centerProfileView = rightProfileView;\r\n         }];\r\n         }<span style=\"color: #a61390\">else<\/span>{\r\n          [UIView animateWithDuration:0.2 delay:0.0 options:\r\n          UIViewAnimationOptionTransitionNone animations:^{\r\n          centerProfileView.frame=CGRectMake(<span style=\"color: #2400d9\">0<\/span> , self.view.frame.origin.y,screenWidth,screenHeight);\r\n          rightProfileView.frame=CGRectMake(screenWidth, self.view.frame.origin.y,screenWidth,screenHeight);\r\n          } completion:^ (BOOL completed) { \r\n          [rightProfileView removeFromSuperview];\r\n          rightProfileView = nil;\r\n          currentIndex--;\r\n          }];\r\n         }\r\n          [rightProfileView setUserInteractionEnabled:YES];\r\n          [self.view setUserInteractionEnabled:YES];\r\n          <span style=\"color: #a61390\">break<\/span>;\r\n         <span style=\"color: #a61390\">default<\/span>:\r\n          NSLog(@\"unhandled state for gesture=%@\", gesture);\r\n    }\r\n    \r\n<span style=\"color: #002200\">}<\/span>\r\n<\/pre>\n<\/div>\n<h2 class=\"western\"><span style=\"color: #006837\"><span style=\"font-family: Bitter, serif\"><span style=\"font-size: x-large\"><b>Where To Go From Here?<\/b><\/span><\/span><\/span><\/h2>\n<p>You can download the completed project from <a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/04\/PagingWith-UIScreenEdgePanGestureRecognizer.zip\">here<\/a>.<\/p>\n<p>Note: If UI does not look good in iPhone 6 or 6 plus then use size classes, autolayout\u00a0&amp; @2x images to make it fit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Use UIScreenEdgePanGestureRecognizer for Paging in iPhone 5 Before we get started, let me give you a brief overview of how you use UIScreenEdgePanGestureRecognizers and why they\u2019re so handy. Using UIScreenEdgePanGestureRecognizers is extremely simple. You just perform the following steps: Create a screen edge pan gesture recognizer. When you create a gesture recognizer(screen edge [&hellip;]<\/p>\n","protected":false},"author":169,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":25},"categories":[1400],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/17950"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/169"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=17950"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/17950\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=17950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=17950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=17950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}