iOS-仿手电筒效果实现

效果图如下:

拖动按钮.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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容