使用UISlider遇到的问题

使用UISlider遇到的问题_第1张图片
效果图
  • 滑动条存在刻度,60、90
  • 拖动的过程中,右边的分数会变化
  • 分值只有0、60、90、100,你拖到25放手,小车会回到0
  • 分值为0时,小车的图片和分值大于0时不同

显示刻度

首先要解决刻度。UISlider提供的方法并不多,和刻度相关的无疑是下面的方法。

- (void)setMinimumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;
- (void)setMaximumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;

图片上自带刻度,且宽度和slider保持一致,设置图片就可以。最初写法是

UIImage *image = [UIImage imageNamed:@"line"] ;

[self.firstSlider setMinimumTrackImage:image forState:UIControlStateNormal];
[self.firstSlider setMaximumTrackImage:image forState:UIControlStateNormal];

结果就不说了。

正确的写法是

UIImage *image = [[UIImage imageNamed:@"line"] resizableImageWithCapInsets:UIEdgeInsetsZero];

[self.firstSlider setMinimumTrackImage:image forState:UIControlStateNormal];
[self.firstSlider setMaximumTrackImage:image forState:UIControlStateNormal];

区别就至于resizableImageWithCapInsets返回一个可改变大小的图片,类似于
android的.9.png。

刻度在图片上,iOS提供了绘制UIImage的方法,因此,我们可以自己绘制。这样,刻度值、背景颜色、slider高度等都可以动态设置。具体的可以参考 JMMarkSlider

值获取

可以通过UIControlEventValueChanged来得到值更新的通知,通过slider的value属性来获取这个值。

@weakify(self);
[[self.slider rac_signalForControlEvents:UIControlEventValueChanged] subscribeNext:^(UISlider *x) {
    @strongify(self);

    self.lblScore.text = [NSString stringWithFormat:@"%0.f分", x.value];
    
    if (x.value >= 90) {
        self.lblScore.textColor = JXColorTextGreen;
        
    } else {
        self.lblScore.textColor = JXColorRed;
    }
}];

UISlider还有个属性continuous,可以控制UIControlEventValueChanged的触发条件。

@property(nonatomic,getter=isContinuous) BOOL continuous;        
// if set, value change events are generated any time the value changes due to dragging. default = YES

最终停在刻度上

拖到25,放手,又会回到0。问题其实就是怎么知道用户放手了。直接复写touchBegin、touchMove、touchEnd和touchCalcel几个方法。

你可能感兴趣的:(使用UISlider遇到的问题)