級(jí)別：★☆☆☆☆
標(biāo)簽：「UISlider」「QiSlider」「UISlider自定義」
作者： Xs·H
審校： QiShare團(tuán)隊(duì)

項(xiàng)目中有個(gè)需求是在滑動(dòng)slider的時(shí)候要在滑塊上方實(shí)時(shí)顯示數(shù)值，而且數(shù)值要跟著滑塊動(dòng)。實(shí)現(xiàn)效果如下：

演示效果

在寫代碼之前有兩個(gè)思路：

1、在slider的superView上add一個(gè)valueLabel，找到slider的滑塊view(thumbView)，在slider的valueChanged方法中根據(jù)thumbView相對(duì)于slider的superView的frame調(diào)整valudeLabel的frame和text。使用此思路實(shí)現(xiàn)的效果會(huì)出現(xiàn)滑動(dòng)過快時(shí)label晃動(dòng)的現(xiàn)象（有點(diǎn)跟不上滑塊的意思）。

2、找到slider的thumbView，在thumbView上add一個(gè)valueLabel，在slider的valueChanged方法中調(diào)整valueLabel的text。
使用此思路實(shí)現(xiàn)的效果比較符合需求。

按照思路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庫中獲取。

關(guān)注我們的途徑有：
QiShare(簡(jiǎn)書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號(hào))

推薦文章：iOS strong和copy的區(qū)別