Swift23/90Days - 滑塊的製做

Swift90Days - 滑塊的製做

今天讀到之前人寫的滑塊源碼，十分糟糕，直接致使iPhone6下自動掛斷的crush讓人崩潰。晚上找些開源庫看看別人是怎麼實現滑塊的。

需求

簡單的列一下需求：

• 背景視圖是容器，顯示可滑動區域
• 按鈕默認在左側，能夠滑動到最右側，鬆手以後自動返回最左
• 最好提示字有動態色彩變化

頭文件

項目源碼參考自：MBSliderView。

先看下頭文件聲明，主要是一個委託，委託方法是滑動到底以後進行的操做：

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

而後再看一下具體的 MBSliderView 的定義：

@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 的操做，不過這樣封裝以後使用起來更加簡單，不用知道底層的視圖結構也能夠使用。

初始化

提供了兩種初始化方式，一種是代碼加載，一種是 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 方法中可能是初始化的種種，最後有這麼一段：

// 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