CODEWITHSUNDEEP
iosiphone
DeyaEldeen
DeyaEldeen

Reputation: 11857

Why does UISlider's custom thumb image get pixelated? (Images & codes inside)

The default thumb of a UISlider is sometimes not too easy to grab and touch by all people (due to some people having relatively larger fingers), my aim is to make touch hotspot area larger, to solve this, I added a custom thumb image, the problem is that the image get pixelated !

Problem :

The thumb image get's pixelated like the following image

enter image description here

The following image shows the thumb's hotspot (by enabling color blended in the simulator debug menu)

enter image dehttps://i.sstatic.net/VWlOt.pngscription here

This thumb image I'm using in xcode :

enter image description here

Is there a way to change the size of the thumb image like in UIImageView , I can't find a frame for the thumb image to manipulate the width and height.

My Code :

    var slider1=UISlider(frame:CGRectMake(Box.x4, 0, Box.x10, 100));
    slider1.minimumValue = 0;
    slider1.center.y = labelBudget1.center.y
    slider1.maximumValue = 100;
    slider1.continuous = false;
    slider1.value = 0;
    slider1.minimumTrackTintColor = hexStringToUIColor(Box.colorHexGreen)
    slider1.maximumTrackTintColor = UIColor.lightGrayColor()
    slider1.setThumbImage(UIImage(named: "sliderThumb.png"), forState: UIControlState.Normal)
    slider1.addTarget(self, action: "slider1ValueDidChange:", forControlEvents: UIControlEvents.TouchDragInside)
    scrollView1.addSubview(slider1);

My attempts to resolve this :

I found similar questions, but not with swift, and some are not answered, and some other solutions just didn't work, like this solution didn't solve the problem for me.

class ExtUISlider: UISlider
{
    var thumbTouchSize : CGSize = CGSizeMake(70, 70)

    override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool
    {
        let bounds = CGRectInset(self.bounds, -thumbTouchSize.width, -thumbTouchSize.height);
        return CGRectContainsPoint(bounds, point);
    }

    override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent) -> Bool
    {
        let thumbPercent = (value - minimumValue) / (maximumValue - minimumValue)
        let thumbSize = thumbImageForState(UIControlState.Normal)!.size.height
        let thumbPos = CGFloat(thumbSize) + (CGFloat(thumbPercent) * (CGFloat(bounds.size.width) - (2 * CGFloat(thumbSize))))
        let touchPoint = touch.locationInView(self)

        return (touchPoint.x >= (thumbPos - thumbTouchSize.width) && touchPoint.x <= (thumbPos + thumbTouchSize.width))
    }
}

I also tried to use a larger image, but it get's so large that it covers more area than I need ! and it would look strange, any help or tip is appreciated, thanks a lot.

EDIT @ Husyn

if I use a larger thumb image, then it is still pixelated and the limiting would be only like this, it will consider the empty area of the thumb as part of the thumb, I tried that before asking though, see gif.

enter image description here

the slider image i used

enter image description here

Upvotes: 1

Views: 551

Answers (2)

DeyaEldeen
DeyaEldeen

Reputation: 11857

SOLVED by Psy| on IRC Channel

I Just needed to add 2x 3x images in an image set enter image description here

The images resolutions are

triangle.png (27*42)

[email protected] (54*84)

[email protected] (81*126)

Upvotes: 1

Hussain Mansoor
Hussain Mansoor

Reputation: 3134

Simplest of solution is to use a big image with transparency. In this way you'll get a bigger touch area and it will not be visible to user.

Upvotes: 0

Related Questions