CODEWITHSUNDEEP
iosobjective-cuiscrollviewinterface-builderuistoryboard
Remixed123
Remixed123

Reputation: 1585

Using interface builder to layout a scrolling view with images and text

I have a requirement in my app to display a bunch of information that includes both text and images. It will be quite long, so it will need to be scrollable to access all the content.

I know that I can achive this by programmatically adding different UILabels, UIImages etc to a UIScrollView. But this is a proof of concept, so I'm looking for something a little quicker than having to work out all the positioning and code required. The information is static anyway, and does not need to interact with code.

Is there a way to do this using the interface builder (storyboard or xib is fine)?

Upvotes: 3

Views: 1725

Answers (4)

Toastor
Toastor

Reputation: 8990

  • Just start a new project with a single view, it will come with a xib or storyboard for its single ViewController.

  • Create a UIView by dragging it into the workspace and place as many Labels, Images and UI Elements as you want.

  • Open the xib / storyboard and drag a UIScrollView in as your root VC's root view. Drag the view containing your layout into the scrollview, making it the scrollviews only subview.

Done (almost)!

If you launch your app at this point, you'll notice you can't scroll. That is because the scrollview is "too stupid" to adjust the size of its contentSize property on its own.

You'll need some code here, but it is only a tiny snippet and you won't need to touch it again:

Create a new Category on UIScrollView.

In your category's implementation, do:

@implementation UIScrollView (MyHandyCategory)

-(void)awakeFromNib {

   NSArray *subViews = [self subviews];
   UIView *contentView = [subViews objectAtIndex:0];
   [self setContentSize:contentView.frame.size];

}

@end

Done (for real this time)! This will check the size of the view your scrollview contains and ajust the contentSize after it has been initialized. You can change the size of your content view as you like, no need to play around with hardcoded values or even Interface Builder values!

Upvotes: 2

Xu Yin
Xu Yin

Reputation: 3940

you definitely can do that if you simply want a quick interface

1.> you might need to know how long is your scroll view, for example in my case, i set it to 1568

enter image description here

2.> Then i drag all the controls that will fit for the first 568 pixel view onto the scroll view and position them.

3.> Then change the Y value for that scroll view to something like - 500, so you can see the rest of the scroll view, and put everything you need there.

enter image description here

4.> After you have all your controls, and remember to set the frame back to 0,0,320,568

enter image description here

5.> last step, in your code, set SCROLLVIEW.contentSize = CGSizeMake(320, 1568);

I would still suggestion don't hard code all those values, but if you are looking for a quick way to do your interface, hope that gives you some ideas.

Upvotes: 6

Daniel
Daniel

Reputation: 9040

I would suggest UICollectionView. It's fairly straightforward. There's a good tutorial here:

http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12

Upvotes: 0

Wil Shipley
Wil Shipley

Reputation: 9533

If it’s just proof of concept I’d have a WebView and a local HTML page you load. Easy-peasy.

Upvotes: 0

Related Questions