UISegmentedControl with square corners

Question

I would like to modify UISegmentedControl with a subclass to remove the rounded corners. I can't seem to set the cornerRadius. Making the SegmentedControl wider than the screen (and therefor "chop" off the corners) is not an option since I have 4 or 5 segments and they would then vary in size.

Is there a way to do this?

Thanks

score 37 · Answer 1 · answered Feb 25 '15 at 12:05

37

To make the corner square use the following code:

segmentContrl.layer.borderColor=*anycolor*.CGColor;
segmentContrl.layer.cornerRadius = 0.0;
segmentContrl.layer.borderWidth = 1.5f;

answered Feb 25 '15 at 12:05

swathy krishnan

916
9
22

2

this worked for my purposes, but didn't need the cornerRadius part. – Adam Johns Mar 26 '15 at 16:18
4

Then ignore cornerRadius. – swathy krishnan Mar 30 '15 at 04:17
This is the only non-hack. – AWrightIV Sep 30 '15 at 18:20

score 15 · Answer 2 · answered Oct 12 '11 at 11:47

15

One alternative, if "cropping" part of the first and last segment is problematic, may be to crop the entire first and last segment (which you've made dummy unused segments). That way you can still keep a common size for every segment.

answered Oct 12 '11 at 11:47

Clafou

15,250
7
58
89

simply elegant. The advantage of this, is that you visually still have the vertical lines at the edge. – Joseph Oct 12 '11 at 12:15
Nice! In layout subviews I take the width of the segmented control, get the width of one segment by dividing the number of segments, set the width of the mask view to (num segments - 2) * width + 2 (left right border) and I'm golden! – Mr Rogers Feb 08 '16 at 17:42

score 11 · Answer 3 · answered Nov 26 '13 at 20:42

Just use the built in customization methods and set a background image for each segment state. This will override the border entirely. If the background images are square, then your segmented control will appear square. Use the following code for each segment state you want to customize.

[segmentedControl setBackgroundImage:[UIImage imageNamed:@"square-background-image-selected"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

You might need to provide a background image for normal control state as well otherwise the background image for selected control state won't be applied — Andrey Chernukha, Sep 02 '15 at 15:59

progrmr · Accepted Answer · 2011-10-12T14:54:40.453

10

You can set the width of the segments (using setWidth:forSegmentAtIndex:) so you can easily make the left and right end segments larger (say 10px larger) than the others and then you can crop off 10px from either end and have square corners. You don't have to make it larger than the screen width, instead put it inside a UIView and use it to crop the ends.

On the other hand just could just make your own segmented control using a set of custom UIButtons inside a UIControl.

edited Oct 12 '11 at 14:54

answered Oct 12 '11 at 11:40

progrmr

75,956
16
112
147

decided to go with the 10px version, since you don't have excess segments and indexes. – Joseph Oct 12 '11 at 14:41
2 questions: 1) how do you use a UIView to crop the ends. 2) how would you go about making your own segmented control using UIButtons inside of a UIControl. – ladookie Jan 02 '12 at 04:13
1

@ladookie 1) make the control wider than the parent view, set clipsToBounds on the parent view, 2) create a subclass of UIControl that contains an array of UIButtons and implement the methods of UISegmentedControl (just the ones you need) using the buttons to make your subclass behave like a UISegmentedControl except for the rounded corners. – progrmr Jan 03 '12 at 15:20

score 6 · Answer 5 · answered Jan 01 '13 at 23:14

Another alternative to accomplish this in interface builder:

Drag a UIView object to your UIViewController, this may be a subview of your UIView.

Drag a UISegmentedControl as a subview of your UIView. The segmented control should now be indented in your list UIViewController objects. (see screenshot below).

Resize the SegementedControl so that its' frame is outside the boundaries of your UIView object. In my case I set the frame of the SegementedControl to X = -10 and added +20 to the width of the SegementedControl so that the total width of the segmented control because 20 greater then the UIView object. (hopefully, the screen shot below helps).

I also adjusted the following settings for the UIView object and SegmentedControl: UIView: check Clip SubViews, uncheck AutoResize Subviews. SegementedControl: uncheck Clip SubViews, uncheck AutoResize Subviews.

enter image description here

This solution is clean and simple and works very well for the case where you have exactly two equal sized segments. — northernman, Mar 19 '13 at 04:18
Very simple solution, and also works if it is created programmatically - so well done on the brilliant idea! — Jack Solomon, Sep 21 '14 at 06:52

UISegmentedControl with square corners

5 Answers5

Linked