我们所常见的滑块是系统提供的UISlider,但是很多时候slider不能满足我们的需要,比如样式,比如可点击确定进度,所以就会自己封装了,博主这里封装了一个slider,可以手动设置value,进度条颜色,进度条高度,滑块大小,滑块颜色,滑块背景图片,如果什么都不设置,则有默认的值。
看代码:
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
_value = 0;
_widthSameHeight = 30;
[self setSlierUI];
}
return self;
}
- (void)setSlierUI
{
_baseView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
[self addSubview:_baseView];
_preSliderView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, 20)];
_preSliderView.center = _baseView.center;
_preSliderView.layer.cornerRadius = 10;
_preSliderView.backgroundColor = [UIColor grayColor];
_preSliderView.clipsToBounds = YES;
[_baseView addSubview:_preSliderView];
_lastSliderView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, 20)];
_lastSliderView.backgroundColor = [UIColor blueColor];
[_preSliderView addSubview:_lastSliderView];
UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapMoving:)];
[_preSliderView addGestureRecognizer:tapGes];
_sliderBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
_sliderBtn.frame = CGRectMake(0, 0, _widthSameHeight, _widthSameHeight);
_sliderBtn.center = CGPointMake(0, _baseView.center.y);
_sliderBtn.backgroundColor = [UIColor lightGrayColor];
if (_slImage == nil) {
_sliderBtn.layer.borderWidth = 0.5;
_sliderBtn.layer.borderColor = [UIColor grayColor].CGColor;
_sliderBtn.backgroundColor = [UIColor lightGrayColor];
}
else
{
[_sliderBtn setImage:_slImage forState:UIControlStateNormal];
}
_sliderBtn.layer.cornerRadius = _widthSameHeight / 2;
[_sliderBtn addTarget:self action:@selector(dragMoving:withEvent:)forControlEvents: UIControlEventTouchDragInside];
[_baseView addSubview:_sliderBtn];
}
- (void)tapMoving:(UITapGestureRecognizer *)tap
{
CGPoint point = [tap locationInView:_preSliderView];
_sliderBtn.center = CGPointMake(point.x , _baseView.center.y);
_lastSliderView.frame = CGRectMake(0, 0, point.x, 20);
_value = point.x / _preSliderView.bounds.size.width;
}
- (void)dragMoving: (UIButton *)btn withEvent:(UIEvent *)event
{
CGPoint point = [[[event allTouches] anyObject] locationInView:self];
CGFloat x = point.x;
if(x<=0)
{
point.x = 0;
}
if(x >= self.bounds.size.width)
{
point.x = self.bounds.size.width;
}
point.y = self.frame.size.height / 2;
btn.center = point;
_lastSliderView.frame = CGRectMake(0, 0, point.x, 20);
_value = point.x / _preSliderView.bounds.size.width;
}
- (void)setValue:(CGFloat)value
{
_value = value;
_sliderBtn.center = CGPointMake(_value * _baseView.bounds.size.width , _baseView.center.y);
_lastSliderView.frame = CGRectMake(0, 0, _sliderBtn.center.x, 20);
}
- (void)setSlImage:(UIImage *)slImage
{
_slImage = slImage;
[_sliderBtn setImage:_slImage forState:UIControlStateNormal];
}
- (void)setSlHeight:(CGFloat)slHeight
{
_slHeight = slHeight;
if (_slHeight >= 2 && _slHeight <= 20) {
_preSliderView.frame = CGRectMake(0, 0, _baseView.bounds.size.width, _slHeight);
_preSliderView.center = _baseView.center;
}
}
- (void)setPreBackgroundColor:(UIColor *)preBackgroundColor
{
_preBackgroundColor = preBackgroundColor;
_preSliderView.backgroundColor = _preBackgroundColor;
}
- (void)setLastBackgroundColor:(UIColor *)lastBackgroundColor
{
_lastBackgroundColor = lastBackgroundColor;
_lastSliderView.backgroundColor = _lastBackgroundColor;
}
- (void)setWidthSameHeight:(CGFloat)widthSameHeight
{
_widthSameHeight = widthSameHeight;
_sliderBtn.frame = CGRectMake(0, 0, _widthSameHeight, _widthSameHeight);
_sliderBtn.center = CGPointMake(_value * _baseView.bounds.size.width, _baseView.center.y);
_sliderBtn.layer.cornerRadius = _widthSameHeight / 2;
}
- (void)setSliderBackgroundColor:(UIColor *)sliderBackgroundColor
{
_sliderBackgroundColor = sliderBackgroundColor;
_sliderBtn.backgroundColor = _sliderBackgroundColor;
}
需要看set和get方法的请下载Demo查看,这里有一个小问题,本来想用Masonry的,但是没有封装好,所以不能用Masonry对这个封装的slider进行操作,否则就不能用了,不过不用担心,这个slider用的是相对布局对整体布局没什么影响,使用过程中如有需要,请自行调整里面的布局,后面博主会进行改造。
下载地址:https://github.com/codeliu6572/MySlider