自定义UISlider之点触摸

ViewController.m

#import "ViewController.h"
#import "MySlider.h"  // 导入自定义封装的MySlider类头文件
@interface ViewController ()
@end
@implementation ViewController
            
- (void)viewDidLoad {
    [super viewDidLoad];
    
     // 使用自定义封装的MySlider类新建一个slider，并初始化位置及大小
    MySlider* slider = [[MySlider alloc]initWithFrame:CGRectMake(10, 100, 300, 100)];
    
    // 设置背景颜色
    // slider.backgroundColor = [UIColor brownColor];
    // 监听响应事件
    [slider addTarget:self action:@selector(changeValue:) forControlEvents:UIControlEventValueChanged];
    // 设置最大值
    slider.minValue = 10;
    // 设置最小值
    slider.maxValue = 300;
    // 设置当前值
    slider.curValue = 160;
    // 设置滑条颜色
    [slider setProgressColor:[UIColor purpleColor]];
    // 添加到视图上
    [self.view addSubview:slider];
    
}
// 监听的响应事件
- (void)changeValue:(MySlider*)sender{
    // 打印输入当前值
    NSLog(@"%g",sender.curValue);
}

MySlider.h

#import <UIKit/UIKit.h>

@interface MySlider : UIControl
/** 最小、大值 */
@property (nonatomic,assign) int minValue,maxValue;
/** 当前值 */
@property (nonatomic,assign) float curValue;
/** 重设进度条颜色 */
- (void)setProgressColor:(UIColor*)color;
/** 重设滑块颜色 */
- (void)setThumbColor:(UIColor*)color;
@end

MySlider.m

#import "MySlider.h"

@implementation MySlider
// 自定义初始化方法
- (instancetype)init{
    if (self != [super init]) {
        // 调用自定义的initSubView方法
        [self initSubView];
    }
    return self;
}
// 自定义带位置及大小的初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 调用自定义的initSubView方法
        [self initSubView];
    }
    return self;
}
#pragma mark - 封装自定义的UISlider属性
// 封装自定义的UISlider属性
- (void)initSubView{
    // 使用UIView新建一个progress进度条，并设置位置及大小
    UIView* progress = [[UIView alloc]initWithFrame:CGRectMake(0,0,self.frame.size.width, 10)];
    // 定义一个CGPoint类型的变量center
    CGPoint center;
    // 获取进度条父视图x轴的中心点坐标
    center.x = CGRectGetMidX(self.bounds);
    // 获取进度条父视图y轴的中心点坐标
    center.y = CGRectGetMidY(self.bounds);
    
//    center.x = self.frame.size.width/2;
//    center.y = self.frame.size.height/2-5;
    // 把获取的中心点坐标赋值给进度条
    progress.center = center;
    // 设置进度条背景颜色
    progress.backgroundColor = [UIColor grayColor];
    // 设置进度条标签
    progress.tag = 1;
    // 把进度条添加到视图上
    [self addSubview:progress];
    
    // 使用UIView新建一个thumb滑块，并设置位置及大小
    UIView* thumb = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
    // 设置滑块标签
    thumb.tag = 2;
    // 设置滑块背景颜色
    thumb.backgroundColor = [UIColor redColor];
    // 设置滑块圆角
    thumb.layer.cornerRadius = 15;
    // 把获取的中心点赋值给滑块
    thumb.center = center;
    // 把滑块添加到视图上
    [self addSubview:thumb];
}
#pragma mark - 设置滑块当前值
// 设置滑块当前值
- (void)setCurValue:(float)curValue
{
    // 把设置的当前值赋值给变量_curValue
    _curValue = curValue;
    // 定义一个CGPoint类型的变量center接收通过标签来获取的滑块的中心点
    CGPoint center = [self viewWithTag:2].center;
    // 设置的当前值如果小于最小值或大于最大值就返回，当前值为默认值（此时默认值为上面获取的中心点);
    if (_curValue<_minValue || _curValue>_maxValue) {
        return;
        // 否则，就把当前值减去最小值，除以，最大值减去最小值，的百分比
        // 乘以进度条的宽度的值赋值给滑块中心点的x的值
    }else{
        center.x = (_curValue - _minValue)/(_maxValue - _minValue)*[self viewWithTag:1].frame.size.width;
    }
    // 打印输出此时滑块相对于整个屏幕x轴中心点的x值和滑块此时相对于滑条的当前值；
    NSLog(@"center.x = %f,_curValue = %g",center.x,_curValue);
    // 把中心点重新赋值赋值给滑块
    [self viewWithTag:2].center = center;
}
#pragma mark - 设置进度条颜色
// 设置进度条颜色
- (void)setProgressColor:(UIColor *)color{
    // 定义一个UIView类型的变量view来接收通过标签获取的进度条
    UIView *view = [self viewWithTag:1];
    // 把设置的颜色赋值给进度条
    view.backgroundColor = color;
}
#pragma mark - 设置滑块颜色
// 设置滑块颜色
- (void)setThumbColor:(UIColor *)color{
     // 定义一个UIView类型的变量view来接收通过标签获取的滑块
    UIView* view = [self viewWithTag:2];
    // 把设置的颜色赋值给滑块
    view.backgroundColor = color;
}
#pragma mark - 封装touch方法
// 封装touch方法
-(void)touchesEnded:(NSSet *)touches{
    // 定义一个UITouch类型的变量touch，并初始化为被点击的任意对象
    UITouch* touch = [touches anyObject];
    // 定义一个CGPoint类型的变量p，并初始化为被点击对象的位置（x、y坐标）
    CGPoint p = [touch locationInView:self];
    // 定义一个CGPoint类型的变量center接收通过标签来获取的滑块的中心点
    CGPoint center = [self viewWithTag:2].center;
    // 如果点击的位置小于0或者点击的位置大于被点击对象的最大x值就返回
    // (表示如果点击的位置超出了滑条两端的位置就没有反应)
    if (p.x < 0||p.x>self.frame.size.width) {
        return;
    }
    // 如果点击位置的y轴坐标的值减去滑块中心点坐标y轴的值的绝对值大于15就返回
    // (表示如果点击的位置距离进度条的位置，高度超过15就没有反应)
    if(ABS(p.y - center.y)>15){
        return;
    }
    // 把点击位置的x轴坐标赋值给滑块的中心点x坐标
    center.x = p.x;
    // 把改变x轴位置后的中心点重新赋值给滑块
    [self viewWithTag:2].center = center;
    // 定义一个float类型的变量rate，初始化为:点击的x轴坐标除以进度条父类视图的宽度的百分比
    float rate = p.x / self.frame.size.width;
    // 把最小值加最大值减去最小值的差乘以百分比的值赋值给当前值
    _curValue = _minValue + (_maxValue - _minValue)*rate;
    // 当值改变的时候发送消息给滑块本身
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}
#pragma mark - 触摸开始
// 触摸开始
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    // 调用封装好的touch方法
    [self touchesEnded:touches];
}
#pragma mark - 按钮移动
// 按钮移动
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    // 调用封装好的touch方法
    [self touchesEnded:touches];
}
#pragma mark - 结束触摸
// 结束触摸
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    // 调用封装好的touch方法
    [self touchesEnded:touches];
}
@end