How to fit an image inside SegmentController programmatically - Swift

Question

I need to setup an image inside SegmentController - Swift.

    let testTypeSegmentedControl: UISegmentedControl = {

    let types = [“Green”, “Blue”] // v_concreteSelectedIndex
    let sc = UISegmentedControl(items: types)
    sc.setImage((UIImage(named: "Green_Main.png")), forSegmentAt: 0)

    sc.selectedSegmentIndex = 0
    sc.translatesAutoresizingMaskIntoConstraints = false
    sc.tintColor = .black

    return sc
}()

How to fix the image properly inside the segment controller.

I tried:

sc.contentMode = .scaleAspectFill

but seems it didn't worked well.

I tried to use constrain but I have no idea how to do it.

Any advise how to proceed?

I can use color, but I am interested to learn how to use photo. — Xin Lok, Jun 16 '18 at 11:57
Check solution in this link may be it can help : https://stackoverflow.com/questions/3001313/how-to-set-image-to-the-uisegmentedcontrol-in-iphone OR try to give clipsToBounds = true. — Hardik Thakkar, Jun 16 '18 at 11:57
I have checked this previously, it is not what I am looking for, I want to do this programmatically. — Xin Lok, Jun 16 '18 at 12:25
@GovindKumawat yes, the only issue is that the photo need to be resized inside the segment controller — Xin Lok, Jun 16 '18 at 14:51

score 2 · Accepted Answer · answered Jun 16 '18 at 16:26

The result is not what you expected because the original .png image you are using higher in resolution. 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 to create a new image with code before, and use this new generated image.

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

func image(with image: UIImage?, scaledTo newSize: CGSize) -> UIImage? {
        UIGraphicsBeginImageContext(newSize)
        image?.draw(in: CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height))
        let newImage: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }

In your code:

    let testTypeSegmentedControl: UISegmentedControl = {
    let sc = UISegmentedControl(items: ["One", "Two"])
        sc.selectedSegmentIndex = 0
        sc.translatesAutoresizingMaskIntoConstraints = false
        return sc
    }()


override func viewDidLoad() {

    super.viewDidLoad()
    self.view.addSubview(testTypeSegmentedControl)

    let newImage = image(with: (UIImage(named: "watermelon.png")), scaledTo: CGSize(width: 32, height: 30))
    testTypeSegmentedControl.setImage(newImage , forSegmentAt: 0)

}

Man, this is great explanation which can be used everywhere. thanks a lot — Xin Lok, Jun 16 '18 at 19:17

How to fit an image inside SegmentController programmatically - Swift

1 Answers1