简单分析一下
一个刻度根视图:
image.png
三个手势:
①:小圆点的拖拽手势
②:整个视图的点击手势
需要注意的:拖拽或者点击结束以后小圆点必须确定在某一个刻度上。所以我们需要根据刻度分成相应的区间如图示,上区间对应下刻度点,当手势结束时根据所在的区间将原点移动到对应的刻度点上,并保存当前刻度。
image.png
接下来开始做:
一、懒加载创建需要的视图并设置相应的属性:
拖拽小圆点
- (UIImageView *)controlPoint {
if (!_controlPoint) {
_controlPoint = [[UIImageView alloc]init];
_controlPoint.frame = CGRectMake(20 + (SCREEN_WIDTH - 60) / 6.f, 47, 26, 26);
_controlPoint.backgroundColor = [UIColor colorWithRed:36.0/255.f green:159.0/255.f blue:244.0/255.f alpha:1.0f];
_controlPoint.layer.cornerRadius = 13;
_controlPoint.layer.masksToBounds = YES;
_controlPoint.userInteractionEnabled = YES;
[self setShadowForView:_controlPoint];
//给小点设置拖拽手势
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];
[_controlPoint addGestureRecognizer:panGesture];
}
return _controlPoint;
}
刻度根视图
- (UIView *)baseLineView {
if (!_baseLineView) {
_baseLineView = [[UIView alloc]init];
UIColor *color = [UIColor colorWithRed:81.0/255.0 green:81.0/255.0 blue:81.0/255.0 alpha:1.0];
_baseLineView.backgroundColor = color;
_baseLineView.frame = CGRectMake(30, 60, SCREEN_WIDTH - 60, 0.5);
for (int i = 0; i < 7; i++) {
UIView *line = [[UIView alloc]init];
line.backgroundColor = color;
line.frame = CGRectMake(30 + i * (SCREEN_WIDTH - 60) / 6.f, 55, 0.5, 10);
[self addSubview:line];
}
}
return _baseLineView;
}
需要的label
- (UILabel *)labels {
if (!_labels) {
_labels = [[UILabel alloc]init];
_labels.frame = CGRectMake(15, 25, 30, 15);
_labels.font = [UIFont boldSystemFontOfSize:16.f];
_labels.textAlignment = NSTextAlignmentCenter;
_labels.text = @"A";
UILabel *standard = [[UILabel alloc]init];
standard.frame = CGRectMake(10 + (SCREEN_WIDTH - 60) / 6.f, 20, 40, 20);
standard.font = [UIFont boldSystemFontOfSize:17.f];
standard.textAlignment = NSTextAlignmentCenter;
standard.text = @"标准";
[self addSubview:standard];
UILabel *max = [[UILabel alloc]init];
max.frame = CGRectMake(SCREEN_WIDTH - 20 - 30, 20, 40, 20);
max.font = [UIFont boldSystemFontOfSize:22.f];
max.textAlignment = NSTextAlignmentCenter;
max.text = @"A";
[self addSubview:max];
}
return _labels;
}
二、处理手势:
/处理单击手势
- (void)onTap:(UITapGestureRecognizer *)tap {
CGPoint locationPoint = [tap locationInView:self.self];
if (locationPoint.x >= 28 && locationPoint.x <= self.frame.size.width - 28) {
if (tap.state == UIGestureRecognizerStateEnded) {
[self changeControlWithPoint:locationPoint];
}
}
}
//处理拖拽手势
- (void)panGesture:(UIPanGestureRecognizer *)pan {
CGPoint locationPoint = [pan locationInView:self];
if (locationPoint.x >= 28 && locationPoint.x <= self.frame.size.width - 28) {
self.controlPoint.center = CGPointMake(locationPoint.x, self.baseLineView.center.y);
if (pan.state == UIGestureRecognizerStateEnded) {
[self changeControlWithPoint:locationPoint];
}
}
}
//根据最后手势结束的位置选择相应的刻度
- (void)changeControlWithPoint:(CGPoint)locationPoint {
CGFloat X = locationPoint.x;
CGFloat lineW = (SCREEN_WIDTH - 60);
CGFloat onePointX = 28;
CGFloat twoPointX = 30 + lineW / 12.f;
CGFloat threePointX = 30 + lineW / 12.f * 3.f;
CGFloat fourPonitX = 30 + lineW / 12.f * 5;
CGFloat fivePointX = 30 + lineW / 12.f * 7;
CGFloat sixPointX = 30 + lineW / 12.f * 9;
CGFloat sevenPointX = 30 + lineW / 12.f * 11;
CGFloat pointY = self.baseLineView.center.y;
if (X >= onePointX && X < twoPointX) {
self.controlPoint.center = CGPointMake(30, pointY);
}else if (X >= twoPointX && X < threePointX) {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f, pointY);
}else if (X >= threePointX && X < fourPonitX) {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 2, pointY);
}else if (X>= fourPonitX && X < fivePointX) {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 3, pointY);
}else if (X >= fivePointX && X < sixPointX) {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 4, pointY);
}else if(X >= sixPointX && X < sevenPointX) {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 5, pointY);
}else {
self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 6, pointY);
}
}
最后附上demo地址:demo地址
网友评论