How to set UIScrollView's background image as a stretchable image?

Question

I want to set UIScrollView's background image as a stretchable image. I tried:

UIImage* backgroundImage =[[UIImage imageNamed:@"background"]
                               resizableImageWithCapInsets:UIEdgeInsetsMake(100, 0, 0, 0) ];
self.scrollView.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];

But it is not stretching.

What can I do?

score 3 · Accepted Answer · answered Mar 18 '13 at 17:41

If you want to take advantage of the resizable properties of the UIImage, you need to use an UIImageView. As you've noticed, it doesn't work if you set it as a background color. Just create an UIImageView and put it behind your UIScrollView with the same frame if it has to be fixed, or inside your UIScrollView with the same size as the contentSize if you want it to scroll...

score 1 · Answer 2 · answered Mar 18 '13 at 14:51

Add image in UIImageView and in your case set

yourImageView.contentMode = UIViewContentModeScaleAspectFill;

you can set it to any of the following

UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
UIViewContentModeRedraw,
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight

Ans add This UIImageView in you scrolView.

Another way is you can use following method for get/create image size as you want.

Use following method with specific hight and width with image

+ (UIImage*)resizeImage:(UIImage*)image withWidth:(int)width withHeight:(int)height
{
    CGSize newSize = CGSizeMake(width, height);
    float widthRatio = newSize.width/image.size.width;
    float heightRatio = newSize.height/image.size.height;

    if(widthRatio > heightRatio)
    {
        newSize=CGSizeMake(image.size.width*heightRatio,image.size.height*heightRatio);
    }
    else
    {
        newSize=CGSizeMake(image.size.width*widthRatio,image.size.height*widthRatio);
    }


    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

This method return NewImage, with specific size that you specify.

score 0 · Answer 3 · answered Mar 18 '13 at 15:02

Try this one

UIImage* backgroundImage =[[UIImage imageNamed:@"back.jpg"]
                           resizableImageWithCapInsets:UIEdgeInsetsMake(100, 0, 0, 0) ];
UIGraphicsBeginImageContextWithOptions(self.scrollView.bounds.size, NO, 0.0);
[backgroundImage drawInRect:self.scrollView.bounds];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

self.scrollView.backgroundColor = [UIColor colorWithPatternImage:newImage];

How to set UIScrollView's background image as a stretchable image?

3 Answers3