How to Create UILabel inside of UIScrollView – programmatically

Goran on
Tagged with

xcode_1title

This short tutorial will show you how to programmatically create UILabel inside of UIScrollView. UILabel will contain long text and we’ll set UIScrollView content size to fit UILabel size.
Create new project (view based application) and inside your main view controller find method viewDidLoad, tha’s where we going to add our code. First we need to allocate and initialize scroll view and label:

// alocate and initialize scroll
 UIScrollView *myScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 460.0f)];
 // alocate and initialize label
 UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 460.0f)];

Scroll view and label have height of 460px since status bar is enabled. In case you disabled status bar in project .plist file set heights to 480px. Add some long text to our label, we need it so our scroll view have content size higher than current height, that way we’ll get some content to scroll. Set line break mode of our label to word wrap and set number of lines to zero. After all is set call sizeToFit method of UILabel to set label height.

// add long text to label
 myLabel.text = @"Lorem ipsum... long text here";
 // set line break mode to word wrap
 myLabel.lineBreakMode = UILineBreakModeWordWrap;
 // set number of lines to zero
 myLabel.numberOfLines = 0;
 // resize label
 [myLabel sizeToFit];

Scroll view needs update of its content size since label is now (if you added long text to it) higher than scroll view, so we set contentSize of our scroll view to same width as it was before and to height of label. Add label to scroll view, add scroll view to main view and release label and scroll view.

// set scroll view size
 myScroll.contentSize = CGSizeMake(myScroll.contentSize.width, myLabel.frame.size.height);
 // add myLabel
 [myScroll addSubview:myLabel];
 // add scroll view to main view
 [self.view addSubview:myScroll];
 // release label and scroll view
 [myLabel release];
 [myScroll release];

This piece of code is really simple, but very useful if you want to fill UIScrollView with some text and automatically adjust it’s content size to corresponding UILabel size.

Thanks for reading!

Tagged with
2 comments
  1. Elies on:

    Also, I almost foorgt to add: but web views scroll as well as scroll views, so you will have to come up with a technique to disable scrolling on the UIWebView so that only the UIScrollView responds to touches. After trying many of the suggestions I found on the web to no avail, I discovered that by setting userContentEnabled to NO on the web view solved my problem. Here’s the part of my view controller’s viewDidLoad: method where I stuff the content HTML with javascript into the web view, then turn off scrolling. NOTE: this will probably disable any links you have in the HTML but since I am only using this to format content, this works great for my purposes.NSString *html = [NSString stringWithFormat: @"%@",[entity objectForKey: @"bio"]];[bioWebView loadHTMLString:html baseURL:nil];bioWebView.userInteractionEnabled = NO;

    • Asad on:

      I got exactly the same plobrem when I modified Apple’s PhotoScroller for a pdf reader.I don’t quite understand what you mean the page size is an integer multiple of your content size . Is the content size the screen size for my page displaying? Is the page size actually the total size of all the pages? If that is the case, does that mean my number of page is even will not cause the plobrem if all the page has the same size?Please advise, thanks

Leave Your Comment

You’re more than welcome to leave your own comment!

Just please, pretty please: don’t spam. Thank you :)