效果图如下:
实现方案
1、采用系统UISlider实现
2、自己使用贝塞尔曲线绘制
方案一(不可行,有bug)
遇到的问题:当将UISlider的宽度加宽的一定宽度后,拖动效果不是渐变,会突然发送改变,此处简单记录下UISlider的基础用法
1、基础设置
// 初始化
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(100, 200, 100, 20)];
// 添加到俯视图
[self.view addSubview:slider];
// 设置最小值
slider.minimumValue = 9;
// 设置最大值
slider.maximumValue = 11;
// 设置初始值
slider.value = (slider.minimumValue + slider.maximumValue) / 2;
// 设置可连续变化
slider.continuous = YES;
//滑轮左边颜色,如果设置了左边的图片就不会显示
slider.minimumTrackTintColor = [UIColor greenColor];
//滑轮右边颜色,如果设置了右边的图片就不会显示
slider.maximumTrackTintColor = [UIColor redColor];
/// 也可设置为图片
///[slider setMinimumTrackImage:[UIImageimageNamed:@"max.png"] forState:UIControlStateNormal];
//[slider setMaximumTrackImage:[UIImageimageNamed:@"min.png"] forState:UIControlStateNormal];
//设置了滑轮的颜色,如果设置了滑轮的样式图片就不会显示 slider.thumbTintColor = [UIColor redColor];
// 针对值变化添加响应方法
[slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
2、旋转90度,竖直放置
slider.transform = CGAffineTransformMakeRotation(1.57079633);
3、改变slider的宽度(方法3),需要重写一个继承与UISlider的类了,然后重写里面的实现方法来控制:
/// 设置最小值
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
/// 设置最大值
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
/// 控制slider的宽高
- (CGRect)trackRectForBounds:(CGRect)bounds;
/// 改变滑块的触摸范围
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;
方案二(自己绘制)
提供实现代码如下
.h文件
#import <UIKit/UIKit.h>
typedef void (^sliderBlock)(float);
NS_ASSUME_NONNULL_BEGIN
@interface HYLightSlider : UIView
@property (nonatomic, copy) sliderBlock clickBlock;
-(instancetype)initWithFrame:(CGRect)frame defaultValue:(float)defaultValue;
@end
NS_ASSUME_NONNULL_END
.m文件
#import "HYLightSlider.h"
@interface HYLightSlider()
@property (nonatomic, assign) float defaultValue;
@property (nonatomic, assign) float offSet;
@property (nonatomic, strong) UIBezierPath *path;
@property (nonatomic, strong) CAShapeLayer *tubeShape;
@end
@implementation HYLightSlider
-(instancetype)initWithFrame:(CGRect)frame defaultValue:(float)defaultValue{
self = [super initWithFrame:frame];
if(self){
self.backgroundColor = [UIColor clearColor];
self.defaultValue = defaultValue;
UIPanGestureRecognizer *imageViewPanGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];
[self addGestureRecognizer:imageViewPanGesture];
[self initNewPath];
[self drawWholeShape];
}
return self;
}
- (void)initNewPath{
self.path = [UIBezierPath bezierPath];
self.tubeShape = [[CAShapeLayer alloc]init];
self.tubeShape.strokeColor = [UIColor colorWithHexValue:HY_COR3].CGColor;
self.tubeShape.fillColor = [UIColor colorWithHexValue:HY_COR3].CGColor;
}
- (void)drawWholeShape{
// 管道
for (CALayer *object in self.layer.sublayers) {
[object removeFromSuperlayer];
}
[self.path removeAllPoints];
self.path.lineWidth = self.frame.size.width;
[self.path moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height)];
[self.path addLineToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height*(1.0-self.defaultValue))];//添加一条子路径
[self.path stroke];
self.tubeShape = [[CAShapeLayer alloc]init];
self.tubeShape.path = self.path.CGPath;
self.tubeShape.lineWidth = self.frame.size.width;
self.tubeShape.strokeColor = [UIColor colorWithHexValue:HY_COR3].CGColor;
self.tubeShape.fillColor = [UIColor colorWithHexValue:HY_COR3].CGColor;
[self.layer addSublayer:self.tubeShape];
}
#pragma mark --- targetView的拖拽手势
- (void)panGesture:(UIPanGestureRecognizer *)gesture{
switch (gesture.state) {
case UIGestureRecognizerStateBegan:
{
NSLog(@"滑动开始");
}
break;
case UIGestureRecognizerStateChanged:
{
// 获得添加手势的对象
// 获得滑动的距离 包含 x y 移动的数值
CGPoint point =[gesture translationInView:gesture.view];
//向下滑动
if(point.y >= self.frame.size.height*self.defaultValue){
self.offSet = self.frame.size.height*self.defaultValue;
//向上滑动
}else if(-point.y >= self.frame.size.height - self.frame.size.height*self.defaultValue){
self.offSet = -self.frame.size.height + self.frame.size.height*self.defaultValue;
}else{
self.offSet = point.y;
}
self.offSet = self.offSet*0.1;
self.defaultValue = (-self.offSet+self.frame.size.height*self.defaultValue)/self.frame.size.height;
if(self.defaultValue < 0.0 || self.defaultValue > 1.0){
return;
}
[self.tubeShape setNeedsDisplay];
[self drawWholeShape];
NSLog(@"滑动中");
NSLog(@"%f",self.offSet);
}
break;
case UIGestureRecognizerStateEnded:
{
NSLog(@"%f",self.offSet);
NSLog(@"滑动结束");
self.clickBlock ? self.clickBlock(self.defaultValue) : nil;
}
break;
default:
break;
}
}
@end