How to Pass Values to UILabel Objects in iOS 6 Storyboard

Perjan

Rate me:

0.00/5 (No votes)

19 Dec 2012CPOL6 min read

25.6K

How to pass values to UILabel objects in iOS 6 Storyboard

This simple tutorial will guide you through one of the problems you will encounter when you start in the iOS and Xcode world.

How to Pass Values to UILabel Objects in iOS 6

Passing values to UILabel in the iOS is one of the most common things that you will do when you develop iPhone or iPad apps. This is no issue when the UILabel is in the same viewController as the object that is changing UILabel's value. But things can get a little tricky when you try to pass values to a UILabel that is on another viewController. To help you achieve this thing and get an idea of how this process works, we created this simple tutorial that shows you how to pass values to UILabels in iOS 6 and earlier versions. We will create a simple Quotes App that will display a quote of 3 world’s top visionaries if you press a button with their name.

If you don’t have time to read this tutorial, you can download the source code on GitHub.

Download source

Setting Up the Project

In Xcode, start by creating a new project from File › New › New Project.

Select Single View Application, give it a name, for example QuotesApp.

Now we are ready to start. Just open the storyboards file. You can find it on the left. Now drag one ViewControllers from the objects pane on the lower right section of Xcode.

In order for these views to behave correctly and to manipulate them with code, we need some separate files:

DetailViewController.h
DetailViewController.m

To create these files: File › New › New File. Select Objective-C Class, name it DetailViewController and give it a subclass of UIViewController.

After creating a .h and a .m file, we need to change the class of the DetailViewController. To do so, you need to select the view and then in the Identity Inspector, set the Custom Class to DetailViewController.

Now, we need to prepare the UI. We will need 3 Round rect buttons, and 3 UILabels. After dragging 3 Round Rect buttons on the MainViewController, double click on each one and give them a name. We will rename it, Steve Jobs, Albert Einstein and Thomas Edison. You can play with the look of the buttons and the label in the Inspector Pane on the right.

Great, now let’s drag 2 Labels from the Objects Panel, one that will hold the name of the app, and another that will hold a subtitle. After that, you can play with font sizes and properties in the Attributes Inspector Pane. You can change the label text from there, or by double clicking on the label in the Storyboard. You can see these changes in the image above.

Great, now let's drag two Labels to the DetailViewController.

This object will change programmatically, based on the button you will choose. Now you need to expand this Label so it can accommodate the quote based on the button you have touched. And the other Label will display the name of the person that said the quote. Resize the quotes label to accommodate multiple lines of text, by dragging its edges.

After adding these two UILabels, you need to change the attributes of the quotes label in order to display multiple lines of text. To do so, select the quotes label, go to the Attributes Inspector, change the Line Breaks to Word Wrap and change the Lines to 0.

Great, well done. Now we need to connect these two views, so when the user taps a button, the DetailViewController will be Pushed on screen. Do do so, Segues come to our help. You can create a Segue by simply CTRL + dragging from a button to the DetailViewController. You need repeat this step for the other two buttons. After doing that, you need to give each Segue a name, or an Identifier.

You can do so, by clicking on the icon that is in the middle of the arrow connecting the two Views. After that, you can change the Identifier in the Attributes Panel. You can see in the image below.

Hooking Up Buttons and labels

Now that the storyboard is complete, we need a little bit of code and hook up these buttons and labels. Go to the Storyboard, select a button and then in the upper right corner, click on the icon that looks like a tuxedo. This will automatically split the screen in two parts, so you can simply hook the interface with the code.

To do so, CTRL + drag from the button to the .h file.

A little popup shows up, give the button a name, set the Connection to Action and Type to UIButton. Repeat this for the other two buttons. At the end, you should have a ViewController.h file that looks like this:

#import &lt;UIKit/UIKit.h&gt;
 
@interface ViewController : UIViewController
- (IBAction)buttonSteve:(UIButton *)sender;
- (IBAction)buttonAlbert:(UIButton *)sender;
- (IBAction)buttonThomas:(UIButton *)sender;
@end

Well done, you have hooked up the buttons to the code . Now let’s do the same thing for the quotes label and the author label. But this time in the popup, we will set the Connection as an Outlet.

We also need to create two NSString objects that will pass the values to the UILabel objects when the segue will be performed.

In the DetailViewController.h, things will look like this.

#import &lt;UIKit/UIKit.h&gt;
 
@interface DetailViewController : UIViewController
 
// These 2 NSString objects are created because it will pass the values to the UILabels
@property (weak, nonatomic) NSString *authorText;
@property (weak, nonatomic) NSString *quoteText;
 
// These are the outlets of the UILabels that we want to change based on the button selected
@property (weak, nonatomic) IBOutlet UILabel *author;
@property (weak, nonatomic) IBOutlet UILabel *quote;
 
@end

After creating these two NSString properties, we need to synthesize them in the .m file. So the file will look like this:

#import "DetailViewController.h"
 
@interface DetailViewController ()
 
@end
 
@implementation DetailViewController
 
// Synthesize of the 2 properties we created in the header file DetailViewController.h
@synthesize quoteText,authorText;
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // This will pass the values of authorText and quoteText
    // to author and quote UILabel every time the view will load
    self.author.text = self.authorText;
    self.quote.text = self.quoteText;
}
@end

Now comes the funny part, we need to write the code that will tell the DetailViewController what to display based on the button that is taped. Open ViewController.m and write the following code:

#import "DetailViewController.h"

By importing the .h file of the DetailViewController, now we know which properties are public in this viewController.

In the ViewController.m file, we need to implement the following method:

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    NSLog(@"prepare for segue from: %@",segue.identifier);
    if ([segue.identifier isEqualToString:@"fromSteve"]) {
        [segue.destinationViewController setQuoteText:@"If you haven't found it yet, 
          keep looking. Don't settle. As with all matters of the heart, you'll know when 
          you find it. And, like any great relationship, 
          it just gets better and better as the years roll on."];
        [segue.destinationViewController setAuthorText:@"Steve Jobs"];
 
    }else if ([segue.identifier isEqualToString:@"fromAlbert"]){
        [segue.destinationViewController setQuoteText:@"Learn from yesterday, 
           live for today, hope for tomorrow. The important thing is not to stop questioning."];
        [segue.destinationViewController setAuthorText:@"Albert Einstein"];
 
    }else if ([segue.identifier isEqualToString:@"fromThomas"]){
        [segue.destinationViewController setQuoteText:@"Opportunity is missed 
          by most people because it is dressed in overalls and looks like work."];
        [segue.destinationViewController setAuthorText:@"Thomas Edison"];
    }
}

At first, you may not comprehend this code but let me clear it up for you. We use the condition segue.identifier isEqualToString:@”Name of Segue Identifier” to get which button triggered this segue. Based on that, we set the setQuoteText and setAuthorText to the strings we want. Remember, the two objects are NSStrings that will pass their value to the specific UILabel.

Now one last thing that you must not forget: Every time you use Segues, you must embed the ViewControllers inside a Navigation Controller.

Select the ViewController on the Storyboard, go to Editor > Embed in > Navigation Controller. And you are done.

Run your project, and you should have a cool Quotes App, but most importantly, you will know from now on how to pass values to UILabel objects in OS 6 or earlier versions.

You can read the UIStoryboardSegue class reference here. You can read the UILabel class reference here.

You can download the source files on GitHub. I’ve added an icon and a load image in the source code. If you have any questions, I will answer them in the comments section.