iPhone/Objective-C TTLauncherView loading high resolution images from a URL

Question

I am using Three20's TTLauncherView and was wondering whether anyone has had experience loading high resolution images?

http://three20.info/showcase/launcher

I am using the following method to set my TTLauncherItem's:

NSString *imageUrl = [self displayImageUrl:@"http://foo.com/lowres.png" withHighResUrl:@"http://foo.com/hires.png";
TTLauncherItem *launcherItem = [[[TTLauncherItem alloc] initWithTitle:@"Icon1"
                                                                image:imageUrl
                                                                  URL:@"Icon1"
                                                            canDelete:NO] autorelease];

This is the method I use to determine whether it's an iOS4.

- (NSString *)displayImageUrl:(NSString *)standardResUrl withHighResUrl:(NSString *)highResUrl {
    NSString *imageUrl = nil;
    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2) {
        imageUrl = highResUrl;
    } else {
        imageUrl = standardResUrl;
    }

    return imageUrl;
}

The problem is that images are actually getting displayed in their full dimensions on an iPhone 4, whereas any iOS device below an iPhone 4 are getting displayed properly. Just wondering whether I would need to make changes to the TTLauncherView library or whether there's an easier way to resolve such an issue.

Answer 1

I accomplished this by adding a new style to my three20 stylesheet based on launcherButtonImage. This is the original...

     - (TTStyle*)launcherButtonImage:(UIControlState)state {
      TTStyle* style =
        [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(-7, 0, 11, 0) next:
        [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:8] next:
        [TTImageStyle styleWithImageURL:nil defaultImage:nil contentMode:UIViewContentModeCenter
                      size:CGSizeZero next:nil]]];

      if (state == UIControlStateHighlighted || state == UIControlStateSelected) {
          [style addStyle:
            [TTBlendStyle styleWithBlend:kCGBlendModeSourceAtop next:
            [TTSolidFillStyle styleWithColor:RGBACOLOR(0,0,0,0.5) next:nil]]];
      }

  return style;
}

...and this is the updated version...

- (TTStyle*)favoriteLauncherButtonImage:(UIControlState)state {

    TTStyle* style =
    [TTShapeStyle styleWithShape:[TTRoundedRectangleShape
                                  shapeWithRadius:4.0] next:
     [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(0, 0, 0, 0)
                         padding:UIEdgeInsetsMake(16, 16, 16, 16)
                         minSize:CGSizeMake(0, 0)
                        position:TTPositionStatic next:
      [TTImageStyle styleWithImageURL:nil defaultImage:nil contentMode:UIViewContentModeScaleAspectFit
                                 size:CGSizeMake(64, 64) next: nil
       ]]];

    if (state == UIControlStateHighlighted || state == UIControlStateSelected) {
        [style addStyle:
         [TTBlendStyle styleWithBlend:kCGBlendModeSourceAtop next:
          [TTSolidFillStyle styleWithColor:RGBACOLOR(0,0,0,0.5) next:nil]]];
    }

    return style;
}

There's probably stuff in there you don't need like rounded image corners. The operative part is the TTImageStyle directive which locks the image size to 64x64. Hope this helps.

Answer 2

I am using Three20's TTLauncherView

Instead, try using SDWebImage:

https://github.com/rs/SDWebImage

You could just issue two loads on a UIImageView, one for the high and one for the low res image. The low-res should finish first...