通过苹果原有的UISwitch的属性还无法给按钮上加上文字，无法自定义各个部分的颜色。所以就自定义一个类继承UIView，加上点击手势来仿写一个UISwitch。
本文只讲实现原理，代码未经任何封装。想直接使用现成的封装好的控件，可移步文末下载Demo。Demo中自定义控件XYSwitch拖入到项目中使用，已封装好接口设置各个参数。
本控件无需依赖任何第三方库/插件。
自定义UIView属性列表
//switch的按钮
@property(nonatomic,strong)UIView* buttonView;
//switch上的文字
@property(nonatomic,strong)UILabel* contentLabel;
//点击手势
@property(nonatomic,strong)UITapGestureRecognizer* tapRecognizer;
//记录switch的状态(开/关)
@property(nonatomic,assign)BOOL isOn;
使用使用点击手势获取用户的点击，在监听事件里，根据开关的状态调用不同的UI布局
首先要设置初始的UI布局
- (void)frameSetup {
CGFloat x,y,w,h;
x = 2;
y = 2;
w = self.frame.size.height - 2 * 2;
h = self.frame.size.height - 2 * 2;
self.btnView.frame = CGRectMake(x, y, w, h);
self.btnView.layer.cornerRadius = w / 2;
self.btnView.layer.masksToBounds = YES;
x = 0;
y = 0;
self.contentLabel.frame = CGRectMake(x, y, w, h);
self.layer.cornerRadius = self.frame.size.height * 0.5;
self.layer.masksToBounds = YES;
}
UITapGestureRecognizer点击事件代码
//改变开关状态
- (void)changeState {
__weakXYSwitch * weakSelf = self;
self.isOn = !self.isOn;
//block非空判断,不写会崩溃
if (self.changeStateBlock) {
self.changeStateBlock(self.isOn);
} else {
NSLog(@"self.changeStateBlock() is nil");
}
//UIView动画改变UI布局
if (self.isOn) {
[UIView animateWithDuration:0 animations:^{
[weakSelf stateOn];
}];
}else{
[UIView animateWithDuration:0 animations:^{
[weakSelf stateOff];
}];
}
}
核心代码(即改变按钮的frame来仿照UISwitch的开和关)
- (void)stateOff { //关闭状态的UI
self.backgroundColor = self.bgOffColor;
self.btnView.backgroundColor = self.btnOffColor;
self.contentLabel.textColor = self.textOffColor;
self.contentLabel.text = self.offText;
CGFloat x,y,w,h;
x = 2;
y = 2;
w = self.frame.size.height-2*2;
h = self.frame.size.height-2*2;
self.btnView.frame = CGRectMake(x, y, w, h);
}
- (void)stateOn { //打开状态的UI
self.backgroundColor = self.bgOnColor;
self.btnView.backgroundColor = self.btnOnColor;
self.contentLabel.textColor = self.textOnColor;
self.contentLabel.text = self.onText;
CGFloat x,y,w,h;
x = self.frame.size.width - self.btnView.frame.size.width - 2;
y =2;
w = self.frame.size.height-2*2;
h = self.frame.size.height-2*2;
self.btnView.frame = CGRectMake(x, y, w, h);
}
实现原理讲解就到此结束了。
自定义UIView 的好处，可以自己随意改变任意控件的颜色、大小和内容。
效果图:
附Demo地址: github.com/DXY123/XYSwitch
