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.

Sent

can you show some image, to get us some more idea about the issue? – Kaiulani

Might be this is your issue - #8651776 – Kaiulani

Objective-C , Xcode 10.14, self.layer.contents = (__bridge id _Nullable)([UIImage imageNamed: @"freshBackground"].CGImage); – Boyer

Answer 1

Have a try.

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

Swift:

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

Mumford

Here is a tutorial the explains it: raywenderlich.com/2502/… – Maje

Perfect solution. Works well. – Chromogenic

2015, and still the best solution. – Embattle

Awesome answer, although it wouldn't be appropriate if one needs to use a UIColor for example for altering the alpha component (semi transparent image) – Offshore

Awesome Dude. For Swift : self.view.layer.contents = UIImage.init(named:"freshBackground")!.CGImage – Ruddie

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

Kirov

I had trouble implementing this method until I realized that my UIView's size in the xib was set to Freeform. Changing the UIView's size to "Inferred" sorted me out. – Composure

Answer 3

world000's answer translated to Swift:

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

Ottinger

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
{
    // https://mcmap.net/q/377962/-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;
}

Sumpter

This help mw very well – Cimmerian

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

Gummite

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

Estuary