croigsalvador croigsalvador - 1 year ago 60
Objective-C Question

UIImage items array of UISegmentedControl does not show images

I want to implement a SegmentedControl Bar with Images, so, I have created an array with UIImages and then I added to the segmented control:

UIImage *img1 = [UIImage imageNamed:@"btn-checkin.png"];
UIImage *img2 = [UIImage imageNamed:@"btn-checkin.png"];
UIImage *img3 = [UIImage imageNamed:@"btn-fav-selected.png"];
UIImage *img4 = [UIImage imageNamed:@"btn-fav.png"];

NSArray *itemsArray = [NSArray arrayWithObjects:img1,img2,img3,img4,nil];

segmentedControlBar = [[WPCustomSegmentedBar alloc] initWithItems:itemsArray];
segmentedControlBar.frame = toolBarFrame;

I add this to the
of the
, but I can not see the images in my segmented control..

This is what I see : enter image description here

Blue squares instead of the pictures..

The path of the pictures is ok.

This is my Custom implementation..

@implementation WPCustomSegmentedBar

- (id)initWithItems:(NSArray *)items
self = [super initWithItems:items];
if (self) {

self.segmentedControlStyle = UISegmentedControlStyleBar;
self.selectedSegmentIndex = UISegmentedControlNoSegment;
[self addTarget:self action:@selector(valueChanged:) forControlEvents: UIControlEventValueChanged];
return self;
- (void)valueChanged:(UISegmentedControl *)segment {

[self disableButtonImage];
if(segment.selectedSegmentIndex == 0) {
[self setImage:[UIImage imageNamed:@"btn-checkin-selected.png"] forSegmentAtIndex:segment.selectedSegmentIndex];
}else if(segment.selectedSegmentIndex == 1){
[self setImage:[UIImage imageNamed:@"btn-info-selected.png"] forSegmentAtIndex:segment.selectedSegmentIndex];
}else if(segment.selectedSegmentIndex == 2){
[self setImage:[UIImage imageNamed:@"btn-comment-selected.png"] forSegmentAtIndex:segment.selectedSegmentIndex];
}else if(segment.selectedSegmentIndex == 3){
[self setImage:[UIImage imageNamed:@"btn-fav-selected.png"] forSegmentAtIndex:segment.selectedSegmentIndex];
self.activeButtonIndex = segment.selectedSegmentIndex;


-(void) disableButtonImage
if(activeButtonIndex == 0) {
NSLog(@"active button 0");
[self setImage:[UIImage imageNamed:@"btn-checkin.png"] forSegmentAtIndex:activeButtonIndex];
}else if(activeButtonIndex == 1){
NSLog(@"active button 1");
[self setImage:[UIImage imageNamed:@"btn-info.png"] forSegmentAtIndex:activeButtonIndex];
}else if(activeButtonIndex== 2){
NSLog(@"active button 2");
[self setImage:[UIImage imageNamed:@"btn-comment.png"] forSegmentAtIndex:activeButtonIndex];
}else if(activeButtonIndex == 3){
NSLog(@"active button 3");
[self setImage:[UIImage imageNamed:@"btn-fav.png"] forSegmentAtIndex:activeButtonIndex];


and .h

#import <UIKit/UIKit.h>

@interface WPCustomSegmentedBar : UISegmentedControl

@property (nonatomic)NSInteger activeButtonIndex;


Answer Source

The images have to have the correct rendering mode. This is what I have in my subclassed UISegmentedControl init.

    for (int i = 0 ; i < self.imagesArray.count; i++) {
        UIImage *image = [self.imagesArray[i] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.imagesArray[i] = image;
        [self setImage:self.imagesArray[i] forSegmentAtIndex:i];
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download