How to prevent backgroundColor of UISegmentedControl bleeding beyond segmented border

38
votes

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.

3
iosuisegmentedcontrol
Accepted Leo's answer below. Setting the segmented control's backing layer cornerRadius property to something near the segmented control's cornerRadius will clip the background color bleeding. Just have to hope Apple doesn't muck with the corner radius ever again! :) – Mike Maxwell

3 Answers

76
votes

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;
9
votes

Set segment control layer corner radius to 5. and ClipsToBounds YES . 

segmentController.layer.cornerRadius = 5;    
segmentController.clipsToBounds = YES;

Hope its work for you

4
votes

the best result I could achieve in Swift:

    segmentedControl.layer.cornerRadius = 4
    let mask = CAShapeLayer()
    mask.frame = CGRectMake(0, 0, segmentedControl.bounds.size.width-1, segmentedControl.bounds.size.height);
    let maskPath = UIBezierPath(roundedRect: mask.frame,
                                byRoundingCorners: [.BottomLeft, .BottomRight, .TopLeft, .TopRight],
                                cornerRadii: CGSize(width: 4.0, height: 4.0))
    mask.path = maskPath.CGPath
    segmentedControl.layer.mask = mask