MonoTouch infinite loop image scroll view

By July 24, 2012Blog

One of the clients wanted in the app a little feature for a menu system, something like a karusel, where specific menu items will be scrolled from side to side with a touch in an infinite loop.

I found out that it can be possible to do with a simple tweak to UIScrollView, handing the

scrollViewDidEndDecelerating from the UIScrollViewDelegate.

 

Guys from Monotouch team made the great job on this (as usual) and we have the delegate already available via built-in events, in this case DecelerationEnded.

So lets have a look at the implementation of the UIViewController class of some view, note we are adding the UI from the code, not from the nib file, just for simplicity. View has UIScrollView item and loads some images, last image is placed as the first one, then all images in the order and then first image as the last one.

Then the event for DecelerationEnded is handled to actually swap the position (fast – no animation) so user does not find out. For added more touch, the paging is enabled and of course the scroller is hidden, so it is not visible to the user where in the scrolling position he actually is.

 

public partial class ImageScrollViewController : UIViewController
	{
		#region Constructors
 
		// The IntPtr and initWithCoder constructors are required for items that need 
		// to be able to be created from a xib rather than from managed code
 
		public ImageScrollViewController (IntPtr handle) : base(handle)
		{
			Initialize p;lt;;span style="color: #000000;">();
		}
 
		[Export("initWithCoder:")]
		public ImageScrollViewController (NSCoder coder) : base(coder)
		{
			Initialize ();
		}
 
		public ImageScrollViewController () : base("ImageScrollViewController", null)
		{
			Initialize ();
		}
 
		void Initialize ()
		{
		}
 
		#endregion
 
		UIScrollView scrollView;
 
		public override void ViewDidLoad ()
		{
			base.ViewDidLoad ();
 
			scrollView = new UIScrollView (new RectangleF (0, 0, 320, 480));
			this.View.AddSubview (scrollView);
 
			// add the last image (image4) into the first position
			this.AddImageWithName ("Images/image4.jpg", 0);
 
			// add all of the images to the scroll view
			for (int i = 1; i < 5; i++) {
				this.AddImageWithName (string.Format ("Images/image{0}.jpg", i), i);
			}
 
			// add the first image (image1) into the last position
			this.AddImageWithName ("Images/image1.jpg", 5);
 
			scrollView.PagingEnabled = true;
			scrollView.Bounces = true;
			scrollView.DelaysContentTouches = true;
			scrollView.ShowsHorizontalScrollIndicator = false;
 
			scrollView.ContentSize = new System.Drawing.SizeF (1920, 480);
			scrollView.ScrollRectToVisible (new RectangleF (320, 0, 320, 480), true);
			scrollView.DecelerationEnded += HandleDecelerationEnded;
 
		}
 
		void HandleDecelerationEnded (object sender, EventArgs e)
		{
			if (scrollView.ContentOffset.X == 0) 
			{         
				scrollView.ScrollRectToVisible(new RectangleF(1280, 0, 320, 480), false);
			}    
			else if (scrollView.ContentOffset.X == 1600) 
			{         
				scrollView.ScrollRectToVisible(new RectangleF(320, 0, 320, 480), false);
			} 	
		}
 
		void AddImageWithName (string imageString, int position)
		{
			// add image to scroll view
			UIImage image = UIImage.FromFile (imageString);
			UIImageView imageView = new UIImageView (image);
 
			imageView.Frame = new System.Drawing.RectangleF (position * 320, 0, 320, 480);
 
			scrollView.AddSubview (imageView);
		}
	}

That is actually all there is to it. And github link: http://github.com/sichy/ImageScrollView

Happy coding!