UISwitch - change from on/off to yes/no

Question

does anyone know of a way I can change the text label for on and off to yes and no.

I did it with

            ((UILabel *)[[[[[[switchControl subviews] lastObject] subviews] objectAtIndex:2] subviews] objectAtIndex:0]).text = @"Yes";
        ((UILabel *)[[[[[[switchControl subviews] lastObject] subviews] objectAtIndex:2] subviews] objectAtIndex:1]).text = @"No";

However, with the release of iOS 4.2, this is no longer supported (this probably wasn't recommended by Apple anyway)

My client is insisting on yes/no switches. I'd appreciate any advice!

many thanks

score 24 · Answer 1 · answered Nov 16 '12 at 01:46

24

Hurrah! From iOS 6, it's possible to specify an image to be used for the on / off states, respectively. So, this can be used to display a YES / NO image (or whatever image representing the text you would prefer to use instead of the previously limited ON / OFF).

 if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"6.0"))
 {
     [mySwitch setOnImage: [UIImage imageNamed:@"UISwitch-Yes"]];
     [mySwitch setOffImage:[UIImage imageNamed:@"UISwitch-No"]];
 }

The images should be 77 px wide, 27 px high, and the text (one image for each state) should be horizontally centred within that 77 px width. I use transparent backgrounds for the text, so I can still make use of the tint for the background, which still works with this.

Of course, it would seem easier to just supply text, rather than having to use an image of text, but I'm certainly grateful for this new option, at least.

answered Nov 16 '12 at 01:46

Snips

6,575
7
40
64

cool code, but for this is available on iOS 6 and above, is there a solution which is like this but compatible for iOS 5 – otakuProgrammer Jan 02 '13 at 07:13
Unfortunately not, which is why this feature was highly anticipated. If you like the code, please give it an up vote :-) – Snips Jan 02 '13 at 09:34
13

If you just need some quick English YES/NO images, here are the ones I use. Feel free to grab them. http://www.duneparksoftware.com/UISwitch-No.png | http://www.duneparksoftware.com/UISwitch-No@2x.png | http://www.duneparksoftware.com/UISwitch-Yes.png | http://www.duneparksoftware.com/UISwitch-Yes@2x.png – Eric Baker Apr 29 '13 at 19:29
What to do in case of OS between 5.0 and 6.0? – Jayprakash Dubey Dec 12 '13 at 09:57
Unfortunately this doesn't work in iOS 7. See the discussion section of the [docs](https://developer.apple.com/library/ios/documentation/uikit/reference/uiswitch_class/Reference/Reference.html#//apple_ref/occ/instp/UISwitch/onImage). – Steve Jul 25 '14 at 02:52
Where do you place above code? Can you use it with switch dragged from storyboard or do you have to create whole switch programmatically? – user1904273 Mar 26 '15 at 11:35

score 20 · Accepted Answer · edited May 23 '17 at 12:25

20

You need to implement your custom UISwitch for that. Or use one of already implemented :) (check this SO question and this post)

edited May 23 '17 at 12:25

Community

1
1

answered Dec 01 '10 at 14:13

Vladimir

170,431
36
387
313

I also made a custom UISwitch: http://xcodenoobies.blogspot.com/2013/04/free-custom-uiswitch-flexible-colors.html – GeneCode Apr 08 '13 at 04:00
@Rocotilos, what about apple approval? – Bhushan B Aug 13 '13 at 13:47

score 12 · Answer 3 · answered Apr 30 '12 at 20:33

Vladimir answer is great, but in my humble opinion there is an even better implementation here: https://github.com/domesticcatsoftware/DCRoundSwitch.

Besides setting a custom text, it is easier to change the size and color of the UISwitch and you get a sharper result.

It is released under an MIT license. Have a look!

JSWilson · Answer 4 · 2012-05-08T23:58:50.337

It turns out that you can create a custom UISwitch with the following items:

A UIScrollView
A UIButton
Two UILabels
A background image
A Boolean value

First you will need to add QuartzCore.framework to your project and #import <QuartzCore/QuartzCore.h> to your view controller.

Next add the UIScrollView to your view using Interface Builder. The ScrollView will be your custom UISwitch. Next add the button and the two labels to your ScrollView. One label will be for "yes" the other for "no".

Add the image to the button and set its type to custom. This is the image I use: enter image description here

Position the labels over the blue and white area of the image. Adjust the ScrollView so it is just big enough to show the blue part of the image and the thumb nob.

Add the following line to viewDidLoad:

self.mySwitch.layer.cornerRadius = 13.5;

mySwitch is the name of the ScrollView and 13.5 is half the height of the ScrollView. The above statement changes the ScrollView to have rounded ends like the UISwitch.

To make the custom switch active you will need to tie the buttons "Touch Up Inside" event to an IBAction. Here is the code I use in the event handler:

-(IBAction)mySwitchButton:(id)sender {
    self.myValue = !self.myValue;
    CGPoint scrollPoint = CGPointMake((self.myValue)? 43.0: 0, 0.0);
    [mySwitch setContentOffset:scrollPoint animated:YES];
}

Where myValue is the boolean variable that contains the state of your switch and 43.0 is the number of points you will have to move the image over to put the switch in the off position.

That is all there is to it!

score 0 · Answer 5 · answered Jun 04 '13 at 03:24

From iOS 6, it's possible to specify an image to be used for the UISwitch on / off states, but NOT the text. This will lead trouble when internationalization is required because translators have to provide an image text for each language, not text only. Moreover, the size of the UISwitch image is fixed, limiting the text length.

Because of the above reasons, I like the JSWilson's answer: simple and flexible.

To relieve developers of the need to manually add the required controls, I coded a custom CRDScrollSwitch class that you can find at my GitHub repository: https://github.com/corerd/CRDScrollSwitch

UISwitch - change from on/off to yes/no

5 Answers5

Linked