twotoasters/ttswitch

Fully customizable switch for iOS using images

TTSwitch

One switch to rule them all.

TTSwitch is a UISwitch replacement built with images. You can now fully customize its appearance to whatever you want. It also adds block support when the switch value is changed.

The switch also supports UIAppearance. You can globally setup all the TTSwitch appeareance and then anytime you create an instance it will already be styled.

 

Getting Started

Git submodule

Add the TTSwitch as a submodule to your project or download the code from the master branch here.

Simply add the TTSwitch.h + TTSwitch.m files in the TTSwitch folder to your Xcode project. Then #include "TTSwitch.h" in your source files where you want to use the TTSwitch.

CocoaPods

Add TTSwitch to your Podfile and pod install.

pod 'TTSwitch', '~> 0.0.5'

Resources

To make it easy to create your own custom switch we have included a PSD of the switches you see in the app. You are free to use these or make your own. You can also send this to your designer so that they will know how to design and cut the switches. We have also included a diagram of the layers of the switch so you can see how it is layed out.

Example Usage

UIAppearance

Globally setup the appeareance of all the TTSwitchs in your app.

[[TTSwitch appearance] setTrackImage:[UIImage imageNamed:@"round-switch-track"]];
[[TTSwitch appearance] setOverlayImage:[UIImage imageNamed:@"round-switch-overlay"]];
[[TTSwitch appearance] setTrackMaskImage:[UIImage imageNamed:@"round-switch-mask"]];
[[TTSwitch appearance] setThumbImage:[UIImage imageNamed:@"round-switch-thumb"]];
[[TTSwitch appearance] setThumbHighlightImage:[UIImage imageNamed:@"round-switch-thumb-highlight"]];
[[TTSwitch appearance] setThumbMaskImage:[UIImage imageNamed:@"round-switch-mask"]];
[[TTSwitch appearance] setThumbInsetX:-3.0f];
[[TTSwitch appearance] setThumbOffsetY:-3.0f];

Default switch

TTSwitch *switch = [[TTSwitch alloc] initWithFrame:(CGRect){ CGPointZero, { 76.0f, 27.0f } }];
switch.trackImage = [UIImage imageNamed:@"square-switch-track"];
switch.overlayImage = [UIImage imageNamed:@"square-switch-overlay"];
switch.thumbImage = [UIImage imageNamed:@"square-switch-thumb"];
switch.thumbHighlightImage = [UIImage imageNamed:@"square-switch-thumb-highlight"];

Switch with thumb bigger than track

TTSwitch *switch = [[TTSwitch alloc] initWithFrame:(CGRect){ CGPointZero, { 76.0f, 27.0f } }];
switch.trackImage = [UIImage imageNamed:@"square-switch-track"];
switch.overlayImage = [UIImage imageNamed:@"square-switch-overlay"];
switch.thumbImage = [UIImage imageNamed:@"square-switch-thumb"];
switch.thumbHighlightImage = [UIImage imageNamed:@"square-switch-thumb-highlight"];
switch.trackMaskImage = [UIImage imageNamed:@"square-switch-mask"];
switch.thumbOffsetY = -3.0f; // Set this to -3 to compensate for shadow 

Switch with shadow on left and right of thumb that doesn't go outside of frame

TTSwitch *switch = [[TTSwitch alloc] initWithFrame:(CGRect){ CGPointZero, { 76.0f, 27.0f } }];
switch.trackImage = [UIImage imageNamed:@"round-switch-track"];
switch.overlayImage = [UIImage imageNamed:@"round-switch-overlay"];
switch.thumbImage = [UIImage imageNamed:@"round-switch-thumb"];
switch.thumbHighlightImage = [UIImage imageNamed:@"round-switch-thumb-highlight"];
switch.trackMaskImage = [UIImage imageNamed:@"round-switch-mask"];
switch.thumbMaskImage = [UIImage imageNamed:@"round-switch-mask"];
switch.thumbOffsetY = -3.0f; // Set this to -3 to compensate for shadow 

Switch with labels for on/off text

TTSwitch *roundLabelSwitch = [[TTSwitch alloc] initWithFrame:(CGRect){ CGPointZero, { 76.0f, 28.0f } }];
// use normal setup and add
roundLabelSwitch.trackImage = [UIImage imageNamed:@"round-switch-track-no-text"];
roundLabelSwitch.labelsEdgeInsets = (UIEdgeInsets){ 3.0f, 10.0f, 3.0f, 10.0f };
roundLabelSwitch.onString = NSLocalizedString(@"ON", nil);
roundLabelSwitch.offString = NSLocalizedString(@"OFF", nil);
roundLabelSwitch.onLabel.textColor = [UIColor greenColor];
roundLabelSwitch.offLabel.textColor = [UIColor redColor];

Credits

TTSwitch was created by Scott Penrose(@scottpenrose) and Two Toasters(@twotoasters) in the development of Go Try It On.

License

TTSwitch is available under the WTFPL. See the LICENSE file for more info.

ttswitch's Issues

What is the equation for the perfect switch?

I may be over complicating this, or it's not clear. I'm replacing images left and right, but it's just not coming out smooth in practice. What is the ratio of track image to switch size to overlay size?

I'm having a hard time figuring out how wide my track image is supposed to be. My total switch width is 81. My thumb image width is 32. SO, how wide should my track image be? Mask?

half of the track image is clipped if thumb is smaller than the mask

First of all great work. Best customizable switch I've found and easy to work with.

I have a little problem though. I'm creating a switch where the thumb is a little bit smaller than the mask, but this seems to introduce a problem where half of the track is clipped.

I've fixed the problem by commenting out two lines that calls mask:

updateThumbPositionAnimated:(BOOL)animated
{
CGFloat newThumbXCenter = floorf((self.thumbImageView.frame.size.width / 2) + self.thumbInsetX);
if (_on) {
CGFloat range = floorf(self.frame.size.width - 2 * self.thumbInsetX - self.thumbImageView.frame.size.width);
newThumbXCenter += range;
}

[self thumbImageHighlighted:NO];

if (animated) {
    CGFloat distanceOfTravel = fabsf((_on ? 1.0f : 0.0f) - [self valueAtThumbPosition]);
    CGFloat animationDuration = kTTSwitchAnimationDuration * distanceOfTravel;

    [UIView animateWithDuration:animationDuration animations:^{
        [self.thumbImageView setCenter:(CGPoint){ newThumbXCenter, self.thumbImageView.center.y }];
        [self.trackImageView setCenter:(CGPoint){ newThumbXCenter, self.trackImageView.center.y }];
    } completion:^(BOOL finished) {
        //[self mask];
    }];
}
else {
    [self.thumbImageView setCenter:(CGPoint){ newThumbXCenter, self.thumbImageView.center.y }];
    [self.trackImageView setCenter:(CGPoint){ newThumbXCenter, self.trackImageView.center.y }];
    //[self mask];
}

}

This fixes the problem and it doesn't seem to brake your demo. I cant figure out why you are masking out the half of the track?

display issue on ios 7

I am trying to use this with ios7 and it displays properly in the example with the table cell but if you use the xib display the overlay is not displaying properly.. I am trying to use the Round default look.

Thanks!

valueChanged no longer fires in ios10

Resizing the switch

How would I go about effectively scaling the size of the switch down. As it sits right now, the overall switch is a little too big for my UITableViewCell. Thanks.

thumbHighlightImage is not useful in iOS 10, xib

bulid a UIView in xib and change class to TTSwitch
change thumbHighlightImage in swift code
the switch color is not changed

    ttSwitch.thumbImage = #imageLiteral(resourceName: "switch_gray")
    ttSwitch.thumbHighlightImage = #imageLiteral(resourceName: "switch_yellow")
    ttSwitch.overlayImage = #imageLiteral(resourceName: "switch_background")
    ttSwitch.trackImage = #imageLiteral(resourceName: "switch_background")

Mask problem with renderInContext of CALayer

When using renderInContext method of CALayer the mask layers are not rendered. The result looks ugly, the entire track image is show in the UIImage.
I know the real problem is that renderInContext does not support mask layer -- but is there something that can be done in TTSwitch to address this? My app requires screenshot of UIView which contains the Switch. I just finished replacing all the Swtiches in the app with TTSwitch... would hate to revert back to UISwitch.

Test code to reproduce the issue (modified the example project):

#import <UIKit/UIKit.h>
#import <MessageUI/MessageUI.h>
#import <MessageUI/MFMailComposeViewController.h>

@interface TTXibViewController : UIViewController <MFMailComposeViewControllerDelegate>

@end





#import "TTXibViewController.h"
#import "TTSwitch.h"
#import <QuartzCore/QuartzCore.h>

@interface TTXibViewController ()

@property (weak, nonatomic) IBOutlet TTSwitch *defaultSwitch;

@end

@implementation TTXibViewController
- (IBAction)sendEmail:(id)sender {

    UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0);

    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *screenshot = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    NSData * data = UIImagePNGRepresentation(screenshot);
    [self emailImageWithImageData:data];
}

- (void)emailImageWithImageData:(NSData *)data
{
    MFMailComposeViewController *mailController = [[MFMailComposeViewController alloc] init];
    mailController.mailComposeDelegate = self;
    [mailController setSubject:@"Test Email"];
    [mailController setMessageBody:nil isHTML:NO];
    [mailController addAttachmentData:data mimeType:@"image/png" fileName:@"test.png"];
    [self.navigationController presentModalViewController:mailController animated:YES];
}

- (void)mailComposeController:(MFMailComposeViewController*)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error
{
    [self dismissModalViewControllerAnimated:YES];

}

@end

;

TTSwitch will display nothing as cell accessory

Hi,

I am building a settings panel with InAppSettingsKit. I decided to customize a cell with a switch by using TTSwitch.

InAppSettingsKit uses simple UITableView and UITableViewCell, and place the switch control in cell's accessoryView. However, it display nothing if I choose to place a switch that is a subclass of TTSwitch.

Here is my subclass's header file:

#import <UIKit/UIKit.h>
#import <TTSwitch/TTSwitch.h>
#import <TTSwitch/TTSwitchSubclass.h>

@interface IASKSwitch : TTSwitch {
    NSString *_key;
}

@property (nonatomic, retain) NSString *key;

@end

Is there anything I missed for writing a subclass?

On OSX 10.8.4, XCode 5 DP2, iOS6&7

Wilson

Auto Layout

It doesn't appear to work with auto layout.

ランキングリスト : Highlight Color を #f1f7fb

Add to CocoaPods