原创Blog,转载请注明出处
blog.csdn.net/hello_hwc?viewmode=contents
下午的时候闲着无聊,简单想了想,用三个UILabel来实现这个简单的自定义UISwitch
效果图,
当然,有些粗糙,后续有时间了我会把界面优化下。直接拿去用估计界面粗糙了点,网上也有很多源代码。在写了这么多Blog后发现,其实学会思考非常重要,这里希望抛砖引玉,让想要学习的同学知道如何去自定义一个控件。
第一步,分析下自定义控件的组成要素
在我这里就是四个部分
1.左半部分视图-UILabel
2.右半部分视图-UILabel
3.滑动的视图-UILabel
4.对滑动的视图添加手势-UITapGestureRecognizer
第二步,设计接口
在我这里接口比较简单,就是这个控件的状态,用Bool来表示
所以头文件为
#import
@interface HwcCustomUISwitch : UIView
@property (nonatomic)BOOL isOn;
@end
第三步,设计实现
1.对三个Label在Getter中采用惰性初始化,对滑动的View添加手势识别
2.对isOn的Setter函数中进行UI同步,保证每次Model改变了,View改变(MVC模式)
.m文件为
//
// HwcCustomUISwitch.m
// CustomActivityIndicator
//
// Created by huangwenchen on 15/1/5.
// Copyright (c) 2015年 BlogForCSDN. All rights reserved.
//
#import "HwcCustomUISwitch.h"
@interface HwcCustomUISwitch()
@property (strong,nonatomic) UILabel * leftLabel;
@property (strong,nonatomic) UILabel * rightLabel;
@property (strong,nonatomic) UILabel * tagLabel;
@end
@implementation HwcCustomUISwitch
-(UILabel*)tagLabel{
if (!_tagLabel) {
CGRect frame = self.isOn?CGRectMake(0, 0,self.frame.size.width/2, self.frame.size.height):CGRectMake(self.frame.size.width/2,0, self.frame.size.width/2,self.frame.size.height);
_tagLabel = [[UILabel alloc] initWithFrame:frame];
}
return _tagLabel;
}
-(UILabel*)leftLabel{
if (!_leftLabel) {
CGRect frame = CGRectMake(0, 0, self.frame.size.width/2, self.frame.size.height);
_leftLabel = [[UILabel alloc] initWithFrame:frame];
_leftLabel.text = @"ON";
_leftLabel.textAlignment = NSTextAlignmentCenter;
}
return _leftLabel;
}
-(UILabel*)rightLabel{
if (!_rightLabel) {
CGRect frame = CGRectMake(self.frame.size.width/2,0, self.frame.size.width/2, self.frame.size.height);
_rightLabel = [[UILabel alloc] initWithFrame:frame];
_rightLabel.text = @"OFF";
_rightLabel.textAlignment = NSTextAlignmentCenter;
}
return _rightLabel;
}
-(void)setIsOn:(BOOL)isOn{
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
_isOn = isOn;
if (isOn) {
[UIView animateWithDuration:1.0
delay:0.01
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.tagLabel.center = CGPointMake(width/4,height/2);
} completion:^(BOOL finished) {
}];
}else{
[UIView animateWithDuration:1.0
delay:0.01
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.tagLabel.center = CGPointMake(3*width/4,height/2);
} completion:^(BOOL finished) {
}];
}
}
-(void)setUp{
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];
[self.tagLabel addGestureRecognizer:tap];
self.tagLabel.userInteractionEnabled = YES;
self.userInteractionEnabled = YES;
self.rightLabel.backgroundColor = [UIColor brownColor];
[self addSubview:self.rightLabel];
self.leftLabel.backgroundColor = [UIColor yellowColor];
[self addSubview:self.leftLabel];
self.tagLabel.backgroundColor = [UIColor greenColor];
[self addSubview:self.tagLabel];
self.layer.cornerRadius = self.frame.size.height/10;
self.clipsToBounds = YES;
}
-(void)tap{
self.isOn = !self.isOn;
}
-(id)initWithCoder:(NSCoder *)aDecoder{
if (self = [super initWithCoder:aDecoder]) {
[self setUp];
}
return self;
}
-(id)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setUp];
}
return self;
}
@end
然后,在使用的地方
HwcCustomUISwitch * hwcSwitch = [[HwcCustomUISwitch alloc] initWithFrame:CGRectMake(100, 100, 100, 40)];
[self.view addSubview:hwcSwitch];
如果想要使用image直接设置UILabel的属性就行了。