ios之自定义UISwitch

系统自带的UISwitch是这样的：

既不能写字，也不能改颜色，于是在网上找到了这么一个自定义的Switch按钮，具体出处找不见了。记录一下，怕以后找不见了。

先看下效果图：

按钮的样式很多，可以文字，可以写多行，文字大小和颜色都可以设置。

看下它的源码：

[cpp] view plaincopy

1. #import <Foundation/Foundation.h>
2. @interface HMCustomSwitch : UISlider {
3. BOOL on;
4. UIColor *tintColor;
5. UIView *clippingView;
6. UILabel *rightLabel;
7. UILabel *leftLabel;
8. // private member
9. BOOL m_touchedSelf;
10. }
11. @property(nonatomic,getter=isOn) BOOL on;
12. @property (nonatomic,retain) UIColor *tintColor;
13. @property (nonatomic,retain) UIView *clippingView;
14. @property (nonatomic,retain) UILabel *rightLabel;
15. @property (nonatomic,retain) UILabel *leftLabel;
16. + (HMCustomSwitch *) switchWithLeftText: (NSString *) tag1 andRight: (NSString *) tag2;
17. - (void)setOn:(BOOL)on animated:(BOOL)animated;

.m文件

[cpp] view plaincopy

1. #import "HMCustomSwitch.h"
2. @implementation HMCustomSwitch
3. @synthesize on;
4. @synthesize tintColor, clippingView, leftLabel, rightLabel;
5. +(HMCustomSwitch *)switchWithLeftText:(NSString *)leftText andRight:(NSString *)rightText
6. {
7. HMCustomSwitch *switchView = [[HMCustomSwitch alloc] initWithFrame:CGRectZero];
8. switchView.leftLabel.text = leftText;
9. switchView.rightLabel.text = rightText;
10. return [switchView autorelease];
11. }
12. -(id)initWithFrame:(CGRect)rect
13. {
14. if ((self=[super initWithFrame:CGRectMake(rect.origin.x,rect.origin.y,95,27)]))
15. {
16. //      self.clipsToBounds = YES;
17. [self awakeFromNib];        // do all setup in awakeFromNib so that control can be created manually or in a nib file
18. }
19. return self;
20. }
21. -(void)awakeFromNib
22. {
23. [super awakeFromNib];
24. self.backgroundColor = [UIColor clearColor];
25. [self setThumbImage:[UIImage imageNamed:@"switchThumb.png"] forState:UIControlStateNormal];
26. [self setMinimumTrackImage:[UIImage imageNamed:@"switchBlueBg.png"] forState:UIControlStateNormal];
27. [self setMaximumTrackImage:[UIImage imageNamed:@"switchOffPlain.png"] forState:UIControlStateNormal];
28. self.minimumValue = 0;
29. self.maximumValue = 1;
30. self.continuous = NO;
31. self.on = NO;
32. self.value = 0.0;
33. self.clippingView = [[UIView alloc] initWithFrame:CGRectMake(4,2,87,23)];
34. self.clippingView.clipsToBounds = YES;
35. self.clippingView.userInteractionEnabled = NO;
36. self.clippingView.backgroundColor = [UIColor clearColor];
37. [self addSubview:self.clippingView];
38. [self.clippingView release];
39. NSString *leftLabelText = NSLocalizedString(@"ON","Custom UISwitch ON label. If localized to empty string then I/O will be used");
40. if ([leftLabelText length] == 0)
41. {
42. leftLabelText = @"l";       // use helvetica lowercase L to be a 1.
43. }
44. self.leftLabel = [[UILabel alloc] init];
45. self.leftLabel.frame = CGRectMake(0, 0, 48, 23);
46. self.leftLabel.text = leftLabelText;
47. self.leftLabel.textAlignment = NSTextAlignmentCenter;
48. self.leftLabel.font = [UIFont boldSystemFontOfSize:17];
49. self.leftLabel.textColor = [UIColor whiteColor];
50. self.leftLabel.backgroundColor = [UIColor clearColor];
51. //      self.leftLabel.shadowColor = [UIColor redColor];
52. //      self.leftLabel.shadowOffset = CGSizeMake(0,0);
53. [self.clippingView addSubview:self.leftLabel];
54. [self.leftLabel release];
55. NSString *rightLabelText = NSLocalizedString(@"OFF","Custom UISwitch OFF label. If localized to empty string then I/O will be used");
56. if ([rightLabelText length] == 0)
57. {
58. rightLabelText = @"O";  // use helvetica uppercase o to be a 0.
59. }
60. self.rightLabel = [[UILabel alloc] init];
61. self.rightLabel.frame = CGRectMake(95, 0, 48, 23);
62. self.rightLabel.text = rightLabelText;
63. self.rightLabel.textAlignment = NSTextAlignmentCenter;
64. self.rightLabel.font = [UIFont boldSystemFontOfSize:17];
65. self.rightLabel.textColor = [UIColor grayColor];
66. self.rightLabel.backgroundColor = [UIColor clearColor];
67. //      self.rightLabel.shadowColor = [UIColor redColor];
68. //      self.rightLabel.shadowOffset = CGSizeMake(0,0);
69. [self.clippingView addSubview:self.rightLabel];
70. [self.rightLabel release];
71. }
72. -(void)layoutSubviews
73. {
74. [super layoutSubviews];
75. //  NSLog(@"leftLabel=%@",NSStringFromCGRect(self.leftLabel.frame));
76. // move the labels to the front
77. [self.clippingView removeFromSuperview];
78. [self addSubview:self.clippingView];
79. CGFloat thumbWidth = self.currentThumbImage.size.width;
80. CGFloat switchWidth = self.bounds.size.width;
81. CGFloat labelWidth = switchWidth - thumbWidth;
82. CGFloat inset = self.clippingView.frame.origin.x;
83. //  NSInteger xPos = self.value * (self.bounds.size.width - thumbWidth) - (self.leftLabel.frame.size.width - thumbWidth/2);
84. NSInteger xPos = self.value * labelWidth - labelWidth - inset;
85. self.leftLabel.frame = CGRectMake(xPos, 0, labelWidth, 23);
86. //  xPos = self.value * (self.bounds.size.width - thumbWidth) + (self.rightLabel.frame.size.width - thumbWidth/2);
87. xPos = switchWidth + (self.value * labelWidth - labelWidth) - inset;
88. self.rightLabel.frame = CGRectMake(xPos, 0, labelWidth, 23);
89. //  NSLog(@"value=%f    xPos=%i",self.value,xPos);
90. //  NSLog(@"thumbWidth=%f    self.bounds.size.width=%f",thumbWidth,self.bounds.size.width);
91. }
92. - (UIImage *)image:(UIImage*)image tintedWithColor:(UIColor *)tint
93. {
94. if (tint != nil)
95. {
96. UIGraphicsBeginImageContext(image.size);
97. //draw mask so the alpha is respected
98. CGContextRef currentContext = UIGraphicsGetCurrentContext();
99. CGImageRef maskImage = [image CGImage];
100. CGContextClipToMask(currentContext, CGRectMake(0, 0, image.size.width, image.size.height), maskImage);
101. CGContextDrawImage(currentContext, CGRectMake(0,0, image.size.width, image.size.height), image.CGImage);
102. [image drawAtPoint:CGPointMake(0,0)];
103. [tint setFill];
104. UIRectFillUsingBlendMode(CGRectMake(0,0,image.size.width,image.size.height),kCGBlendModeColor);
105. UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
106. UIGraphicsEndImageContext();
107. return newImage;
108. }
109. else
110. {
111. return image;
112. }
113. }
114. -(void)setTintColor:(UIColor*)color
115. {
116. if (color != tintColor)
117. {
118. [tintColor release];
119. tintColor = [color retain];
120. [self setMinimumTrackImage:[self image:[UIImage imageNamed:@"switchBlueBg.png"] tintedWithColor:tintColor] forState:UIControlStateNormal];
121. }
122. }
123. - (void)setOn:(BOOL)turnOn animated:(BOOL)animated;
124. {
125. on = turnOn;
126. if (animated)
127. {
128. [UIView  beginAnimations:nil context:nil];
129. [UIView setAnimationDuration:0.2];
130. }
131. if (on)
132. {
133. self.value = 1.0;
134. }
135. else
136. {
137. self.value = 0.0;
138. }
139. if (animated)
140. {
141. [UIView commitAnimations];
142. }
143. }
144. - (void)setOn:(BOOL)turnOn
145. {
146. [self setOn:turnOn animated:NO];
147. }
148. - (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
149. {
150. NSLog(@"preendTrackingWithtouch");
151. [super endTrackingWithTouch:touch withEvent:event];
152. NSLog(@"postendTrackingWithtouch");
153. m_touchedSelf = YES;
154. [self setOn:on animated:YES];
155. }
156. - (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
157. {
158. [super touchesBegan:touches withEvent:event];
159. NSLog(@"touchesBegan");
160. m_touchedSelf = NO;
161. on = !on;
162. }
163. - (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
164. {
165. [super touchesEnded:touches withEvent:event];
166. NSLog(@"touchesEnded");
167. if (!m_touchedSelf)
168. {
169. [self setOn:on animated:YES];
170. [self sendActionsForControlEvents:UIControlEventValueChanged];
171. }
172. }
173. -(void)dealloc
174. {
175. [tintColor release];
176. [clippingView release];
177. [rightLabel release];
178. [leftLabel release];
179. [super dealloc];
180. }
181. @end

看代码可以知道，其实它是通过继承UISlider控件实现的，UISlider的左右分别是个UILabel，当YES的时候，滑块滑到了最右边，NO的时候滑到了最左边。

如何在代码中使用它呢？很简单：

[cpp] view plaincopy

1. - (void)loadView
2. {
3. UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
4. self.view = contentView;
5. contentView.backgroundColor = [UIColor whiteColor];
6. // Standard ON/OFF
7. HMCustomSwitch *switchView = [[HMCustomSwitch alloc] initWithFrame:CGRectZero];
8. switchView.center = CGPointMake(160.0f, 20.0f);
9. switchView.on = YES;
10. [contentView addSubview:switchView];
11. [switchView release];
12. // Custom YES/NO
13. switchView = [HMCustomSwitch switchWithLeftText:@"YES" andRight:@"NO"];
14. switchView.center = CGPointMake(160.0f, 60.0f);
15. switchView.on = YES;
16. [contentView addSubview:switchView];
17. // Custom font and color
18. switchView = [HMCustomSwitch switchWithLeftText:@"Hello " andRight:@"ABC "];
19. switchView.center = CGPointMake(160.0f, 100.0f);
20. switchView.on = YES;
21. [switchView.leftLabel setFont:[UIFont boldSystemFontOfSize:13.0f]];
22. [switchView.rightLabel setFont:[UIFont italicSystemFontOfSize:15.0f]];
23. [switchView.rightLabel setTextColor:[UIColor blueColor]];
24. [contentView addSubview:switchView];
25. // Multiple lines
26. switchView = [HMCustomSwitch switchWithLeftText:@"Hello\nWorld" andRight:@"Bye\nWorld"];
27. switchView.center = CGPointMake(160.0f, 140.0f);
28. switchView.on = YES;
29. switchView.tintColor = [UIColor orangeColor];
30. switchView.leftLabel.font = [UIFont boldSystemFontOfSize:9.0f];
31. switchView.rightLabel.font = [UIFont boldSystemFontOfSize:9.0f];
32. switchView.leftLabel.numberOfLines = 2;
33. switchView.rightLabel.numberOfLines = 2;
34. switchView.leftLabel.lineBreakMode = NSLineBreakByWordWrapping;
35. switchView.rightLabel.lineBreakMode = NSLineBreakByWordWrapping;
36. [contentView addSubview:switchView];
37. switchView = [[HMCustomSwitch alloc] init];
38. switchView.center = CGPointMake(160.0f, 180.0f);
39. switchView.on = YES;
40. switchView.tintColor = [UIColor purpleColor];
41. [contentView addSubview:switchView];
42. [switchView release];
43. switchView = [HMCustomSwitch switchWithLeftText:@"l" andRight:@"O"];
44. switchView.center = CGPointMake(160.0f, 220.0f);
45. //  customSwitch.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];
46. //  customSwitch.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];
47. [contentView addSubview:switchView];
48. // Standard ON/OFF
49. switchView = [[HMCustomSwitch alloc] init];
50. switchView.center = CGPointMake(160.0f, 260.0f);
51. switchView.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];
52. [switchView addTarget:self action:@selector(switchFlipped:) forControlEvents:UIControlEventValueChanged];
53. [contentView addSubview:switchView];
54. [switchView release];
55. UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 420, 320, 40)];
56. toolbar.tintColor = [UIColor colorWithRed:125.f/255.f green:157.f/255.f blue:93.f/255.f alpha:1.0];
57. [contentView addSubview:toolbar];
58. [contentView release];
59. }
60. -(void)switchFlipped:(HMCustomSwitch*)switchView
61. {
62. NSLog(@"switchFlipped=%f  on:%@",switchView.value, (switchView.on?@"Y":@"N"));
63. }

代码下载地址：https://github.com/schelling/HMCustomSwitch