27

I need to implement a custom switch in a project. Currently what I have found is that we cannot alter with UISwitch in way to implement as shown in below image. I've followed posts and googled through stackoverflow and other blogs but didn't found a solution as desired. One way is to go with UISegmented control as in this post, but that too doesn't solves my problem.

enter image description here

Thanks in advance for any help

Community
  • 1
  • 1
Arshad Parwez
  • 1,563
  • 2
  • 19
  • 29

4 Answers4

26

It's not hard to create your own switch. A UISwitch is a control — essentially just a view that sends a message — with two states. You could set it up your own custom control like this:

  • container view: a simple view with rounded corners (set the cornerRadius of the view's layer) and a background color

  • left image: an image view that displays the image you want to show on the left side, i.e. the check mark for your example

  • right image: an image view that displays the image you want to show on the right side, i.e. the X mark for your example

  • slider: an image view showing the slider portion of the switch, set above the other two image views

When the user taps or swipes the control, use Core Animation to move the slider to the other side of the switch and update the state of the control and do a quick fade to the background color for the new state. Send the control's action to the target.

Caleb
  • 124,013
  • 19
  • 183
  • 272
  • 3
    Thank You! I have achieved the solution from your answer. – Arshad Parwez May 01 '13 at 08:41
  • 2
    Its not true at all, the beautiful effect Apple made when you switch is not that simple to achieve . Its a non linear animation with a non linear shape. – Curnelious Dec 23 '16 at 14:12
  • Yes, I know that Apple worked hard to make UISwitch look just right, but that doesn't invalidate anything I wrote above. It's up to the OP to decide how much work to put into the transition animation, but the tools available in Core Animation make it straightforward to implement what I described in a very pleasing way. – Caleb Dec 23 '16 at 16:31
25

As gasparuff says, you can also do it with a UIButton, just set the images:

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected];
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal];

and when it's tapped just toggle the selected property.

- (void) buttonTap {
    button.selected = !button.selected;
}

Which will change the images automatically.

Odrakir
  • 4,254
  • 1
  • 20
  • 52
2

You know about -[UISwitch setOnImage:] and -[UISwitch setOffImage:], right? Also -[UISwitch setTintColor]. About the only drawback I can see is that the switch, itself, will be the standard iOS switch (round button) but, otherwise, this would be the most-iOS-like solution.

When implementing your own on/offImage, remember the size restrictions, and also that the side of the image toward the switch is concave. tintColor can be used to make the rest of the switch reflect your color scheme. You might want to track the valueChanged event so alter the tint color.

If you need the exact look you display in your question (square switch button), then you probably want to use a custom control, as @Caleb suggested.

Olie
  • 24,597
  • 18
  • 99
  • 131
0

It looks like you just want your control to have only 2 states - enabled and disabled.

An easy way for this would be to create 2 png-images and use a custom UIButton with a background image and just replace those 2 images each time the button is tapped.

Is this what you are trying to do or did I misunderstand something?

gasparuff
  • 2,295
  • 29
  • 48
  • I guess sliding was required as well – makaron Apr 29 '13 at 14:57
  • I am trying to replicate like it has been done in Twitter's video sharing app 'Vine'. Actually the header shown in the image slides smoothly in that app. I guess adding a button to change state won't lead to the smooth scroll of header. Appreciate your response! – Arshad Parwez Apr 29 '13 at 15:00
  • Ok, then I guess you will need some different approach. You're welcome. Good luck with that and let us know if you found some way to do that :-) – gasparuff Apr 29 '13 at 15:04