Developing for iPhone

Go ahead and open the “HelloiPhone” project from the previous tutorial. Remember the slider we added to the interface? Today we will give it some functionality.
Open “HelloiPhoneViewController.h” and edit it to look like this:

#import <UIKit/UIKit.h>
 
@interface HelloiPhoneViewController : UIViewController {
	IBOutlet UILabel *sliderValue;
}
 
@property (nonatomic, retain) UILabel *sliderValue;
 
-(IBAction) sliderChanged: (id) s;
-(IBAction) goButton;
 
@end

So what have we done? We have created an outlet called sliderValue. Outlets send data back to the interface. In this case, we will be sending the value of the slider to the label we created. We also added the @property function to help us retrieve and set the value of sliderValue (our label). Remember that @ property and @synthesize work together to simulate getter and setter methods. For now, ignore “(nonatomic, retain)” you don’t need to know about this yet.
Then we create a new method that will be called sliderChanged that will be run whenever the user interacts with the slider. Notice that we have told this method to accept an argument that it will store in the variable “s”. The variable type is “id” – this is a generic variable so it can accept any variable type. If we had used “int” instead it would have only been able to accept integer variables.

With that done, time to move over to the implementation file. Save “HelloiPhoneViewController.h” and open “HelloiPhoneViewController.m”. First of all we need to synthesize the sliderValue variable. so add this line after the “@implementation” line:

@synthesize sliderValue;

Now lets add the “sliderChanged” method below:

-(IBAction)sliderChanged: (id) s {
	UISlider *slider = (UISlider *) s;
	float sliderPosition = (slider.value);
	NSString *text = [[NSString alloc] initWithFormat: @"%0.1f", sliderPosition];
	sliderValue.text = text;
	[text release];
}

Let’s have a look at what we did here.

UISlider *slider = (UISlider *) s;

Here we created a new UISlider object from Apple’s UISlider class and called it “slider”. We then told it to store the slider that is passed into the method. (that would be the slider we created in the previous tutorial.)

float sliderPosition = (slider.value);

Here we created a float variable called sliderPosition. Float stands for “Floating-point” and it’s a type of variable that holds digits just like the int variable does – however, a float variable can store a decimal point whereas an int can’t. If you tried to store the number “27.8″ in an int variable, the decimal would be cut off and it would return “27″. Note that it doesn’t round the number up or down, it just cuts the decimal places off. There are many types of variable that you will learn about as we go.
We then store the value of our slider in the variable.

NSString *text = [[NSString alloc] initWithFormat: @"%0.1f", sliderPosition];

Now we create a new object called “text”. This is an NSString object. It is used to store strings (text) because there isn’t a variable type in Objective-C that does this. We then initialize it and use “%f” to tell it to store the sliderPosition float after the comma. However, by inserting “0.1″ before the “f”, we are telling it to only store one decimal place. You may remember doing something like this when printing using the NSLog method.

sliderValue.text = text;
[text release];

Then we pass the nicely formatted NSString object to our label using “sliderValue.text” and release the “text” object from memory.

Make sure you understand what we have done here before you move on.
Save “HelloiPhoneViewController.m” and return to the project window. Click the Resources folder and double-click the “HelloiPhoneViewController.xib” file to open the Interface Builder.
Now let’s connect up the slider and the label with the code we just wrote. Click the slider you placed on your interface to select it and open the Connections Inspector. (Tools > Connections Inspector)
Now grab the circle next to “Value Changed” and drag a line over to the “Files Owner” icon. In the menu that pops up, click the “sliderChanged:” option. This is the same thing we did with the button in the last tutorial, but now we are using our “sliderChanged” method. Now the slider will change the value of “sliderValue” but we want this value to appear in the label below. Here is how to do that:
Hold down the control(⌃) key on the keyboard and drag a line from the “File Owner” icon to the “0.5″ label you added last time. A menu should pop up with two options (sliderValue and view). Click sliderValue and hey presto, the label will now update every time the slider is moved. Save the file and test it out! Dragging the slider to the left should cycle the number down to 0 and the the right should cycle it up to 1.

Great work! Save the project and proceed to the next tutorial.

| | | | | |