How to: Use different views with a PageControl in MonoTouch

I’ve just started down the rocky road of iPhone development via MonoTouch. I suspect like many .net developers I’ve found the iPhone thang can be downright weird. One of the bloggers I’ve found helpful is Simon Says. One such post explains how to create a PageControl, http://simon.nureality.ca/?p=135. You know, that series of dots at the bottom of an iPhone view that allows you to move between pages of information. Although the post is great one thing still puzzled me, how do I shows pages of different views, i.e. if this was WinForms how would I can create different forms (Views) and show them as different pages? So first off, follow Simon’s post and get to the point where you should now have 10 pages each showing a label then;

NB. I’m no expert at this, if you know a better way to do something (or just spot a mistake) please let me know.

1. How do I get the PageControl to move between the pages?

Simon’s post allows you to ‘flick’ your way through the views and the PageControl reflects the changes, however if the user flicks the PageControl nothing happens.

In CreatePanel add the following event handler;

pageControl.TouchUpInside += HandlePageControlTouchUpInside;

void HandlePageControlTouchUpInside (object sender, EventArgs e)
        {
            // big assumption: the user moves the page control and after the control has set the current page this event is fired
            RectangleF toRect = new RectangleF(scrollView.Frame.Width * pageControl.CurrentPage, scrollView.Frame.Y, scrollView.Frame.Width, scrollView.Frame.Height);
            scrollView.ScrollRectToVisible(toRect, true);       
        }

2. Having 10 repeated Labels as Views is nice, but how do I use a mixture of my views I’ve created in the Interface Builder?

I recommend that for every different Form/View you want to display create a ViewController via File->New File->View with Definition Controller. In my example I created a controller called BertController.

Open the xib file in the Interface Builder (IB). You can drop whatever UI widgets onto the View, but for now let’s start by dropping a UILabel. In the weird world of imageiPhone development you need to create field to represent the UI element by creating an outlet, so in the Library viewer make sure the class representing the controller is selected (in my case BertController) and select the outlet tab. Create a new outlet to represent the label called, myLabel (or a much better name). Make sure the File Owner is selected and view the connection inspector’s outlet tab. Drag the name of you outlet to the label control. I know, it’s weird but you get used to it (so they tell me). Save and quit IB. Now we have something much more like our familiar forms class. So let’s expose the label control to the outside world (yes it’s bad practice but hey it wouldn’t be a tutorial without it). Open your controllers cs file (BertController.xib.cs) and add a property to it;

 

public UILabel MyLabel {
            get
            {
                return this.myLabel;   
            }
        }

See just like a normal form 😉

Now we have a view controller like our beloved form class we need to add it to the pages. Revisit CreatePanels in main and comment out all the for-loop and add the following function;

void AddView (string label)
        {
            RectangleF lastFrame = scrollView.Frame;
            PointF lastLocation = new PointF();
            lastLocation.X = lastFrame.Width * scrollView.Subviews.Count();
            lastFrame.Location = lastLocation;
            BertController controller = new BertController();
            controller.View.Frame = lastFrame;
            controller.MyLabel.Text = label;
            scrollView.AddSubview(controller.View);
        }

Pages on the iPhone are a series of frame-sized ‘views’. So to create them you need to know where in the virtual frame-set to add them. I think I’ve got the maths right, so if you use the function it should append a new BertController to the set. So add the following to CreatePanels;

AddView ("Well hello there 1");
AddView ("Well hello there 2");

imageThere you have it, two of our views/forms all handled by the PageControl. So if you wanted to add different Forms create a new View Controller and add the controllers view. Hope it helps.

Advertisements
This entry was posted in MonoTouch. Bookmark the permalink.

4 Responses to How to: Use different views with a PageControl in MonoTouch

  1. Shabby says:

    Hi, your tutorial is excactly what i was searching for.
    But i cant implement it.
    When I try to add a View with your AddView method it works only one time.
    Can you show the hole code at the end?
    Maybe i forgot something.

    Greetings

    • pauliom says:

      Strange, did you have the 10 labels working ok as I’d guess the wrong scroll view would be the problem? It’s been a long time but I’ll see if I can find the demo code

  2. Shabby says:

    Yes the 10 labels are working.
    It will be great if you find it.

    • pauliom says:

      Well I found the code but it was so old the project didn’t execute correctly against the emulator. So I created a new project and ran through the whole tutorial myself, it still works. One “mistake” I made was to not expand the label control so it looked like the same view appeared because both view’s label starts with ‘well’. Anyway I have the latest code now so once I find somewhere to post it I shall do.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s