自定义 UISLider 拖动拇指后改变颜色

Question

我有这种类型的自定义UISlider 我已经实现了，看起来像这样：

它的特点是你不能把它拖到它的初始拇指位置的左边。

但是当你把它拖到右边时，它应该像这样改变路径的颜色，让左边的颜色保持原样，并为它走过的路径着色：

我只知道UISlider-MinimumTrackImage和MaximumTrackImage这两个属性分别负责左右两边的句柄。

如何实现这种奇怪的行为？有任何想法吗？谢谢！

Answer 1

我能够使用以下代码实现这一点。要弄清楚的棘手部分是如何根据滑块的起始值设置初始图像。我通过创建一个 4 像素宽的图像来做到这一点，其中左侧 2 像素是您的起始左侧颜色，右侧 2 像素是您在拖动后想要的颜色。基本上，我拉伸了该图像（仅在左侧）以填充图像视图，然后使用 UIGraphicsGetImageFromCurrentImageContext() 获取该图像。然后，我使用该图像创建另一个可拉伸图像，仅在右侧进行拉伸。

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface ViewController ()
@property (weak,nonatomic) IBOutlet UISlider *slider;
@property (nonatomic) CGFloat previousValue;
@end

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated {

    [super viewDidAppear:animated];
    self.previousValue = self.slider.value;
    if (self.slider.value > .01) {
        UIImage *newImage = [self imageStretchedOnLeft];
        UIImage *rightStretchImage = [newImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, newImage.size.width -2, 0, 0) resizingMode:UIImageResizingModeStretch];
        [self.slider setMinimumTrackImage:rightStretchImage forState:UIControlStateNormal];
    }else{
        [self.slider setMinimumTrackImage:[UIImage imageNamed:@"OneColor.png"] forState:UIControlStateNormal];
    }

}

-(IBAction)sliderMoved:(UISlider *)slider {
    if (slider.value < self.previousValue) {
        slider.value = self.previousValue;
    }
    self.previousValue = slider.value;
}

- (UIImage *)imageStretchedOnLeft {
    UIImage *image = [UIImage imageNamed:@"TwoColor.png"]; // 4 pixel wide 1 pixel high image. Left 2 pixels are original track color, right two are new drag color
    UIImage *cappedImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 2)];

    UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.slider.frame.size.width * (self.slider.value/self.slider.maximumValue), self.slider.frame.size.height)];
    iv.image = cappedImage;
    [self.view insertSubview:iv belowSubview:self.view];

    UIGraphicsBeginImageContextWithOptions(iv.frame.size, YES, [[UIScreen mainScreen] scale]);
    [iv.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [iv removeFromSuperview];

    return img;
}

如果滑块的值为 0，我会收到图形上下文错误，因此如果该值小于 0.01，viewDidAppear 方法中的 if 语句将使用不同的单色图像。

Answer 2

你可以用这个

//code for slider
UIImage *minImage = [[UIImage imageNamed:@"slider_minimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:@"slider_maximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *thumbImage = [UIImage imageNamed:@"thumb.png"];

[[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];  

这是 raywenderlich 的 tutorial 很好