IPhone Vertical Toggle Switch

Question

I am trying to create vertical toggle switch control for iPhone (along UISwitch lines, but vertical glide).

I was wondering if an existing control exists or if there are good tutorials that explain the basics of creating custom controls for the iPhone.

Currently, I tried to use affine transforms to create a vertical switch from the base UIswitch, and it works, except that the slider is too small compared to the slider track, so I'm looking for information on writing custom controls.

Of great importance is any direction.

Answer 1

You can use UIButton and two images so that they appear as a vertical toggle switch and swap images depending on the state of the switch.

Subclass of UIButton, add switch state, image sharing, etc., use as needed.

EDIT . Another way is a fully customizable control. You subclass UIControl and add functions similar to UISwitch (i.e.: initWithFrame, on, setOn: animated :).

You also need to send an event with state changes, similar to what UISwitch does:

[self sendActionsForControlEvents: UIControlEventValueChanged]; 

You implement beginTrackingWithTouch, continueTrackingWithTouch and endTrackingWithTouch to move the switch images as the sensor moves along the switch. I did this to create a 2D slider. UISwitch also performs its localization, for example, ON / OFF changes to 0/1.

Answer 2

In the specific case of UISlider, you can simply extract from it and override several selection methods:

 // lets a subclass lay out the track and thumb as needed - (CGRect)minimumValueImageRectForBounds:(CGRect)bounds; - (CGRect)maximumValueImageRectForBounds:(CGRect)bounds; - (CGRect)trackRectForBounds:(CGRect)bounds; - (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value; 

The default implementation basically moves the thumb horizontally based on the value of the last last call. If you place it vertically, you will get a vertical slider. Simply set all the images into your own artwork and implement these methods to place things as you wish. Your thumbRect method will contain a line that looks something like this:

 result.origin.y = trackFrame.origin.y + ( trackFrame.size.height - thumbFrame.size.height ) * value; 

Answer 3

I used a custom slider and set the transform. In the selector, I then had a simple if statement to bind it to 100 if more than 50, and bind to 0 if less. I found custom slide code here: http://www.iphonedevsdk.com/forum/iphone-sdk-development/11470-there-way-i-can-use-slide-unlock-slider.html

 - (void)create_Custom_UISlider { CGRect frame = CGRectMake(100.0, 110.0, 180, 1.0 ); CGRect thumb = CGRectMake(100.0, 110.0, 1.0, 1.0); customSlider = [[UISlider alloc] initWithFrame:frame]; [customSlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged]; // in case the parent view draws with a custom color or gradient, use a transparent color customSlider.backgroundColor = [UIColor clearColor]; customSlider.opaque = 20.0; UIImage *stetchLeftTrack = [[UIImage imageNamed:@"image3.png"] stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0]; UIImage *stetchRightTrack = [[UIImage imageNamed:@"image2.png"] stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0]; [customSlider setThumbImage: [UIImageimageNamed:@"image1.png"]forState:UIControlStateNormal]; [customSlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal]; [customSlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal]; [customSlider thumbRectForBounds: thumb trackRect: frame value: customSlider.value]; customSlider.minimumValue = 0.0; customSlider.maximumValue = 100.0; customSlider.continuous = NO; customSlider.value = 50.0; customSlider.transform = CGAffineTransformRotate(customSlider.transform,270.0/180*M_PI); } -(void)sliderAction:(id)sender { UISlider *slider = (UISlider *)sender; int progressAsInt = (int)(slider.value + 0.5f); customSliderValue = [NSNumber numberWithInt:0]; customSliderValue = progressAsInt; if (customSliderValue > 50) { [self myMethod1]; [customSlider setValue:100]; } else { [self myMethod2]; [customSlider setValue:0]; } }