How to prevent backgroundColor of UISegmentedControl bleeding beyond segmented border

Mike Maxwell picture Mike Maxwell · Dec 11, 2013 · Viewed 8.8k times · Source

I've noticed that when I set a color for UISegmentedControl.backgroundColor, the color bleeds beyond the edges of the control (though not beyond the view's bounds). Here's an example with the segmented control's background color set to white and the container view's background color set to gray: http://i.imgur.com/yHYT14C.png

I've set the AutoLayout constraints of the segmented control such that the intrinsicContentSize should be used, but I haven't seen anyone else posting about this problem

Note that the image above is the best I've been able to get it to look... before that it was bleeding over by about 3-4px.

I've tried configuring the view to clipSubviews and the layer backing the UIView to masksToBounds, but I didn't expect that to fix the problem since I assume the bleeding is contained inside the view's/layer's bounds.

Any suggestions or advice appreciated. If not I'll just have to create images to back the UISegmentedControl that fix the bleeding, but that's annoying to have to maintain, to say the least.

Answer

Leo Natan picture Leo Natan · Dec 11, 2013

Set the segment control's layer's corner radius to 4.0. It should help. You may need to import QuartzCore to be able to access the layer's properties.

segment.layer.cornerRadius = 4.0;
segment.clipsToBounds = YES;