CODEWITHSUNDEEP
iosobjective-cuislider
dineshprasanna
dineshprasanna

Reputation: 1284

UISlider set Image with corners

Here I need to rounded uslider but when i try to set images it shows rectangled image,

I need like this Imageenter image description here

Here My coding

UIImage *volumeBackgroundImage = [[UIImage imageNamed:@"l2.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)];
    [self.audioSlider setMinimumTrackImage:[[UIImage imageNamed:@"l1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)]
                               forState:UIControlStateNormal];
    [self.audioSlider setMaximumTrackImage:volumeBackgroundImage
                               forState:UIControlStateNormal];
    [self.audioSlider setThumbImage:[UIImage imageNamed:@"sliderhandle.png"]
                        forState:UIControlStateNormal];

Could anybody help to achieve this

Upvotes: 4

Views: 4024

Answers (3)

Pooja Kamath
Pooja Kamath

Reputation: 1298

You can try to draw the image of the size required, rather than adding a image which might cause distortion.

Slider distortion solution

Upvotes: 1

Guntis Treulands
Guntis Treulands

Reputation: 4762

You need to have images with round corners. For example: enter image description here

Then simply use this image like this:

[_slider setMinimumTrackImage:[[UIImage imageNamed:@"black_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]
    forState:UIControlStateNormal];

[_slider setMaximumTrackImage:[[UIImage imageNamed:@"blue_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12) 
    forState:UIControlStateNormal];

(where black_dot.png is example image, and blue_dot.png would be the same but in blue color)

(If image is pixelated - then You need to get this image twice as big - retina image - [email protected])

(Or in case You actually need smaller image than given example, then just rename this image as [email protected], and instead of : UIEdgeInsetsMake(12, 12, 12, 12) use: UIEdgeInsetsMake(6, 6, 6, 6))

See more info here:https://stackoverflow.com/a/8656216/894671

Upvotes: 5

Mundi
Mundi

Reputation: 80273

I think this occurs because the round end is generated by the UISlider natively. It assumes that the thumb image will cover the end at extreme positions so it will not redraw it.

One solution could be to take care of the rounding at the end yourself: 

self.audioSlider.layer.cornerRadius = 5.0;

Experiment with this value and it should work.

Alternatively, you could make sure your images have rounded ends.

Upvotes: 0

Related Questions