How to design the content of a UIScrollView in a nib easily

Question

I have a scrollview which has to display a view larger than the available display area. I want to easily design the user interface without moving the embedded view up and down every time I have to do some changes. The problem is everything outside the visible area is invisible in IB.

Is there any switch or trick to make everything visible in IB?

Answer 1

UPDATE

I have posted another solution here which I think is simpler and better, and works in storyboards.

ORIGINAL

Create your scroll view in the nib with the appropriate superview, position, and size.

Next, create a completely separate, top-level UIView instance by dragging a UIView out of the palette and dropping it into the work area outside of any existing views. In the Attributes inspector, set the Size popup to “None” and make sure the Status Bar, Top Bar, and Bottom Bar are all set to None. Here's an example:

This new top-level view will be your content view. Give your view controller two outlets: scrollView and contentView:

@interface MyViewController

@property (nonatomic, weak) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIView *contentView;

@end

In the nib, wire up the scrollView outlet to the scroll view and wire up the contentView outlet to the content view.

Build your content view hierarchy inside the content view. Set its size as large as you need - it can be larger than 320x480 (as long as you have set all of its bars to None).

In your view controller's viewDidLoad, add contentView as a subview of scrollView and set scrollView.contentSize to the size of contentView:

@implementation MyViewController

@synthesize scrollView = _scrollView;
@synthesize contentView = _contentView;

- (void)viewDidLoad {
    [super viewDidLoad];
    [self configureScrollView];
}

- (void)configureScrollView {
    CGSize size = self.contentView.bounds.size;
    self.contentView.frame = CGRectMake(0, 0, size.width, size.height);
    [self.scrollView addSubview:self.contentView];
    self.scrollView.contentSize = size;

    // If you don't use self.contentView anywhere else, clear it here.
    self.contentView = nil;
    // If you use it elsewhere, clear it in `dealloc` and `viewDidUnload`.
}