ios: colorWithPatternImage , stretch image full screen

Question

I have one view , and want set backGroudColor for this view by UIImage. The code as :

self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"backImage.png"]];

the problem is: the backImage'frame is small than the view. how to stretch UIImage to full my view. I konw use UIImageView can reach.

someone have good idea?

update:

I can't upload one image.

Like this:backImge's size is 30*30, and my view's size is 1024*700, when i use myview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"backImage.png"]];

The result is myview's backGroup has many 'backImage.png'. my goal is have one 'backImage.png' streth full myview.

Answer 1

Have a try.

self.layer.contents = (id)[UIImage imageNamed:@"freshBackground.png"].CGImage;

Swift:

self.view.layer.contents = UIImage(named: "freshBackground")!.cgImage

Answer 2

As far as I know, you cannot resize the background's pattern image directly. The easiest way is just to change your image to fit your parent view's frame size. Or you can redraw your image to fit the size of your parent view.

UIView * yourView = [[UIView alloc] initWithFrame:CGRectMake(10.f, 100.f, 300.f, 100.f)];
UIImage * targetImage = [UIImage imageNamed:@"backImage.png"];

// redraw the image to fit |yourView|'s size
UIGraphicsBeginImageContextWithOptions(yourView.frame.size, NO, 0.f);
[targetImage drawInRect:CGRectMake(0.f, 0.f, yourView.frame.size.width, yourView.frame.size.height)];
UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();

[yourView setBackgroundColor:[UIColor colorWithPatternImage:resultImage]];

Answer 3

world000's answer translated to Swift:

self.layer.contents = UIImage(named: "freshBackground.png")?.CGImage

Answer 4

And based on Kjuly's answer, if you want the image to be inset properly at the center rather than being stretched, use this method to get the new image:

#pragma mark - Image
+(UIImage*)imageFitInCenterForSize:(CGSize)inSize forSourceImage:(UIImage*)inImage
{
    // redraw the image to fit |yourView|'s size
    CGSize imageOriginalSize = inImage.size;
    UIImage *resultImage = nil;
    if (imageOriginalSize.width<=inSize.width && imageOriginalSize.height<=inSize.height)
    {
        UIGraphicsBeginImageContextWithOptions(inSize, NO, 0.f);
        [inImage drawInRect:CGRectMake((inSize.width-imageOriginalSize.width)/2.0, (inSize.height-imageOriginalSize.height)/2.0, imageOriginalSize.width, imageOriginalSize.height)];
        resultImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
    return resultImage;
}

The same with overloaded variant:

+(UIImage*)imageFitInCenterForSize:(CGSize)inSize forSourceImage:(UIImage*)inImage xOffset:(CGFloat)inXOffset yOffset:(CGFloat)inYOffset
{
    // http://stackoverflow.com/questions/10629403/ios-colorwithpatternimage-stretch-image-full-screen
    // redraw the image to fit |yourView|'s size
    CGSize imageOriginalSize = inImage.size;
    UIImage *resultImage = nil;
    if (imageOriginalSize.width<=inSize.width && imageOriginalSize.height<=inSize.height)
    {
        UIGraphicsBeginImageContextWithOptions(inSize, NO, 0.f);
        [inImage drawInRect:CGRectMake((inSize.width-imageOriginalSize.width)/2.0+inXOffset, (inSize.height-imageOriginalSize.height)/2.0+inYOffset, imageOriginalSize.width, imageOriginalSize.height)];
        resultImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
    return resultImage;
}

Answer 5

I use the following method to:

1. draw the image within the specific bounds (which makes it scale)
2. use the resulting image as a pattern.

Code:

UIGraphicsBeginImageContext(self.window.frame.size);
[[UIImage imageNamed:@"background"] drawInRect:self.window.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.window.backgroundColor = [UIColor colorWithPatternImage:image];

Answer 6

Here's based on previous comments a version that scales the image first, then crops to proportionally aspect fill.

func imageScaledToFillSize(size: CGSize, image: UIImage) -> UIImage
{
    let aspect = image.size.width / image.size.height;
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    if (size.width / aspect <= size.height) {
        let resizedImg = self.imageScaledToSize(CGSize(width: size.height * aspect, height: size.height), image: image)
        resizedImg.drawInRect(CGRectMake((size.width - resizedImg.size.width)/2, 0, resizedImg.size.width, resizedImg.size.height))
    } else {
        let resizedImg = self.imageScaledToSize(CGSize(width: size.width, height: size.width / aspect), image: image)
        resizedImg.drawInRect(CGRectMake(0, (size.height-resizedImg.size.height)/2, resizedImg.size.width, resizedImg.size.height))
    }
    let imageR = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return imageR;
}

func imageScaledToSize(size: CGSize, image: UIImage) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, false, 0.0);
    image.drawInRect(CGRectMake(0.0, 0.0, size.width, size.height))
    let imageR = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();
    return imageR;
}