UIslider滑块控件在IOS开发中会常用到,可用于调节音量,字体大小等UI方面的交互,用法总结如下:
1.初始化一个滑块:
UISlider * slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
2.属性
@property(nonatomic) float value;
这个值是介于滑块的最大值和最小值之间的,如果没有设置边界值,默认为0-1;
设置滑块最小边界值(默认为0)
@property(nonatomic) float minimumValue;
设置滑块最大边界值(默认为1)
@property(nonatomic) float maximumValue;
设置滑块最左端显示的图片:
@property(nonatomic,retain) UIImage *minimumValueImage;
设置滑块最右端显示的图片:
@property(nonatomic,retain) UIImage *maximumValueImage;
设置滑块值是否连续变化(默认为YES)
@property(nonatomic,getter=isContinuous) BOOL continuous;
这个属性设置为YES则在滑动时,其value就会随时变化,设置为NO,则当滑动结束时,value才会改变。
设置滑块左边(小于部分)线条的颜色
@property(nonatomic,retain) UIColor *minimumTrackTintColor;
设置滑块右边(大于部分)线条的颜色
@property(nonatomic,retain) UIColor *maximumTrackTintColor;
设置滑块颜色(影响已划过一端的颜色)
@property(nonatomic,retain) UIColor *thumbTintColor;
注意这个属性:如果你没有设置滑块的图片,那个这个属性将只会改变已划过一段线条的颜色,不会改变滑块的颜色,如果你设置了滑块的图片,又设置了这个属性,那么滑块的图片将不显示,滑块的颜色会改变(IOS7)
手动设置滑块的值:
- (void)setValue:(float)value animated:(BOOL)animated;
设置滑块的图片:
- (void)setThumbImage:(UIImage *)image forState:(UIControlState)state;
设置滑块划过部分的线条图案
- (void)setMinimumTrackImage:(UIImage *)image forState:(UIControlState)state;
设置滑块未划过部分的线条图案
- (void)setMaximumTrackImage:(UIImage *)image forState:(UIControlState)state;
对应的几个get方法
- (UIImage *)thumbImageForState:(UIControlState)state;
- (UIImage *)minimumTrackImageForState:(UIControlState)state;
- (UIImage *)maximumTrackImageForState:(UIControlState)state;
对应的设置当前状态的响应属性的方法
@property(nonatomic,readonly) UIImage* currentThumbImage;
@property(nonatomic,readonly) UIImage* currentMinimumTrackImage;
@property(nonatomic,readonly) UIImage* currentMaximumTrackImage;
添加触发事件
[slider addTarget:self action:@selector(log:) forControlEvents:UIControlEventValueChanged];
3.实用举例
(1)一共四个控件,最大值/最小值/当前值label;一个滑杆。
⚠️:滑杆高度设置为0,不能左右滑动!!
a.创建控件
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];
[self.view addSubview:slider];
b.设置属性
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];
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.thumbTintColor = [UIColor redColor];//设置了滑轮的颜色,如果设置了滑轮的样式图片就不会显示
[slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];// 针对值变化添加响应方法
[self.view addSubview:slider];
⚠️:slider.continuous = YES; 这个设置有什么用呢?设为YES后,我们才能在拖动滑块的过程中持续获取其值变更事件,如果是NO,则只有在滑动停止时才会获取变更事件。
c.创建好三个label
// 当前值label
self.valueLabel = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 100) / 2, slider.frame.origin.y + 30, 100, 20)];
self.valueLabel.textAlignment = NSTextAlignmentCenter;
self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];
[self.view addSubview:self.valueLabel];
// 最小值label
UILabel *minLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x - 35, slider.frame.origin.y, 30, 20)];
minLabel.textAlignment = NSTextAlignmentRight;
minLabel.text = [NSString stringWithFormat:@"%.1f", slider.minimumValue];
[self.view addSubview:minLabel];
// 最大值label
UILabel *maxLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x + slider.frame.size.width + 5, slider.frame.origin.y, 30, 20)];
maxLabel.textAlignment = NSTextAlignmentLeft;
maxLabel.text = [NSString stringWithFormat:@"%.1f", slider.maximumValue];
[self.view addSubview:maxLabel];
⚠️:我们label的值并不是直接定义的,而是获取滑动条的最大、最小、当前值,然后取小数点前一位显示的,因为滑动条是连续变化的,其值是浮点型的连续小数,如果不取小数点后的位数,得到的将是没有规律的小数。
d.拖动滑动条的响应方法
我们要做到的是当前值的label显示的内容随着滑动条的滑动而变化,那么只需要在滑动条的响应方法中设置label的显示内容就可以了,注意同样要取小数点前一位,因为我们continuous设为了YES,所以显示的当前值会随着拖动实时改变。
// slider变动时改变label值
- (void)sliderValueChanged:(id)sender {
UISlider *slider = (UISlider *)sender;
self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];
}
e.引用实例