垂直方向UISlider

最近用到垂直方向的UISlider，搜了搜没找到很好的，也可能我没仔细搜索（cry~），然后按照自己的理解造了一个轮子。代码有点硬编码，只是为了让记录实现思路。

883E8C6D-70A1-4F31-A84E-E12EC1DE75DA.png

.h

#import <UIKit/UIKit.h>

@protocol SliderViewDelegate <NSObject>

@optional

- (void)sliderValueChanged:(float)value;
@end

@interface SliderButton : UIButton
@property (nonatomic, weak) id<SliderViewDelegate> delegate;
@end

@interface MyCustomSlider : UIView
/** 默认滑杆的颜色 */
@property (nonatomic, strong) UIColor *maximumTrackTintColor;
/** 滑杆进度颜色 */
@property (nonatomic, strong) UIColor *minimumTrackTintColor;
/** 滑块 */
@property (nonatomic, strong) SliderButton *sliderBtn;
@end

.m

#import "MyCustomSlider.h"
#import "Masonry.h"
#define kSliderBtnWidth 16
#define kSliderWidth 5

@interface MyCustomSlider()

/** 进度背景 */
@property (nonatomic, strong) UIImageView *bgProgressView;

/** 滑动进度 */
@property (nonatomic, strong) UIImageView *sliderProgressView;
@end

@implementation MyCustomSlider

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubViews];
    }
    return self;
}
- (void)addSubViews {
    self.backgroundColor = [UIColor clearColor];
    [self addSubview:self.bgProgressView];
    [self.bgProgressView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self);
        make.centerX.equalTo(self);
        make.height.mas_equalTo(self);
        make.width.mas_equalTo(kSliderWidth);
    }];
    
    
    [self addSubview:self.sliderProgressView];
    [self.sliderProgressView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self);
        make.centerX.equalTo(self);
        make.height.mas_equalTo(0);
        make.width.mas_equalTo(kSliderWidth);
    }];
    
    [self addSubview:self.sliderBtn];
    [self.sliderBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self);
        make.height.mas_equalTo(kSliderBtnWidth);
        make.width.mas_equalTo(kSliderBtnWidth);
        make.centerX.equalTo(self);
    }];
}

#pragma mark - 懒加载
- (UIImageView *)bgProgressView {
    //背景
    if (!_bgProgressView) {
        _bgProgressView = [UIImageView new];
        _bgProgressView.backgroundColor = [UIColor whiteColor];
        _bgProgressView.layer.cornerRadius = kSliderWidth*0.5;
        _bgProgressView.layer.masksToBounds = YES;
        _bgProgressView.clipsToBounds = YES;
    }
    return _bgProgressView;
}
//进度
- (UIImageView *)sliderProgressView {
    if (!_sliderProgressView) {
        _sliderProgressView = [UIImageView new];
        _sliderProgressView.backgroundColor = [UIColor blueColor];
        _sliderProgressView.layer.cornerRadius = kSliderWidth*0.5;
        _sliderProgressView.layer.masksToBounds = YES;
        _sliderProgressView.clipsToBounds = YES;
    }
    return _sliderProgressView;
}
//滑块
- (SliderButton *)sliderBtn {
    if (!_sliderBtn) {
        _sliderBtn = [SliderButton new];
    }
    return _sliderBtn;
}
@end


@interface SliderButton()
@property(nonatomic, assign) CGPoint beginPoint;//开始的位置
@property(nonatomic, assign) CGRect buttonBeginFrame;//按钮开始的位置

@end

@implementation SliderButton

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
}

// 重写此方法将按钮的点击范围扩大
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    CGRect bounds = self.bounds;
    
    // 扩大点击区域
    bounds = CGRectInset(bounds, -20, -20);
    
    // 若点击的点在新的bounds里面。就返回yes
    return CGRectContainsPoint(bounds, point);
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [super touchesBegan:touches withEvent:event];
    [self layoutIfNeeded];
    UITouch *touch = [touches anyObject];
    self.beginPoint = [touch locationInView:self.superview];
    self.buttonBeginFrame = self.frame;
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint nowPoint = [touch locationInView:self.superview];
    CGFloat offsetY = nowPoint.y - self.beginPoint.y;
    CGFloat afterY = CGRectGetMaxY(self.buttonBeginFrame) + offsetY;
    if (afterY <= 0) {
        afterY = 0.0;
    }else if (afterY >= CGRectGetHeight(self.superview.frame)-kSliderBtnWidth){
        afterY = CGRectGetHeight(self.superview.frame)-kSliderBtnWidth;
    }
    //改变自己的frame
    CGRect oriFrame = self.buttonBeginFrame;
    oriFrame.origin.y = afterY;
    self.frame = oriFrame;
    //改变进度条的frame
    MyCustomSlider *parerntView = (MyCustomSlider *)self.superview;
    CGRect progressViewFrame = parerntView.sliderProgressView.frame;
    progressViewFrame.size.height = CGRectGetMaxY(self.frame);
    parerntView.sliderProgressView.frame = progressViewFrame;
    //发回调通知
    if (self.delegate && [self.delegate respondsToSelector:@selector(sliderValueChanged:)]) {
        [self.delegate sliderValueChanged:(afterY / (CGRectGetHeight(self.superview.frame)-kSliderBtnWidth))];
    }
}

Controller

#import "ViewController.h"
#import "MyCustomSlider.h"
#import "Masonry.h"
@interface ViewController ()<SliderViewDelegate>
@property (nonatomic, strong)MyCustomSlider *slider;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.slider];
    [self.slider mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.view);
        make.centerX.equalTo(self.view);
        make.width.mas_equalTo(30);
        make.height.mas_equalTo(200);
    }];
}

- (MyCustomSlider *)slider {
    if (!_slider) {
        _slider = [[MyCustomSlider alloc] initWithFrame:CGRectMake(0, 0, 5, 150)];
        [_slider setThumbImage:[UIImage imageNamed:@"cm2_fm_playbar_btn"] forState:UIControlStateNormal];
        [_slider setThumbImage:[UIImage imageNamed:@"cm2_fm_playbar_btn"] forState:UIControlStateSelected];
        [_slider setThumbImage:[UIImage imageNamed:@"cm2_fm_playbar_btn"] forState:UIControlStateHighlighted];

        _slider.sliderBtn.delegate = self;
    }
    return _slider;
}

- (void)sliderValueChanged:(float)value{
    NSLog(@"456");
}

git Demo地址