开发者

UISegmentedControl image scaling

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. T开发者_StackOverflowhe 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:

UISegmentedControl image scaling

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


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];


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!
    }
}


For iOS 14 and later

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

UISegmentedControl image scaling

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))!
        ])
    }    

}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜