Add a UIView to a ScrollView for paging

Question

How can I have a UIScollView content be the content from a UIView ? I want to design the app layout in a UIView and then lay that view into a UIScrollView that is connected to a UIPageControl for pagination. So when the user swipes to the side, the next view is displayed. I have a sort of idea on how I would accomplish this, but I want to get it right without wasting a lot of time.

Heres my DetailViewController:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;

using UIKit;
using Foundation;
using CoreGraphics;
using CloudKit;

namespace RecordStorePro
{
    public partial class DetailViewController : UIViewController
    {
        public Record DetailRecord { get; set; }

        public DetailViewController (IntPtr handle) : base (handle)
        {
        }

        public void SetDetailRecord (Record record)
        {
            if (DetailRecord != record) {
                DetailRecord = record;

                // Update the view
                ConfigureView ();
            }
        }

        void ConfigureView ()
        {
            // Update the user interface for the detail item
            if (IsViewLoaded && DetailRecord != null) {
                //label.Text = DetailRecord.Album;
            }
        }

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

            NavigationItem.SetLeftBarButtonItem (new UIBarButtonItem(UIBarButtonSystemItem.Stop, (sender, args) => {
                NavigationController.PopViewController(true);
            }), true);

            ConfigureView ();

            //this.scrollview.BackgroundColor = UIColor.Gray;

            // set pages and content size
            scrollview.ContentSize = new SizeF ((float)(scrollview.Frame.Width * 2), (float)(scrollview.Frame.Height));
            //this.scrollview.AddSubview ();

            this.scrollview.Scrolled += ScrollEvent;
        }

        private void ScrollEvent(object sender, EventArgs e)
        {
            this.pagecontrol.CurrentPage = (int)System.Math.Floor(scrollview.ContentOffset.X / this.scrollview.Frame.Size.Width);
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

So when I swipe the screen, I want a subview that contains some labels and textfields to come in and replace the original labels and textfields. It works properly so far except I can't figure out how to add the subview, and make it size appropriately to different screen sizes.

EDIT

Heres the problem Im facing now, the views laying in the ScrollView act funny and are about 44f too tall so they let me drag up and down. i tried setting all kinds of constraints as well as manually setting them to -44 smaller with no help. heres a picture of the problem now:

Heres the screenshot of my constraints set.

View A:

View B:

ScrollView:

Nib view:

Answer 1

To do this, you might want to try these steps:

1. The view that shows the first page will be called View A . The view that shows the second page will be called View B .
2. Add both views to the Scroll View.
3. Control -drag from View A to the Scroll View in the sidebar.
4. Hold down Shift and select Top Space to Superview , Bottom Space to Superview , and Leading Space to Superview . Next, press Return to add those constraints.
5. Make sure those constraints' constants are set to 0 .
6. Control -drag from View B to the Scroll View in the sidebar.
7. Hold down Shift and select Top Space to Superview , Bottom Space to Superview , and Trailing Space to Superview . Next, press Return to add those constraints.
8. Control -drag from View A to View B in the sidebar.
9. Select Horizontal Spacing . Make sure its constant is 0 and its Second Item is View A.Trailing and its First Item is View B.Leading .
10. Control -drag from View A to View B in the sidebar. Select Equal Widths . Make sure the Constant is 0 .
11. Control -drag from View A to the Scroll View in the sidebar. Select Equal Widths . Make sure the constant is set to 0 .
12. In the inspector, check “Paging Enabled.”

Answer 2

Adding subScrollView with no pagingEnabled to each page and controls into subScrollView works! If you add controls directly to scrollview with paging enabled, it seems gesture recogniser's first responder is always scrollview so your controls never gets the event and behave like a disabled!

UIScrollView has a property called “pagingEnabled”

In Interface Builder, resize the scroll view to allow for some space below it for the page control. Next, drag in a UIPageControl from the library, centered below the scroll view. Resize the UIPageControl to take up the full width of the view.