iOS-仿手电筒效果实现

2020-09-02  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读