美文网首页
iOS-仿手电筒效果实现

iOS-仿手电筒效果实现

作者: 一代千禧 | 来源:发表于2020-09-02 15:11 被阅读0次

    效果图如下:

    拖动按钮.png

    实现方案

    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
    

    相关文章

      网友评论

          本文标题:iOS-仿手电筒效果实现

          本文链接:https://www.haomeiwen.com/subject/bfhwsktx.html