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 UILabel
s 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.
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 UILabel
s. 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 Label
s 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 UILabel
s, 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 <UIKit/UIKit.h>
@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 <UIKit/UIKit.h>
@interface DetailViewController : UIViewController
@property (weak, nonatomic) NSString *authorText;
@property (weak, nonatomic) NSString *quoteText;
@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 quoteText,authorText;
- (void)viewDidLoad
{
[super viewDidLoad];
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 string
s we want. Remember, the two objects are NSString
s 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.
You can follow me on Twitter in my personal profile or Duuro App Studio profile.