UISegmentedControl image scaling

Question

How can I scale down the images used in a UISegmentedControl? I am creating the segmented control programmatically:

UISegmentedControl * segmentButton;
segmentButton = [UISegmentedControl segmentedControlWithItems:
                 [NSArray arrayWithObjects:
                  [UIImage imageNamed:@"option_one.png"],
                  [UIImage imageNamed:@"option_two.png"],
                  nil]];
segmentButton.contentMode = UIViewContentModeScaleToFill;
segmentButton.frame = CGRectMake(10, 10, 200, 32);
[view addSubview:segmentButton];

The result is not what I expect. The original .png images are about 100 pixels high, and they are not scaled down to fit the 32-pixel height of the segmented control. This results in a segmented control being drawn with enormous images overlapping it:

screen shot

How can I tell the control to scale down those images?

Ludovic Landry · Accepted Answer · 2011-02-04T14:05:37.860

You should never use a "big" image to display only a small picto. The full image will be loaded in memory, and only 10% of its pixels will be displayed, so you will use a lot of memory for nothing.

What you can do if you really want to use this resource is create a thumbnail with code before, and use this new generated thumbnail.

The following method returns a new image you can use in your UISegmentedControl, and you can release the big one.

- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    UIGraphicsBeginImageContext(newSize);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    return newImage;
}

With your code:

UISegmentedControl * segmentButton;
segmentButton = [UISegmentedControl segmentedControlWithItems: [NSArray arrayWithObjects:
                  [self imageWithImage:[UIImage imageNamed:@"option_one.png"] scaledToSize:CGSizeMake(32, 32)],
                  [self imageWithImage:[UIImage imageNamed:@"option_two.png"] scaledToSize:CGSizeMake(32, 32)],
                  nil]];
segmentButton.contentMode = UIViewContentModeScaleToFill;
segmentButton.frame = CGRectMake(10, 10, 200, 32);
[view addSubview:segmentButton];

Agree, if the images are dynamic, scale them, otherwise provide different sizes in your app resources. — petert, Feb 04 '11 at 14:19
segmentButton = [[[UISegmentedControl alloc] initWithItems:images] autorelease]; — neoneye, May 19 '11 at 09:43

score 1 · Answer 2 · answered Aug 03 '17 at 15:23

In swift3,

extension UIImage {
    func scaleImage(scaleToSize: CGSize) -> UIImage {
        UIGraphicsBeginImageContext(scaleToSize)

        self.draw(in: CGRect(origin: CGPoint(x: 0, y: 0), size: scaleToSize))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()
        return newImage!
    }
}

score 0 · Answer 3 · answered Oct 11 '21 at 05:10

For iOS 14 and later

UIGraphicsGetImageFromCurrentImageContext make some image not that clear, so I change to UIGraphicsImageRenderer, it works fine to me.

extension UIImage {
    func resizedImage(to targetSize: CGSize) -> UIImage? {
        let render = UIGraphicsImageRenderer(size: targetSize)
        return render.image { ctx in
            self.draw(in: .init(origin: .zero, size: targetSize))
        }
    }
}

class SomeView: UIView {
    func initSegementedControl() {
        exampleSegmenedControl = UISegmentedControl(items:[
            leftImage.resizedImage(to: .init(width: 15, height: 15))!,
            rightImage.resizedImage(to: .init(width: 15, height: 15))!
        ])
    }    

}

UISegmentedControl image scaling

3 Answers3