Arshad Parwez Arshad Parwez - 2 years ago 381
Objective-C Question

Custom UISwitch with image

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

Answer Source

What's so hard about creating your own switch? A UISwitch is a control, essentially just a view that sends a message -- with two states. You could set it up 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download