iOS UISlider和UIStepper控件

1. UISlider控件

1.1 主要属性

// 默认值，默认是0.0
@property(nonatomic) float value;
// 最小值，默认是0.0
@property(nonatomic) float minimumValue;
// 最大值，默认是1.0
@property(nonatomic) float maximumValue;

// 滑动时，value是否随时变化，默认是YES
@property(nonatomic,getter=isContinuous) BOOL continuous;

// 滑块最左端显示的图片
@property(nullable, nonatomic,strong) UIImage *minimumValueImage;
// 滑块最右端显示的图片
@property(nullable, nonatomic,strong) UIImage *maximumValueImage;

// 滑块颜色
@property(nullable, nonatomic,strong) UIColor *thumbTintColor;
// 滑块左边（小于部分）线条的颜色
@property(nullable, nonatomic,strong) UIColor *minimumTrackTintColor;
// 滑块右边（大于部分）线条的颜色
@property(nullable, nonatomic,strong) UIColor *maximumTrackTintColor;

示例代码

CGFloat width = [UIScreen mainScreen].bounds.size.width - 100;
UISlider *normalSlider = [[UISlider alloc] initWithFrame:CGRectMake(50, 100, width, 80)];
normalSlider.value = 0.2f;
[self.view addSubview:normalSlider];

UISlider *valueSlider = [[UISlider alloc] initWithFrame:CGRectMake(50, 200, width, 80)];
valueSlider.minimumValue = 1;
valueSlider.maximumValue = 100;
valueSlider.value = 20;
valueSlider.continuous = NO;
valueSlider.minimumValueImage = [UIImage imageNamed:@"icon_jian"];
valueSlider.maximumValueImage = [UIImage imageNamed:@"icon_jia"];
valueSlider.minimumTrackTintColor = [UIColor greenColor];
valueSlider.maximumTrackTintColor = [UIColor redColor];
valueSlider.thumbTintColor = [UIColor magentaColor];
[self.view addSubview:valueSlider];

显示如下

1.2 主要方法

// 设置滑块的值
- (void)setValue:(float)value animated:(BOOL)animated;

// 设置滑块图片
- (void)setThumbImage:(nullable UIImage *)image forState:(UIControlState)state;
// 设置滑块左边（小于部分）线条的图片
- (void)setMinimumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;
// 设置滑块右边（大于部分）线条的图片
- (void)setMaximumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;

示例代码

UISlider *imageSlider = [[UISlider alloc] initWithFrame:CGRectMake(50, 300, width, 80)];
[imageSlider setThumbImage:[UIImage imageNamed:@"icon_money_b"] forState:UIControlStateNormal];
[imageSlider setThumbImage:[UIImage imageNamed:@"icon_money_r"] forState:UIControlStateHighlighted];
imageSlider.value = 0.2f;
[self.view addSubview:imageSlider];

显示如下

自定义UISlider

自定义一个类继承自UISlider，然后重写这些方法，返回自定义的滑块的各个区域的大小

// 设置minimumValueImage的rect
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
// 设置maximumValueImage的rect
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;

// 设置track（滑条）尺寸
- (CGRect)trackRectForBounds:(CGRect)bounds;
// 设置thumb（滑块）尺寸
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

1.3 监听点击事件

[UISlider addTarget:self action:@selector(onSliderValueChanged:)
        forControlEvents:UIControlEventValueChanged];

onSliderValueChanged:方法监听

- (void)onSliderValueChanged:(UISlider *)sender {
    NSLog(@"Slider value = %f", sender.value);
}

2. UIStepper控件

2.1 主要属性

// 默认值，默认是0
@property(nonatomic) double value;
// 最小值，默认是0
@property(nonatomic) double minimumValue;
// 最大值，默认是100
@property(nonatomic) double maximumValue;
// 每步的默认值，默认是1，必须为正数
@property(nonatomic) double stepValue;

// 长按是否连续触发变化，默认是YES，如果设置为NO，只有在按击结束后，才会触发
@property(nonatomic,getter=isContinuous) BOOL continuous;
// 长按是否会一直改变值，默认是YES
@property(nonatomic) BOOL autorepeat;
// 值是否循环，默认是NO
@property(nonatomic) BOOL wraps; 

显示如下

2.2 主要方法

// 设置背景图片
- (void)setBackgroundImage:(nullable UIImage*)image forState:(UIControlState)state;

// 设置分割线
- (void)setDividerImage:(nullable UIImage*)image forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;

// 设置加号按钮的图片
- (void)setIncrementImage:(nullable UIImage *)image forState:(UIControlState)state;
// 设置减号按钮的图片
- (void)setDecrementImage:(nullable UIImage *)image forState:(UIControlState)state;

示例代码

UIStepper *imageStepper = [[UIStepper alloc] initWithFrame:CGRectMake(50, 200, 200, 50)];
[imageStepper setBackgroundImage:[[UIColor whiteColor] colorToImage] forState:UIControlStateNormal];

[imageStepper setDividerImage:[[UIColor blueColor] colorToImage]
    forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];
[imageStepper setDividerImage:[[UIColor blueColor] colorToImage] 
    forLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateNormal];
[imageStepper setDividerImage:[[UIColor blueColor] colorToImage] 
    forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateHighlighted];

imageStepper.layer.borderColor = [UIColor blueColor].CGColor;
imageStepper.layer.borderWidth = 1;
imageStepper.layer.cornerRadius = 8;

[imageStepper setTintColor:[UIColor redColor]];
[imageStepper setIncrementImage:[UIImage imageNamed:@"user_xiaoxi"] forState:UIControlStateNormal];
[imageStepper setDecrementImage:[UIImage imageNamed:@"user_kefu"] forState:UIControlStateNormal];

显示如下

2.3 监听点击事件

[UIStepper addTarget:self action:@selector(onStepperValueChanged:) 
    forControlEvents:UIControlEventValueChanged];

onStepperValueChanged:方法监听

- (void)onStepperValueChanged:(UIStepper *)sender {
    NSLog(@"UIStepper.value = %f", sender.value);
}