Swift23/90Days - 滑块的制做

时间 2020-02-06

标签 swift23 swift 90days days 滑块制做栏目 Swift 繁體版

原文原文链接

Swift90Days - 滑块的制做

今天读到之前人写的滑块源码，十分糟糕，直接致使iPhone6下自动挂断的crush让人崩溃。晚上找些开源库看看别人是怎么实现滑块的。git

需求

简单的列一下需求：github

背景视图是容器，显示可滑动区域
按钮默认在左侧，能够滑动到最右侧，松手以后自动返回最左
最好提示字有动态色彩变化

头文件

项目源码参考自：MBSliderView。ide

先看下头文件声明，主要是一个委托，委托方法是滑动到底以后进行的操做：atom

@protocol MBSliderViewDelegate <NSObject>
- (void) sliderDidSlide:(MBSliderView *)slideView;
@end

而后再看一下具体的 MBSliderView 的定义：code

@interface MBSliderView : UIView {
    UISlider *_slider;
    UILabel *_label;
    id<MBSliderViewDelegate> _delegate;
}

@property (nonatomic, assign) NSString *text;
@property (nonatomic, assign) UIColor *labelColor;
@property (nonatomic, assign) IBOutlet id<MBSliderViewDelegate> delegate;
@property (nonatomic) BOOL enabled;

- (void) setThumbColor:(UIColor *)color;

@end

OK基本没有什么问题，其实所谓的滑动按钮也就是个 UISlider ，原本我还准备用 UIScrollView 来作的。对象

有个比较可取的地方是：事件

// Implement the "text" property
- (NSString *) text {
    return [_label text];
}

- (void) setText:(NSString *)text {
    [_label setText:text];
}

这样你对 text 属性的全部操做其实就是对 label 的操做，不过这样封装以后使用起来更加简单，不用知道底层的视图结构也能够使用。get

初始化

提供了两种初始化方式，一种是代码加载，一种是 xib 加载。因此分别实现了两个父类的方法，并在 init 完成以后调用 loadContent 方法初始化页面：源码

- (id)initWithFrame:(CGRect)frame
{
    if (frame.size.width < 136.0) {
        frame.size.width = 136.0;
    }
    if (frame.size.height < 44.0) {
        frame.size.height = 44.0;
    }
    self = [super initWithFrame:frame];
    if (self) {
        [self loadContent];        
    }
    return self;
}

-(id) initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self loadContent];
    }
    return self;
}

loadContent 方法中可能是初始化的种种，最后有这么一段：it

// Set the slider action methods
[_slider addTarget:self 
           action:@selector(sliderUp:) 
 forControlEvents:UIControlEventTouchUpInside];
[_slider addTarget:self 
           action:@selector(sliderUp:) 
 forControlEvents:UIControlEventTouchUpOutside];
[_slider addTarget:self 
           action:@selector(sliderDown:) 
 forControlEvents:UIControlEventTouchDown];
[_slider addTarget:self 
           action:@selector(sliderChanged:) 
 forControlEvents:UIControlEventValueChanged];

这三个 ControlEvents 的事件监听主要是用来处理按下、滑动、松手的事件。不少是视觉上的修改，关键的功能点在这里：

- (void) sliderUp:(UISlider *)sender {
    // 调用委托方法，通知委托对象目前已经滑到底        
    if (_slider.value == 1.0) {
        [_delegate sliderDidSlide:self];
    }

    // 松手后弹回起点
    [_slider setValue:0.0 animated: YES];
    }
}

基本就是这样啦。

References

MBSliderView