Pages

Subscribe:

Tuesday, July 19, 2011

How to make a slider button just like iPhone's native Unlock Button


/* In the above screen shot, i've used the UISlider as a alarm triggering object. (as required in an application) */

/* Use your custom images as your requirements. Declare required variables & objects in *.h file. You will need a UIImageView, a UILabel, a UIButton & a UISlider in your NIB file and locate them to desired name.*/

- (void)viewDidLoad {
[super viewDidLoad];
// initialize custom UISlider (you have to do this in viewdidload or applicationdidfinishlaunching.
UIImage *stetchLeftTrack= [[UIImage imageNamed:@"Nothing.png"]
stretchableImageWithLeftCapWidth:30.0 topCapHeight:0.0];
UIImage *stetchRightTrack= [[UIImage imageNamed:@"Nothing.png"]
stretchableImageWithLeftCapWidth:30.0 topCapHeight:0.0];
[mySlider setThumbImage: [UIImage imageNamed:@"SlideToStop.png"] forState:UIControlStateNormal];
[mySlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[mySlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];

}


-(IBAction)LockIt
{
mySlider.hidden = NO;
lockButton.hidden = YES;
Container.hidden = NO;
myLabel.hidden = NO;
myLabel.alpha = 1.0;
UNLOCKED = NO;
mySlider.value = 0.0;
NSString *str = @"The iPhone is Locked!";
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Locked" message:str delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
[alert release];
}

-(IBAction)fadeLabel
{
myLabel.alpha = 1.0 - mySlider.value;
}

-(IBAction)UnLockIt
{
if (!UNLOCKED)
{
if (mySlider.value == 1.0)
{ // if user slide far enough, stop the operation
// Put here what happens when it is unlocked

mySlider.hidden = YES;
lockButton.hidden = NO;
Container.hidden = YES;
myLabel.hidden = YES;
UNLOCKED = YES;
}
else
{
// user did not slide far enough, so return back to 0 position
[UIView beginAnimations: @"SlideCanceled" context: nil];
[UIView setAnimationDelegate: self];
[UIView setAnimationDuration: 0.35];
// use CurveEaseOut to create "spring" effect
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
mySlider.value = 0.0;
[UIView commitAnimations];

/* if u don't want to use custom animation with desired duration then u can use the following line :

[mySlider setValue:0.0 animated:YES];
*/

}
}
}

2 comments:

admin said...

great post..
but it will be better if you use some screen shot here....
:-)

Erfan said...

Thanks for the suggestion.....i'll definitely try to upload some screen shot here.....
:-)

Post a Comment