iOS UISlider数值与滑块联动

释放双眼,带上耳机,听听看~!

项目中有个需求是在滑动slider的时候要在滑块上方实时显示数值,而且数值要跟着滑块动。实现效果如下:

演示效果

在写代码之前有两个思路:

1、在slider的superView上add一个valueLabel,找到slider的滑块view(thumbView),在slider的valueChanged方法中根据thumbView相对于slider的superView的frame调整valudeLabel的frame和text。使用此思路实现的效果会出现滑动过快时label晃动的现象(有点跟不上滑块的意思)。

2、找到slider的thumbView,在thumbView上add一个valueLabel,在slider的valueChanged方法中调整valueLabel的text
使用此思路实现的效果比较符合需求。

按照思路2自定义QiSlider部分代码如下:

#import "QiSlider.h"

@interface QiSlider ()

/*! @brief slider的thumbView */
@property (nonatomic, strong) UIView *thumbView;
/*! @brief 显示value的label */
@property (nonatomic, strong) UILabel *valueLabel;

@end

@implementation QiSlider

- (instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame]) {
       
        [self addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
    }
    return self;
}


#pragma mark - Setter functions

- (void)setValueText:(NSString *)valueText {
    
    if (![_valueText isEqualToString:valueText]) {
        _valueText = valueText;
        
        self.valueLabel.text = valueText;
        [self.valueLabel sizeToFit];
        self.valueLabel.center = CGPointMake(self.thumbView.bounds.size.width / 2, -self.valueLabel.bounds.size.height / 2);
        
        if (!self.valueLabel.superview) {
            [self.thumbView addSubview:self.valueLabel];
        }
    }
}


#pragma mark - Getter functions

- (UIView *)thumbView {
    
    if (!_thumbView && self.subviews.count > 2) {
        _thumbView = self.subviews[2];
    }
    return _thumbView;
}

- (UILabel *)valueLabel {
    
    if (!_valueLabel) {
        _valueLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        _valueLabel.textColor = _valueTextColor ?: self.thumbTintColor;
        _valueLabel.font = _valueFont ?: [UIFont systemFontOfSize:14.0];
        _valueLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _valueLabel;
}


#pragma mark - Action functions

- (void)sliderValueChanged:(QiSlider *)sender {
    
    if (_valueChanged) {
        _valueChanged(sender);
    } else {
        sender.valueText = [NSString stringWithFormat:@"%.1f", sender.value];
    }
}
@end

工程代码可从QiSlider的Github库中获取。

 

人已赞赏
iOS文章

iOS 隐藏navigationBar带来的问题

2019-10-3 11:38:44

iOS文章

iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条

2019-10-3 11:45:20

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索