iPhone vertical toggle switch

Question

I'm trying to create a vertical toggle switch control for the iPhone (along the lines of UISwitch but vertical sliding).

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

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

Any direction is much appreciated.

Answer 1

You could use a UIButton and two images to make it appear like a vertical toggle switch and swap images depending on switch state.

Subclass UIButton, add the switch state, image swapping, etc, use as needed.

EDIT -- The other way to go is a completely custom control. You subclass UIControl and add functions similar to UISwitch's function (ie: initWithFrame, on, setOn:animated:).

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

[self sendActionsForControlEvents: UIControlEventValueChanged];

You implement beginTrackingWithTouch, continueTrackingWithTouch and endTrackingWithTouch to slide the switch images as the touch moves across the switch. I did this to create a 2D slider. UISwitch also does its own localization, the ON/OFF changes to 0/1 for example.

Answer 2

In the specific case of UISlider, you can just derive from it and override a few choice 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 slides the thumb along horizontally based on the value in that last call. If you slide it vertically you have a vertical slider. Just set all the images to your own custom artwork and implement those methods to position things as desired. Your thumbRect method will end up with 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 snap it to 100 if greater than 50 and snap to 0 if less. I found the custom slide code online 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];
    }



}