UISegmentedControl with Image and Title

Question

I have a custom UISegmentedControl with 2 sections and it is declared programmatically so I cannot use IB. I set a background image, tint, and a title. I need to have an image display in line with the title. If i set the image, the title disappears and vice versa.

I need a way to display both an image and the title in line on the segment. Any thoughts?

Answer 1

Creating a subclass of UISegmentedControl, overwriting

[MySegmentedControl initWithItems:] 
-(id) initWithItems:(NSArray*)items {
    [self setImage:anImage forState:aState barMetrics:UIBarMetricsDefault];
    [self setTitleTextAttributes:aDict forState:aState];
    [self setDividerImage:anImage forLeftSegmentState:aState rightSegmentState:aState barMetrics:UIBarMetricsDefault];
    ... do more UI stuff ...
}

And in your view controller, you call it with:

-(void)viewDidLoad {
    [self.view addSubview:[MySegmentedControl alloc] initWithItems:@[@"one",@"two"]]];
    ...

works for me reliably for iOS6/7.

Answer 2

Assuming segmentedControl is in your .h as

@property (weak, nonatomic) IBOutlet UISegmentedControl *segmentedControl;

Do this in your .m for your viewController and set up the segments in code

[self.segmentedControl insertSegmentWithTitle:@"Title with Image" atIndex:0 animated:YES];
        [self.segmentedControl setImage:[UIImage imageNamed:@"whatever.png"] forSegmentAtIndex:0];