UIImage items array of UISegmentedControl does not show images

Question

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 self.view of the ViewController, but I can not see the images in my segmented control..

This is what I see :

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;

@end

Answer 1

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];
    }