Custom UISwitch button for iOS

Because the project needs to write text on the UISwitch button, the UISwitch that comes with the system is like this:

I can neither write nor change the color, so I found such a custom Switch button on the Internet. The specific source is missing. Record it, for fear that it will be lost later.

Let's take a look at it first:

There are many button styles, which can be text, multiple lines can be written, and both the text size and color can be set.

Let's take a look at its source code:

#import <Foundation/Foundation.h>@interface HMCustomSwitch : UISlider {BOOL on;UIColor *tintColor;UIView *clippingView;UILabel *rightLabel;UILabel *leftLabel;// private memberBOOL m_touchedSelf;}@property(nonatomic,getter=isOn) BOOL on;@property (nonatomic,retain) UIColor *tintColor;@property (nonatomic,retain) UIView *clippingView;@property (nonatomic,retain) UILabel *rightLabel;@property (nonatomic,retain) UILabel *leftLabel;+ (HMCustomSwitch *) switchWithLeftText: (NSString *) tag1 andRight: (NSString *) tag2;- (void)setOn:(BOOL)on animated:(BOOL)animated;

. M file

#import "HMCustomSwitch.h"@implementation HMCustomSwitch@synthesize on;@synthesize tintColor, clippingView, leftLabel, rightLabel;+(HMCustomSwitch *)switchWithLeftText:(NSString *)leftText andRight:(NSString *)rightText{HMCustomSwitch *switchView = [[HMCustomSwitch alloc] initWithFrame:CGRectZero];switchView.leftLabel.text = leftText;switchView.rightLabel.text = rightText;return [switchView autorelease];}-(id)initWithFrame:(CGRect)rect{if ((self=[super initWithFrame:CGRectMake(rect.origin.x,rect.origin.y,95,27)])){//self.clipsToBounds = YES;[self awakeFromNib];// do all setup in awakeFromNib so that control can be created manually or in a nib file}return self;}-(void)awakeFromNib{[super awakeFromNib];self.backgroundColor = [UIColor clearColor];[self setThumbImage:[UIImage imageNamed:@"switchThumb.png"] forState:UIControlStateNormal];[self setMinimumTrackImage:[UIImage imageNamed:@"switchBlueBg.png"] forState:UIControlStateNormal];[self setMaximumTrackImage:[UIImage imageNamed:@"switchOffPlain.png"] forState:UIControlStateNormal];self.minimumValue = 0;self.maximumValue = 1;self.continuous = NO;self.on = NO;self.value = 0.0;self.clippingView = [[UIView alloc] initWithFrame:CGRectMake(4,2,87,23)];self.clippingView.clipsToBounds = YES;self.clippingView.userInteractionEnabled = NO;self.clippingView.backgroundColor = [UIColor clearColor];[self addSubview:self.clippingView];[self.clippingView release];NSString *leftLabelText = NSLocalizedString(@"ON","Custom UISwitch ON label. If localized to empty string then I/O will be used");if ([leftLabelText length] == 0){leftLabelText = @"l";// use helvetica lowercase L to be a 1. }self.leftLabel = [[UILabel alloc] init];self.leftLabel.frame = CGRectMake(0, 0, 48, 23);self.leftLabel.text = leftLabelText;self.leftLabel.textAlignment = NSTextAlignmentCenter;self.leftLabel.font = [UIFont boldSystemFontOfSize:17];self.leftLabel.textColor = [UIColor whiteColor];self.leftLabel.backgroundColor = [UIColor clearColor];//self.leftLabel.shadowColor = [UIColor redColor];//self.leftLabel.shadowOffset = CGSizeMake(0,0);[self.clippingView addSubview:self.leftLabel];[self.leftLabel release];NSString *rightLabelText = NSLocalizedString(@"OFF","Custom UISwitch OFF label. If localized to empty string then I/O will be used");if ([rightLabelText length] == 0){rightLabelText = @"O";// use helvetica uppercase o to be a 0. }self.rightLabel = [[UILabel alloc] init];self.rightLabel.frame = CGRectMake(95, 0, 48, 23);self.rightLabel.text = rightLabelText;self.rightLabel.textAlignment = NSTextAlignmentCenter;self.rightLabel.font = [UIFont boldSystemFontOfSize:17];self.rightLabel.textColor = [UIColor grayColor];self.rightLabel.backgroundColor = [UIColor clearColor];//self.rightLabel.shadowColor = [UIColor redColor];//self.rightLabel.shadowOffset = CGSizeMake(0,0);[self.clippingView addSubview:self.rightLabel];[self.rightLabel release];}-(void)layoutSubviews{[super layoutSubviews];//NSLog(@"leftLabel=%@",NSStringFromCGRect(self.leftLabel.frame));// move the labels to the front[self.clippingView removeFromSuperview];[self addSubview:self.clippingView];CGFloat thumbWidth = self.currentThumbImage.size.width;CGFloat switchWidth = self.bounds.size.width;CGFloat labelWidth = switchWidth - thumbWidth;CGFloat inset = self.clippingView.frame.origin.x;//NSInteger xPos = self.value * (self.bounds.size.width - thumbWidth) - (self.leftLabel.frame.size.width - thumbWidth/2); NSInteger xPos = self.value * labelWidth - labelWidth - inset;self.leftLabel.frame = CGRectMake(xPos, 0, labelWidth, 23);//xPos = self.value * (self.bounds.size.width - thumbWidth) + (self.rightLabel.frame.size.width - thumbWidth/2); xPos = switchWidth + (self.value * labelWidth - labelWidth) - inset; self.rightLabel.frame = CGRectMake(xPos, 0, labelWidth, 23);//NSLog(@"value=%f    xPos=%i",self.value,xPos);//NSLog(@"thumbWidth=%f    self.bounds.size.width=%f",thumbWidth,self.bounds.size.width);}- (UIImage *)image:(UIImage*)image tintedWithColor:(UIColor *)tint {    if (tint != nil) {UIGraphicsBeginImageContext(image.size);//draw mask so the alpha is respectedCGContextRef currentContext = UIGraphicsGetCurrentContext();CGImageRef maskImage = [image CGImage];CGContextClipToMask(currentContext, CGRectMake(0, 0, image.size.width, image.size.height), maskImage);CGContextDrawImage(currentContext, CGRectMake(0,0, image.size.width, image.size.height), image.CGImage);[image drawAtPoint:CGPointMake(0,0)];[tint setFill];UIRectFillUsingBlendMode(CGRectMake(0,0,image.size.width,image.size.height),kCGBlendModeColor);UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();        return newImage;    }    else {        return image;    }}-(void)setTintColor:(UIColor*)color{if (color != tintColor){[tintColor release];tintColor = [color retain];[self setMinimumTrackImage:[self image:[UIImage imageNamed:@"switchBlueBg.png"] tintedWithColor:tintColor] forState:UIControlStateNormal];}}- (void)setOn:(BOOL)turnOn animated:(BOOL)animated;{on = turnOn;if (animated){[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:0.2];}if (on){self.value = 1.0;}else {self.value = 0.0;}if (animated){[UIViewcommitAnimations];}}- (void)setOn:(BOOL)turnOn{[self setOn:turnOn animated:NO];}- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{NSLog(@"preendTrackingWithtouch");[super endTrackingWithTouch:touch withEvent:event];NSLog(@"postendTrackingWithtouch");m_touchedSelf = YES;[self setOn:on animated:YES];}- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event{[super touchesBegan:touches withEvent:event];NSLog(@"touchesBegan");m_touchedSelf = NO;on = !on;}- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event{[super touchesEnded:touches withEvent:event];NSLog(@"touchesEnded");if (!m_touchedSelf){[self setOn:on animated:YES];[self sendActionsForControlEvents:UIControlEventValueChanged];}}-(void)dealloc{[tintColor release];[clippingView release];[rightLabel release];[leftLabel release];[super dealloc];}@end

You can see from the code that it is actually implemented by inheriting the UISlider control. The left and right sides of the UISlider are UILabel respectively. When YES, the slider slides to the rightmost side, when there is NO, it slides to the leftmost.

How to use it in code? Simple:

- (void)loadView{UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];self.view = contentView;contentView.backgroundColor = [UIColor whiteColor];// Standard ON/OFFHMCustomSwitch *switchView = [[HMCustomSwitch alloc] initWithFrame:CGRectZero];switchView.center = CGPointMake(160.0f, 20.0f);switchView.on = YES;[contentView addSubview:switchView];[switchView release];// Custom YES/NOswitchView = [HMCustomSwitch switchWithLeftText:@"YES" andRight:@"NO"];switchView.center = CGPointMake(160.0f, 60.0f);switchView.on = YES;[contentView addSubview:switchView];// Custom font and colorswitchView = [HMCustomSwitch switchWithLeftText:@"Hello " andRight:@"ABC "];switchView.center = CGPointMake(160.0f, 100.0f);switchView.on = YES;[switchView.leftLabel setFont:[UIFont boldSystemFontOfSize:13.0f]];[switchView.rightLabel setFont:[UIFont italicSystemFontOfSize:15.0f]];[switchView.rightLabel setTextColor:[UIColor blueColor]];[contentView addSubview:switchView];// Multiple linesswitchView = [HMCustomSwitch switchWithLeftText:@"Hello\nWorld" andRight:@"Bye\nWorld"];switchView.center = CGPointMake(160.0f, 140.0f);switchView.on = YES;switchView.tintColor = [UIColor orangeColor];switchView.leftLabel.font = [UIFont boldSystemFontOfSize:9.0f];switchView.rightLabel.font = [UIFont boldSystemFontOfSize:9.0f];switchView.leftLabel.numberOfLines = 2;switchView.rightLabel.numberOfLines = 2;switchView.leftLabel.lineBreakMode = NSLineBreakByWordWrapping;switchView.rightLabel.lineBreakMode = NSLineBreakByWordWrapping;[contentView addSubview:switchView];switchView = [[HMCustomSwitch alloc] init];switchView.center = CGPointMake(160.0f, 180.0f);switchView.on = YES;switchView.tintColor = [UIColor purpleColor];[contentView addSubview:switchView];[switchView release];switchView = [HMCustomSwitch switchWithLeftText:@"l" andRight:@"O"];switchView.center = CGPointMake(160.0f, 220.0f);//customSwitch.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];//customSwitch.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];[contentView addSubview:switchView];// Standard ON/OFFswitchView = [[HMCustomSwitch alloc] init];switchView.center = CGPointMake(160.0f, 260.0f);switchView.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];[switchView addTarget:self action:@selector(switchFlipped:) forControlEvents:UIControlEventValueChanged];[contentView addSubview:switchView];[switchView release];UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 420, 320, 40)];toolbar.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];[contentView addSubview:toolbar];[contentView release];}-(void)switchFlipped:(HMCustomSwitch*)switchView{NSLog(@"switchFlipped=%f  on:%@",switchView.value, (switchView.on?@"Y":@"N"));}

Code: https://github.com/schelling/HMCustomSwitch

Rong Fangzhi (http://blog.csdn.net/totogo2010)

This article follows the "signature-non-commercial use-consistency" creation public agreement