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);
}