UISegmentedControl with Bezeled Style uncenters titles on Device

Question

for clarification I'll just add 2 overlaid Screenshots, one in Interface Builder, the other on the device. The lower UISegmentedControl is fresh out of the library with no properties edited, still it looks different on the Device (in this case a non-Retina iPad, though the problem is the same for Retina-iPhone) (Sorry for the quick and dirty photoshopping)

Bezeled Style UISegmentedControl

Any ideas?

EDIT: I obviously tried the "alignment" under "Control" in the Utilities-Tab in Interface Builder. Unfortunately none of the settings changed anything for the titles in the UISegment. I don't think they should as they are not changing titles in Interface Builder either.

EDIT2: Programmatically setting:

eyeSeg.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

doesn't make a difference either.

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

Found the Problem "UISegmentedControlStyleBezeled is deprecated. Please use a different style."

See also what-should-i-use-instead-of-the-deprecated-uisegmentedcontrolstylebezeled-in-io

edited May 23 '17 at 11:55

Community

1
1

answered Jun 08 '12 at 14:23

Bersaelor

2,517
34
58

Yeah. I was thinking about that, too; however, I wasn't so sure because Apple haven't updated their docu about deprecating UISegmentedControlStyleBezeled. But, kodus to you for the question and answer. :) – Kimpoy Jun 08 '12 at 19:51

score 1 · Answer 2 · answered Jun 07 '12 at 23:47

1

Hmm...have you checked the alignment? Maybe that's the case.

answered Jun 07 '12 at 23:47

Kimpoy

1,974
3
21
38

If you're talking about the alignment under Control in the Utilities-Tab I did play with that at first. Unfortunately none of the settings change anything for the titles in the UISegment. – Bersaelor Jun 08 '12 at 13:31

score 0 · Answer 3 · edited May 23 '17 at 10:32

You can recursively search the subviews of the UISegmentedControl view for each of the UILabels in the segmented control and then change the properties of each UILabel including the textAlignment property as I've shown in a sample of my code. Credit to Primc's post in response to Change font size of UISegmented Control for suggesting this general approach to customizing the UILabels of a UISegmentedControl. I had been using this code with the UISegmentedControlStyleBezeled style by the way even after it was deprecated although I have recently switched to UISegmentedControlStyleBar with an adjusted frame height.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Adjust the segment widths to fit the text.  (Will need to calculate widths if localized text is ever used.)
    [aspirationControl setWidth:66 forSegmentAtIndex:0]; // Navel Lint Collector
    [aspirationControl setWidth:48 forSegmentAtIndex:1]; // Deep Thinker
    [aspirationControl setWidth:49 forSegmentAtIndex:2]; // Mental Wizard
    [aspirationControl setWidth:64 forSegmentAtIndex:3]; // Brilliant Professor
    [aspirationControl setWidth:58 forSegmentAtIndex:4]; // Nobel Laureate

    // Reduce the font size of the segmented aspiration control
    [self adjustSegmentText:aspirationControl];
}

- (void)adjustSegmentText:(UIView*)view {
    // A recursively called method for finding the subviews containing the segment text and adjusting frame size, text justification, word wrap and font size
    NSArray *views = [view subviews];
    int numSubviews = views.count;

    for (int i=0; i<numSubviews; i++) {
        UIView *thisView = [views objectAtIndex:i];
        // Typecast thisView to see if it is a UILabel from one of the segment controls
        UILabel *tmpLabel = (UILabel *) thisView;
        if ([tmpLabel respondsToSelector:@selector(text)]) {
            // Enlarge frame.  Segments are set wider and narrower to accomodate the text.
            CGRect segmentFrame = [tmpLabel frame];
            // The following origin values were necessary to avoid text movement upon making an initial selection but became unnecessary after switching to a bar style segmented control
            // segmentFrame.origin.x = 1;
            // segmentFrame.origin.y = -1;
            segmentFrame.size.height = 40;
            // Frame widths are set equal to 2 points less than segment widths set in viewDidLoad
            if ([[tmpLabel text] isEqualToString:@"Navel Lint Collector"]) {
                segmentFrame.size.width = 64;
            }
            else if([[tmpLabel text] isEqualToString:@"Deep Thinker"]) {
                segmentFrame.size.width = 46;
            }
            else if([[tmpLabel text] isEqualToString:@"Mental Wizard"]) {
                segmentFrame.size.width = 47;
            }
            else if([[tmpLabel text] isEqualToString:@"Brilliant Professor"]) {
                segmentFrame.size.width = 62;
            }
            else {
                // @"Nobel Laureate"
                segmentFrame.size.width = 56;
            }

            [tmpLabel setFrame:segmentFrame];
            [tmpLabel setNumberOfLines:0];  // Change from the default of 1 line to 0 meaning use as many lines as needed
            [tmpLabel setTextAlignment:UITextAlignmentCenter];
            [tmpLabel setFont:[UIFont boldSystemFontOfSize:12]];
            [tmpLabel setLineBreakMode:UILineBreakModeWordWrap];

        }

        if (thisView.subviews.count) {
            [self adjustSegmentText:thisView];
        }
    }
}

The segmented control label text has an ugly appearance in IB but comes out perfectly centered and wrapped across 2 lines on the device and in the simulator using the above code.

UISegmentedControl with Bezeled Style uncenters titles on Device

3 Answers3