Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

iOS Gesture Recognition and Animation with Xamarin

DZone's Guide to

iOS Gesture Recognition and Animation with Xamarin

·
Free Resource

In the previous post, we looked at Android gesture recognition and animations. This post completes the picture by looking at the same features in iOS. Touch gestures and animations are really cool experiences for users, and iOS ships them out of the box because it is both touch-first and touch-centric, and touch naturally leads to rich, immersive animations.

As with Android, Xamarin.iOS very closely mirrors the native Objective C API, so it should be very easy to port the example code below to a native iOS application, should the need arise.

Gesture Recognition

Every view (UIResponder subclass) on iOS has built-in support for low-level touch recognition through thetouchesBegantouchesMoved, and touchesEnded methods. These methods manipulate a collection of UITouch objects that require a lot of additional processing to detect useful and simple gestures. Fortunately, there is a family of classes derived from UIGestureRecognizer that can recognize common gestures such as swipe, double tap, pinch, rotate, and others. You can even add gesture recognizers to your storyboard, although the example below will do this directly through code.

The following example is a view controller that recognizes a right-swipe gesture:

public class MainViewController : UIViewController
{
  	public override void ViewDidLoad ()
  	{
    		base.ViewDidLoad ();

    		View.BackgroundColor = UIColor.White;
    		UISwipeGestureRecognizer recognizer = new UISwipeGestureRecognizer (OnSwipeDetected);
    		recognizer.Direction = UISwipeGestureRecognizerDirection.Right;
    		View.AddGestureRecognizer (recognizer);
  	}

  	private void OnSwipeDetected ()
  	{
    // TODO
  	}
}

That’s really all there’s to it — we detect the gesture and act accordingly, e.g. by moving to the next view or removing some element from the screen in an animated fashion, which is the subject of the next section.

Animation

On the one hand, it’s really easy to perform animations on iOS, thanks to the UIView built-in support for animating certain properties, such as alpha, frame, and bounds. On the other hand, there is a rich system (Core Animation) for more sophisticated effects, which is considerably more complex.

The following example is a simple UIView animation that fades out a view while moving it off-screen. This can work well in combination with the gesture recognizer from the following section, which detects a swipe-right gesture that could mean “remove this thing off screen”.

// In the following code, _switch is an instance of UISwitch
UIView.Animate (2.0, () => {
  	_switch.Alpha = 0.0f;
  	_switch.Frame = new RectangleF(
    		new PointF(_switch.Frame.Location.X + 200, _switch.Frame.Location.Y),
    		_switch.Frame.Size);
});

Note that there’s no need to declare animation-related classes — you simply provide a delegate (a block in the Objective C version, [UIView animateWithDuration:animations:]) that assigns the desired values to the supported animatable properties. The animation system then takes care of animating their values across the specified duration.

Showing a swipe-right gesture that leads to a switch moving off the screen and fading out.

That’s how easy it is to add animations and gesture detection to your iOS applications using Xamarin. You should explore the official iOS and Xamarin documentation to learn more about Core Animation and gesture recognizers.

I am posting short links and updates on Twitter as well as on this blog. You can follow me: @goldshtn

Topics:

Published at DZone with permission of Sasha Goldshtein, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}