Change Height of UISegmentedControl

Question

I am trying to change height of UISegmentedControl using this code:

CGRect frame= mySegmentedControl.frame;
[mySegmentedControl setFrame:CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, fNewHeight)];

But it does not work. has anyone idea why? It actually works, if I un-check the "Use Autolayout" feature of the segmented control in interface builder, but then the items in the segmented control become not clickable for some reasons...

This is next to the issue, that I still didn't find an easy way to add multiple lines of text to the UISegmentedControl (any help here would also be appreciated).

`UISegmentedControl`'s height is not supposed to be changed, as you might've seen from IB. Create a custom component if you want that look and feel. — tipycalFlow, Dec 19 '12 at 07:43
what do you mean by custom component, you mean NOT UISegmentedControl? — user1903992, Dec 19 '12 at 08:01

score 9 · Answer 1 · answered Dec 19 '12 at 08:02

Seems it's about the view cycle.

Laying out views in iOS actually concerning 3 factors 1. autolayout (avaliable since iOS6) 2. setFrame 3. autoreiszing mask

For your case,

autolayout will help to calculate the required frame (based on the NSLayouConstraints)for that UIView then lay them out.

So in the interface builder, if you enable "autolayout", the interface builder is generating NsLayoutConstraints for that UIView. if you disable "autolayout" , the builder is generating a frame for you UIView.

Assuming you have to use autolayout, you have to resize your UISegmentedControl in a correct timing

- (void)viewDidLayoutSubview

It's about the view life cycle. To simplify it, it's like:

updateConstraints -> layout (You better watch related WWDC Session Videos for details)

You can't change the frame because this flow:

set new frame by code -> view handle constraints and calculation(generating an other frame for the UISegmentedControl) -> do the layout

Sorry for this not-well-organised answer.

score 4 · Answer 2 · answered Mar 19 '13 at 15:57

Perhaps this will help: I had a custom-sized UISegmentedControl within a Storyboard view. The Storyboard views were utilizing AutoLayout and each time I pressed one of the segments, the UISegmentedControl would resize to the default height and not to the custom frame size.

My solution:

1) Set the UISegmentedControl frame in -(void)viewDidLoad:

[mySegControl setFrame:CGRectMake(100, 170, 568, 100)];

2) Set the frame in -(void)viewDidLayoutSubviews:

[mySegControl setFrame:CGRectMake(100, 170, 568, 100)];

3) In the method you use as the target for when a segment is selected, call setNeedsLayout. This will force the UISegmentedControl to be re-laid-out IAW your custom frame size

[self.view setNeedsLayout];

An additional step that was required for me was to add mySegControl.translatesAutoresizingMaskIntoConstraints = true (Swift) to the beginning of my viewDidLoad function (or else the segmented control would jump every time it was clicked on) — Joseph, Dec 20 '15 at 04:47

score 3 · Answer 3 · answered Dec 19 '12 at 08:05

3

For me i'm using this mySegmentedControl.frame=CGRectMake(236, 178, 171, 35); and it works like a charme.

Did you check the frame values?

answered Dec 19 '12 at 08:05

Mouhamad Lamaa

884
2
12
26

score 2 · Answer 4 · answered Mar 12 '14 at 06:36

Fortunately you can change the height from the xib as well.

You can do so through the xib as well. Just add a segment control into the xib. Then open the xib in TextEdit. There you will find the code :

<segmentedControl opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" translatesAutoresizingMaskIntoConstraints="NO" id="B99-Tt-vJG">

<rect key="frame" x="222" y="82" width="123" height="44"/>

Here you change the height from 44 to any required height. You can change the height of any UIConponent like this. Even for the UIPickerView.

score 2 · Answer 5 · answered Aug 30 '14 at 21:19

2

To do it inside Interface Builder you can select the control and add frame attribute under "User Defined Runtime Attributes"

adding frame attribute inside Interface Builder

answered Aug 30 '14 at 21:19

Shaz

958
7
9

score 1 · Answer 6 · answered Aug 14 '22 at 11:42

1

Step 1: Make a @IBOutlet of your UISegmentedControl, Just like -

 @IBOutlet weak var segemntControl: UISegmentedControl!

And then, add this line of code to your viewDidLoad() -

segemntControl.frame.size.height = 50

answered Aug 14 '22 at 11:42

Rashed

2,349
11
26

score 0 · Answer 7 · answered Apr 29 '23 at 22:18

0

Risky method, but you can also update the height by changing its constraints and adding height constraint

answered Apr 29 '23 at 22:18

Mr.Schtelbe

93
6

Change Height of UISegmentedControl

7 Answers7

Linked