Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent backgroundColor of UISegmentedControl bleeding beyond segmented border

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.

like image 557
Mike Maxwell Avatar asked Dec 11 '13 19:12

Mike Maxwell


3 Answers

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;
like image 133
Léo Natan Avatar answered Nov 10 '22 20:11

Léo Natan


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

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

Hope its work for you

like image 22
Yogesh Kumar Avatar answered Nov 10 '22 20:11

Yogesh Kumar


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
like image 4
protspace Avatar answered Nov 10 '22 20:11

protspace