In Tutorial 1 of iOS Development with Xcode We covered some basic concepts and we Simply made a little Label and wrote our desired text Hello World in it. Now let Write something else in this Label by code. First enable split View in our Xcode as shown in the screenshot below. Split is very helpful when you need to interact between View and Controller at same time.
After this click on your label and hold the control button and from their drag your mouse to the header of the ViewController.m and you will see a pop-up window like in the screenshot below.Name your Label in front on the Name and press connect.This will generate a property by which you can interact with this label.
The property generated code would be like below.
@property (weak, nonatomic) IBOutlet UILabel *lblHelloWorld;
Now to interact with your label you we will write little code in viewDidLoad
method.ViewDid method is the method which runs before your screen is loaded first
time.So , we will write code in this method.
- (void)viewDidLoad
{
[super viewDidLoad];
self.lblHelloWorld.text = @"Hello World Again!";
}
In our viewDidLoad method we you would have noticed that by default it contained line [super viewDidLoad] by this line of code we are telling our method that first load whatever your parent class is going in the ViewDidLoad method and than you write our line of code.If you have done programming in Java or C# you would have used the this keywork.So her self is like this or C# or Java.With self we access properties and methods of out current class.In Objective C properties are accessed by the dot(.) notication and methods are access by object name/class name space
method name which would be odd for you initially but you would get used to it after some time.Coming back to the current label code so by lblName.text you access the current text property of code and placing a @”Hello World Again!” in front of it would call the setter of the lblHelloWorld property and by this our text of the label would be changed.
And Now when you run your app your would see the Hello World label has changed
to Hello World Again as we changed it in our viewDidLoad method.
Creating UI Object by Code
Even though Storyboard provides a good sufficient way to create your UI Object for your app but sometimes you may run into scenario where you have to create object by code.So, how you will add a UILable to your view by code. Again we will write code in ViewDidLoad method.
- (void)viewDidLoad
{
[super viewDidLoad];
UILabel *lblHello = [[UILabel alloc]initWithFrame:CGRectMake(30, 30, 100,100)];
lblHello.text = @"Hello World!";
[self.view addSubview:lblHello];
}
So , I suppose you already know about the [super viewDidLoad] at this point. After that we created an object of UILabel and also initialized it with its default size and position with the CGRectMake method.Than we add it text which it would be displaying and the last step is a adding our created object of UILabel to self.view If we don’t add object to self.view than it would not be shown on the screen. Now run the app and checkout the result.
UIButton
As the name suggests you UIButtons to interact in your screen a simplest manner.I use the works simplest manner because in Xcode we could interact with touch on the screen anywhere but thats as simple as using UIButton.UIButton fires an action if it is tapped and mostly in our app thats what we are looking for.What action are fired when the user touches the UIButton user has to define it in Storyboard and also in code.So , lets do a little demo for UIButton.
First look for Button in your Utility area and than drag it to your View in storyboard as shown in screenshot below.
After you have dragged Button to your view your View would look like in the screenshot below.
Now double tab your label and delete the text inside it and change the text for button to “Tap” as shown in the screenshot below.
By default in Xcode 5 UIButton are White and here it really looks more like a link than a button so lets change its background color , so click on button and in the identify inspector you will see it shows different properties for our current button.So , find Background in that and change color to Blue or any other if you don’t like blue.If you don’t know where Identity inspector is than see the screenshot below.
Now after changing the color of your UIButton now you are ready to code action for this button.So , set your Xcode as Split View and in Split view Control-Drag from your button to the implementation part of your ViewController class.After that a popover window will ask your for the name of the action you want to define for your UIButton.Name if and press connect as shown in the image below.
Your Screen would like like the screenshot below at this point.
Inside the buttonTapped method you will set the text your label which in storyboard
you removed text of.
- (IBAction)buttonTapped:(id)sender
{
self.lblHelloWorld.text = @"Tap button pressed.";
}
I think most of the things till now would be clear to you , but I guess you would still be wondering whats the meaning of this IBAction.Well to be honest IBAction does not have much significance , you can say it means
void.But IBAction show the action was created by dragging from the storyboard.Which would also have made this method as a void and could have added it to your button by code.But for doing that you would have to
create a property of your UIButton as we had done that with the UILabel.
Now if you run this , initially you would see only button on your screen and by tapping button your label showed get text.
Here is a code by which you can add a UIButton by code and define its target action.
- (void)viewDidLoad
{
[super viewDidLoad];
UIButton *tabButton = [[UIButton alloc]initWithFrame:CGRectMake(50, 50, 45,25)];
[tabButton setTitle:@"Tap" forState:UIControlStateNormal];
tabButton.backgroundColor = [UIColor grayColor];
[tabButton addTarget:self action:@selector(buttonTapped:)
forControlEvents:UIControlEventTouchDown];
[self.view addSubview:tabButton];
}
Challenge
So , now that we have learned about UILabels and UIButtons and interacting with them , I have a simple assignment for you.You have created a tab counter.Your screen would have one button and a label and every time your button is tapped the count would increase in the Label.
In this tutorial We createt UI Objects by code and worked on UIButtons and labels now lets add another View to Storyboard in Third Tutorial