自定义UISlider之点触摸

ViewController.m

 1 #import "ViewController.h"

 2 #import "MySlider.h"  // 导入自定义封装的MySlider类头文件

 3 @interface ViewController ()

 4 @end

 5 @implementation ViewController

 6             

 7 - (void)viewDidLoad {

 8     [super viewDidLoad];

 9     

10      // 使用自定义封装的MySlider类新建一个slider，并初始化位置及大小

11     MySlider* slider = [[MySlider alloc]initWithFrame:CGRectMake(10, 100, 300, 100)];

12     

13     // 设置背景颜色

14     // slider.backgroundColor = [UIColor brownColor];

15     // 监听响应事件

16     [slider addTarget:self action:@selector(changeValue:) forControlEvents:UIControlEventValueChanged];

17     // 设置最大值

18     slider.minValue = 10;

19     // 设置最小值

20     slider.maxValue = 300;

21     // 设置当前值

22     slider.curValue = 160;

23     // 设置滑条颜色

24     [slider setProgressColor:[UIColor purpleColor]];

25     // 添加到视图上

26     [self.view addSubview:slider];

27     

28 }

29 // 监听的响应事件

30 - (void)changeValue:(MySlider*)sender{

31     // 打印输入当前值

32     NSLog(@"%g",sender.curValue);

33 }

MySlider.h

 1 #import <UIKit/UIKit.h>

 2 

 3 @interface MySlider : UIControl

 4 /** 最小、大值 */

 5 @property (nonatomic,assign) int minValue,maxValue;

 6 /** 当前值 */

 7 @property (nonatomic,assign) float curValue;

 8 /** 重设进度条颜色 */

 9 - (void)setProgressColor:(UIColor*)color;

10 /** 重设滑块颜色 */

11 - (void)setThumbColor:(UIColor*)color;

12 @end

MySlider.m

  1 #import "MySlider.h"

  2 

  3 @implementation MySlider

  4 // 自定义初始化方法

  5 - (instancetype)init{

  6     if (self != [super init]) {

  7         // 调用自定义的initSubView方法

  8         [self initSubView];

  9     }

 10     return self;

 11 }

 12 // 自定义带位置及大小的初始化方法

 13 - (instancetype)initWithFrame:(CGRect)frame

 14 {

 15     self = [super initWithFrame:frame];

 16     if (self) {

 17         // 调用自定义的initSubView方法

 18         [self initSubView];

 19     }

 20     return self;

 21 }

 22 #pragma mark - 封装自定义的UISlider属性

 23 // 封装自定义的UISlider属性

 24 - (void)initSubView{

 25     // 使用UIView新建一个progress进度条，并设置位置及大小

 26     UIView* progress = [[UIView alloc]initWithFrame:CGRectMake(0,0,self.frame.size.width, 10)];

 27     // 定义一个CGPoint类型的变量center

 28     CGPoint center;

 29     // 获取进度条父视图x轴的中心点坐标

 30     center.x = CGRectGetMidX(self.bounds);

 31     // 获取进度条父视图y轴的中心点坐标

 32     center.y = CGRectGetMidY(self.bounds);

 33     

 34 //    center.x = self.frame.size.width/2;

 35 //    center.y = self.frame.size.height/2-5;

 36     // 把获取的中心点坐标赋值给进度条

 37     progress.center = center;

 38     // 设置进度条背景颜色

 39     progress.backgroundColor = [UIColor grayColor];

 40     // 设置进度条标签

 41     progress.tag = 1;

 42     // 把进度条添加到视图上

 43     [self addSubview:progress];

 44     

 45     // 使用UIView新建一个thumb滑块，并设置位置及大小

 46     UIView* thumb = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];

 47     // 设置滑块标签

 48     thumb.tag = 2;

 49     // 设置滑块背景颜色

 50     thumb.backgroundColor = [UIColor redColor];

 51     // 设置滑块圆角

 52     thumb.layer.cornerRadius = 15;

 53     // 把获取的中心点赋值给滑块

 54     thumb.center = center;

 55     // 把滑块添加到视图上

 56     [self addSubview:thumb];

 57 }

 58 #pragma mark - 设置滑块当前值

 59 // 设置滑块当前值

 60 - (void)setCurValue:(float)curValue

 61 {

 62     // 把设置的当前值赋值给变量_curValue

 63     _curValue = curValue;

 64     // 定义一个CGPoint类型的变量center接收通过标签来获取的滑块的中心点

 65     CGPoint center = [self viewWithTag:2].center;

 66     // 设置的当前值如果小于最小值或大于最大值就返回，当前值为默认值（此时默认值为上面获取的中心点);

 67     if (_curValue<_minValue || _curValue>_maxValue) {

 68         return;

 69         // 否则，就把当前值减去最小值，除以，最大值减去最小值，的百分比

 70         // 乘以进度条的宽度的值赋值给滑块中心点的x的值

 71     }else{

 72         center.x = (_curValue - _minValue)/(_maxValue - _minValue)*[self viewWithTag:1].frame.size.width;

 73     }

 74     // 打印输出此时滑块相对于整个屏幕x轴中心点的x值和滑块此时相对于滑条的当前值；

 75     NSLog(@"center.x = %f,_curValue = %g",center.x,_curValue);

 76     // 把中心点重新赋值赋值给滑块

 77     [self viewWithTag:2].center = center;

 78 }

 79 #pragma mark - 设置进度条颜色

 80 // 设置进度条颜色

 81 - (void)setProgressColor:(UIColor *)color{

 82     // 定义一个UIView类型的变量view来接收通过标签获取的进度条

 83     UIView *view = [self viewWithTag:1];

 84     // 把设置的颜色赋值给进度条

 85     view.backgroundColor = color;

 86 }

 87 #pragma mark - 设置滑块颜色

 88 // 设置滑块颜色

 89 - (void)setThumbColor:(UIColor *)color{

 90      // 定义一个UIView类型的变量view来接收通过标签获取的滑块

 91     UIView* view = [self viewWithTag:2];

 92     // 把设置的颜色赋值给滑块

 93     view.backgroundColor = color;

 94 }

 95 #pragma mark - 封装touch方法

 96 // 封装touch方法

 97 -(void)touchesEnded:(NSSet *)touches{

 98     // 定义一个UITouch类型的变量touch，并初始化为被点击的任意对象

 99     UITouch* touch = [touches anyObject];

100     // 定义一个CGPoint类型的变量p，并初始化为被点击对象的位置（x、y坐标）

101     CGPoint p = [touch locationInView:self];

102     // 定义一个CGPoint类型的变量center接收通过标签来获取的滑块的中心点

103     CGPoint center = [self viewWithTag:2].center;

104     // 如果点击的位置小于0或者点击的位置大于被点击对象的最大x值就返回

105     // (表示如果点击的位置超出了滑条两端的位置就没有反应)

106     if (p.x < 0||p.x>self.frame.size.width) {

107         return;

108     }

109     // 如果点击位置的y轴坐标的值减去滑块中心点坐标y轴的值的绝对值大于15就返回

110     // (表示如果点击的位置距离进度条的位置，高度超过15就没有反应)

111     if(ABS(p.y - center.y)>15){

112         return;

113     }

114     // 把点击位置的x轴坐标赋值给滑块的中心点x坐标

115     center.x = p.x;

116     // 把改变x轴位置后的中心点重新赋值给滑块

117     [self viewWithTag:2].center = center;

118     // 定义一个float类型的变量rate，初始化为:点击的x轴坐标除以进度条父类视图的宽度的百分比

119     float rate = p.x / self.frame.size.width;

120     // 把最小值加最大值减去最小值的差乘以百分比的值赋值给当前值

121     _curValue = _minValue + (_maxValue - _minValue)*rate;

122     // 当值改变的时候发送消息给滑块本身

123     [self sendActionsForControlEvents:UIControlEventValueChanged];

124 }

125 #pragma mark - 触摸开始

126 // 触摸开始

127 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

128     // 调用封装好的touch方法

129     [self touchesEnded:touches];

130 }

131 #pragma mark - 按钮移动

132 // 按钮移动

133 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

134     // 调用封装好的touch方法

135     [self touchesEnded:touches];

136 }

137 #pragma mark - 结束触摸

138 // 结束触摸

139 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

140     // 调用封装好的touch方法

141     [self touchesEnded:touches];

142 }

143 @end