iOS 圆环形滑块实现:使用 CAShapeLayer 和 UIPanGestureRecognizer
要实现一个圆环形滑块,可以使用 CAShapeLayer 和 UIPanGestureRecognizer。下面是一个简单的示例代码:
首先,创建一个自定义的 UIView 子类,命名为 CircularSliderView,实现滑块的绘制和拖动手势的处理:
#import "CircularSliderView.h"
@interface CircularSliderView ()
@property (nonatomic, strong) CAShapeLayer *sliderLayer;
@property (nonatomic, assign) CGFloat startAngle;
@property (nonatomic, assign) CGFloat endAngle;
@property (nonatomic, assign) CGFloat currentAngle;
@end
@implementation CircularSliderView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.startAngle = -M_PI_2;
self.endAngle = M_PI_2 * 3;
// 创建滑块的 layer
self.sliderLayer = [CAShapeLayer layer];
self.sliderLayer.lineWidth = 10.0;
self.sliderLayer.strokeColor = [UIColor blueColor].CGColor;
self.sliderLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:self.sliderLayer];
// 添加拖动手势
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[self addGestureRecognizer:panGestureRecognizer];
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
CGFloat radius = MIN(CGRectGetWidth(rect), CGRectGetHeight(rect)) / 2 - self.sliderLayer.lineWidth / 2;
// 绘制圆环
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:self.startAngle endAngle:self.endAngle clockwise:YES];
self.sliderLayer.path = path.CGPath;
// 设置滑块的位置
CGPoint sliderCenter = [self pointOnCircleWithCenter:center angle:self.currentAngle radius:radius];
self.sliderLayer.position = sliderCenter;
}
- (void)handlePan:(UIPanGestureRecognizer *)gestureRecognizer {
CGPoint translation = [gestureRecognizer translationInView:self];
CGFloat angle = atan2f(translation.y, translation.x);
if (angle < 0) {
angle += M_PI * 2;
}
self.currentAngle = angle;
[self setNeedsDisplay];
if (gestureRecognizer.state == UIGestureRecognizerStateEnded) {
// 拖动结束后的处理
}
}
- (CGPoint)pointOnCircleWithCenter:(CGPoint)center angle:(CGFloat)angle radius:(CGFloat)radius {
CGFloat x = center.x + radius * cosf(angle);
CGFloat y = center.y + radius * sinf(angle);
return CGPointMake(x, y);
}
@end
然后,在需要使用圆环形滑块的地方创建一个 CircularSliderView 实例并添加到视图中即可:
CircularSliderView *sliderView = [[CircularSliderView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
[self.view addSubview:sliderView];
通过拖动滑块,可以改变滑块在圆环上的位置,并在拖动结束后进行相应的处理。
原文地址: https://www.cveoy.top/t/topic/pLj1 著作权归作者所有。请勿转载和采集!