backgroundImage retina display issue

You must Login before you can answer or comment on any questions.

This is not a question but a solution.

If you use backgroundImage on iPhone and you have both normal and @2x images to display you can fix the double size image problem by changing lines around 426 (where you see the TiDimensionLayerContentCenter call) in file TiUIView.m with the following content:

CGRect cc = TiDimensionLayerContentCenter(topCap, leftCap, topCap, leftCap, [resultImage size]);
self.layer.contentsCenter = cc;
CGFloat scale = [UIScreen mainScreen].scale;
self.layer.contentsScale = scale;
Yes, this is a format that is easy to debug just in case. The point is the self.layer.contentsScale call which is missing from the Ti code and this causes the @2x bug.

Obviously the best if you change the file at its original location somewhere inside your Ti install. On Mac this is: "/Library/Application Support/Titanium/mobilesdk/osx/1.6.2/iphone/Classes/TiUIView.m".

4 Answers

Thanks a lot! This saves me a lot of headache.

I wonder why Appcelerator is not solving this bug. In SDK 1.75 the last lines are still missing.

— answered 2 years ago by Danny Pham
answer permalink
4 Comments

  • Fix for repeated images in retina resolution (2.1.0).

    Please fix this Appcelerator so Apple do not reject our apps.

    UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, 0.0);
    CGContextRef imageContext = UIGraphicsGetCurrentContext();
    CGContextDrawImage(imageContext, CGRectMake(0, 0, bgImage.size.width, bgImage.size.height), [bgImage CGImage]);
    UIImage* translatedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
 
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0);
    CGContextRef background = UIGraphicsGetCurrentContext();
    CGRect imageRect = CGRectMake(0, 0, bgImage.size.width, bgImage.size.height);
    CGContextDrawTiledImage(background, imageRect, [translatedImage CGImage]);
    UIImage* renderedBg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    — commented 10 months ago by Chris Mikael

  • in TiUiView.m -> renderRepeatedBackground

    The above is true for iPad 3

    — commented 10 months ago by Chris Mikael

  • Thanks for the code. Does this also works with topCap, leftCap etc.?

    — commented 10 months ago by Danny Pham

  • Show 1 more comment

Sorry, I am totally ignorant about this and would like to fix this issue. I am using 1.8.2 and it still seems to be a problem with top and left caps. This is the code that I have, in the file that you mentioned. What would the new one look like?

Thanks for your help.

-(void)setBackgroundImage_:(id)image
{
    UIImage* bgImage = [TiUtils loadBackgroundImage:image forProxy:proxy];
 
    if (backgroundRepeat) {
        [self renderRepeatedBackground:bgImage];
    }
    else {
        [self backgroundImageLayer].contents = (id)bgImage.CGImage;
        if (bgImage != nil) {
            [self backgroundImageLayer].contentsCenter = TiDimensionLayerContentCenter(topCap, leftCap, topCap, leftCap, [bgImage size]);
        }
    }
 
    self.clipsToBounds = bgImage!=nil;
    self.backgroundImage = bgImage;
}

— answered 1 year ago by Leonardo Amigoni
answer permalink
2 Comments

  • Anyone? The code seems to have changed in 1.8.2 and don't really know where to put it. Can you please give mea hint?

    Thanks

    — commented 1 year ago by Leonardo Amigoni

  • Guess you have found the answer yourself after 6 months, but here is the solution: 

    if (bgImage != nil) {
            [self backgroundImageLayer].contentsCenter = TiDimensionLayerContentCenter(topCap, leftCap, topCap, leftCap, [bgImage size]);
            CGFloat scale = [UIScreen mainScreen].scale; // (new)
            [self backgroundImageLayer].contentsScale = scale; // (new)
        }

    — commented 9 months ago by Danny Pham

Thanks a lot! This saves me a lot of headache.

I wonder why Appcelerator is not solving this bug. In SDK 1.75 the last lines are still missing.

Hello, this is working fine for me with sdk 2.1.0+ but I noted an horizontal black line of 1px between the images repeat.

My image is correct, so I think the problem is related to the repeat function.

See this image

Anyone experienced this problem too?

Thank you, Stefano.

Your Answer

Think you can help? Login to answer this question!