Paper for Facebook image scroll in Xamarin.iOS

By February 12, 2014Blog

Paper for Facebook has some nice and neat features. One of them is scroll of an image using the tilt of the device.

Here is the implementation of such feature in Xamarin.iOS.

public override void ViewDidLoad ()
{
	base.ViewDidLoad ();
	
	// Perform any additional setup after loading the view, typically from a nib.
	mainScrollView.Bounces = false;
	mainScrollView.UserInteractionEnabled = false;

	var movingImageView = new UIImageView (UIImage.FromFile ("landscape.jpg"));
	mainScrollView.AddSubview (movingImageView);

	mainScrollView.ContentSize = new SizeF (movingImageView.Frame.Width, mainScrollView.Frame.Height);
	mainScrollView.ContentOffset = new PointF ((float)(mainScrollView.ContentSize.Width - View.Frame.Width) / 2.0f, 0);

	motionManager = new CMMotionManager ();
	motionManager.GyroUpdateInterval = 1 / 60.0;

	// this is how fast the image should move when rotate the device
	var motionMovingRate = 4;
	var shakeThreshold = 0.1;

	//get the max and min offset x value
	var maxXOffset = mainScrollView.ContentSize.Width - mainScrollView.Frame.Width;
	var minXOffset = 0;

	motionManager.StartGyroUpdates (NSOperationQueue.CurrentQueue, (CMGyroData gyroData, NSError error) => {
		if (Math.Abs (gyroData.RotationRate.y) >= shakeThreshold) 
		{
			var targetX = mainScrollView.ContentOffset.X - gyroData.RotationRate.y * motionMovingRate;

			if (targetX > maxXOffset)
						targetX = maxXOffset;
			else if (targetX < minXOffset)
						targetX = minXOffset;

			mainScrollView.ContentOffset = new PointF ((float)targetX, 0);
		}
	});
}

Download the source code and project from here.

Happy coding!