级别：★☆☆☆☆
标签：「UISlider」「QiSlider」「UISlider自定义」
作者： Xs·H
审校： QiShare团队
项目中有个需求是在滑动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库中获取。
关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：iOS strong和copy的区别
