One of the most popular user experiences on the iPhone is the home screen and how you can slide “pages” into view with all the snappy behaviors. Luckily with the UIScrollViewer control and MonoTouch this is all super simple to implement.

I am going to show you how to put a UIScrollViewer on your view and populate it with 10 labels that will be used for 10 views of which we can scroll. In a real world application you could construct anything you wish in these 10 pages. You could even load new views, with view controller’s.

In a resource hungry application, if these views are too heavy to populate fully, you could easily lazy-load them. You would do this by loading the page previous to the current page, and the page after the current page. This way when you scroll they are visible and as you move pages, pages are dynamically loaded.

In this tutorial we will stay simple with labels to get the points across on what is needed to make this technique work.

We will put the index number on the label as well as alternating colour’s of red and blue to easily see our scrolling. Let’s get started!

First double click your .xib file of the view you wish edit and Interface Builder will be launched. Drag a Scroll Viewer and Page Control on to your view.

Create both a scrollView and pageControl IBOutlet on your AppDelegate  or ViewController depending on what view you are editing.

Connect the 2 IBOutlet’s to the actual controls.

Enable paging on the Scroll Viewer. This will give the Scroll Viewer the snap effect the home screen has. Disable horizontal and vertical to hide the scroll bars.

In our AppDelegate or ViewController we are going to create a new method called CreatePanels. This method will populate our Scroll Viewer with 10 items that we can drag our finger to slide into view like the home screen.

We use the Scroll Viewer’s frame to calculate how big each label should be to consume the entire visible area of the Scroll Viewer. We position all of the views that go in the Scroll Viewer with Scroll Viewer width * the counter.

[csharp]
private void CreatePanels()
{
scrollView.Scrolled += ScrollViewScrolled;

int count = 10;
RectangleF scrollFrame = scrollView.Frame;
scrollFrame.Width = scrollFrame.Width * count;
scrollView.ContentSize = scrollFrame.Size;

for (int i=0; i<count; i++)
{
UILabel label = new UILabel();
label.TextColor = UIColor.Black;
label.TextAlignment = UITextAlignment.Center;
label.Text = i.ToString();

if (i % 2 == 0)
label.BackgroundColor = UIColor.Red;
else
label.BackgroundColor = UIColor.Blue;

RectangleF frame = scrollView.Frame;
PointF location = new PointF();
location.X = frame.Width * i;

frame.Location = location;
label.Frame = frame;

scrollView.AddSubview(label);
}

pageControl.Pages = count;
}
[/csharp]

The Page Control is used to allow us to display to the user which page we are currently viewing in the Scroll Viewer. We use the event we hooked up above to alter the current page on the Page Control when the Scroll Viewer is scrolled to a new “page”. The page control is the same control you see on the home screen which displays the little white dots indicating which page you are looking at.

[csharp]
private void ScrollViewScrolled (object sender, EventArgs e)
{
double page = Math.Floor((scrollView.ContentOffset.X – scrollView.Frame.Width / 2) / scrollView.Frame.Width) + 1;

pageControl.CurrentPage = (int)page;
}
[/csharp]

And there we have it. A user interface that behaves exactly as the home screen scrolling effect!

Please retweet and feel free to follow me @simongui on Twitter at http://www.twitter.com/simongui