Search code examples
iosobjective-cuislider

Change UIslider thumb image while sliding


I want to change UISlider thumb image during the slide.
Basically to set thumbImage acording to the value.
enter image description here

The idea was to rotate the image according to the value and set it to the thumb.
So I tried to set the thumb image by overriding

-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
 [self setThumbImage:[self imageRotatedByDegrees:50] forState:UIControlStateHighlighted];

and I also tried the same thing when I added an action to my slider. Unfortunately in both implementations the image simply disappears.
Do you think it possible to achieve in the way I do it? If NO please explain and suggest an alternative way (hopefully not one that will customize and replace the whole slider)
If Yes I will really appreciate code sample. The more close answer that I found here

Thanks a lot.


Solution

  • I found a mistake in my Code. Apparently I was releasing one of the image before calling CGContextDrawImage. (I still need to improve my GUI appearance to make it more nice, for instance to make the track image as I planed I made the original one transparent and added the as subview the one I need.)

    - (id)initWithFrame:(CGRect)frame
     {
    self = [super initWithFrame:frame];
    if (self) {
        self.thumbImage = [self imageWithImage:[UIImage imageNamed:@"IconForSlider.png"] scaledToSize:CGSizeMake(frame.size.height, frame.size.height)];
        size = self.thumbImage.size.height;
        [self setThumbImage:[self imageRotatedByDegrees:0] forState:UIControlStateNormal];
        [self addTarget:self action:@selector(changeValue) forControlEvents:UIControlEventValueChanged];
    
    }
    return self;
    }
    
    -(void)changeValue{
    NSLog(@"ChangeValue");
    [self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateHighlighted];
    [self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateNormal];
     }
    
    #pragma mark ImageResize
    - (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
     }
    
     #pragma mark Rotate
    
    - (UIImage *)imageRotatedByDegrees:(float)degrees
     {
    NSLog(@"ImageRotateByDegres");
    static float Prc = 0.6;
    degrees = (degrees > 90)? 90: degrees;
    
    UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,size,size)];
    CGSize rotatedSize = rotatedViewBox.frame.size;
    
     // Create the bitmap context
    
    UIGraphicsBeginImageContextWithOptions(rotatedSize , NO, 0.0);
    CGContextRef bitmap = UIGraphicsGetCurrentContext();
    UIColor *color = [self.colorsArray objectAtIndex:lround(self.value*100)];
    [color setFill];
    CGContextRef bitmap = UIGraphicsGetCurrentContext();
    
    [[UIColor colorWithRed:((139 + (116/100)*self.value*100)/255.0) green:141/255.0f blue:149/255.0f alpha:1.0f] setFill];
    // Move the origin to the middle of the image so we will rotate and scale around the center.
    CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
    
    // Rotate the image context
    CGContextRotateCTM(bitmap,DEGREES_TO_RADIANS(degrees));
    
    CGContextClipToMask(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size), [self.thumbImage CGImage]);
    CGContextAddRect(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size));
    CGContextDrawPath(bitmap,kCGPathFill);
     //Prc and 1.07 are for better view
    CGContextDrawImage(bitmap, CGRectMake(-1.07*size/2*Prc, -1*size/2*Prc,size*Prc,size*Prc), [[UIImage imageNamed:@"ActiveIcon.png"]CGImage]);
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
    
     }
    

    with some help from this link I create an array of colours for my slider Get Pixel Color of Uiimage

    - (UIColor *)GetColorAtValue:(float)value{
    
    long pixelInfo = (long)floorf(_sliderImage.size.width  * _sliderImage.size.height/2 + _sliderImage.size.width * value) * 4  ;
    
    UInt8 red = data[pixelInfo];         // If you need this info, enable it
    UInt8 green = data[(pixelInfo + 1)]; // If you need this info, enable it
    UInt8 blue = data[pixelInfo + 2];    // If you need this info, enable it
    //UInt8 alpha = data[pixelInfo + 3];     // I need only this info for my maze game
    //CFRelease(pixelData);
    
    UIColor* color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1]; // The pixel color info
    
    return color;
    

    }

    enter image description here

    enter image description here

    enter image description here