iOS App Development: Slider Control


Today we are going to begin looking at using some of the controls available to us in xCode.  The first of these tools is the slider control.

Using the slider is very intuitive for most users, but it may require a little programming on your part to get everything to work the way the user (and Apple!) expects.

We will being a new project for this example.  I am calling mine ControlSlider .  This is a standard View-Based application.  You can of course do this as either an iPhone or iPad project.

First, a few things to consider:

Applications can have Active, Static, & Passive Controls
  • Active controls – trigger a method or piece of code
  • Static controls – can’t be directly interacted with by the user (labels)
  • Passive controls – hold values for the user until needed (sliders, textfield)
All controls are subclasses of the UIControl class – they can trigger methods or be used as static or passive controls.

Header File:

To begin with, add the following lines to your ControlSliderViewController.h file:
@interface ControlsSliderViewController : UIViewController {

UILabel    *sliderLabel;

}

@property (nonatomic, retain) IBOutlet UILabel *sliderLabel;
-(IBAction)sliderChanged:(id)sender;

@end

Main:

And to your .m file add:

@synthesize sliderLabel;

-(IBAction) sliderChanged:(id)sender {
UISlider *slider = (UISlider *)sender;
int progressAsInt = (int)(slider.value + 0.5f);
NSString *newText = [[NSString alloc] initWithFormat:@”%d”, progressAsInt];
sliderLabel.text=newText;

[newText release];
}

Don’t for get to release your label:

– (void)dealloc {
[sliderLabel release];
[super dealloc];

IB

You will only need to add a label and a slider to your nib file.

Drag one of each over to the nib.  After you have them sized the way you would like, set the text in the label to “50”.

Then, selecting the slider, change the minimum to 1 and maximum to 100.  Initial value should be set to 50 (the value stored in your label).

Create a connection from the File Owner to the label (control-drag from the file owner to the label in the nib) and select sliderLabel

Finally, select the slider on the nib, and change to the second tab on your inspector to create a connection event.  Select Value Changed (should be toward the bottom of the list) and drag to File Owner.

Launch your app and give it a try!

Demonstration:

[tubepress video =9jjD_ZCfiok]

Recent Posts