要实现一个圆环形滑块,可以使用 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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录