Background image stretch vertically, but repeating horizontally

Question

Currently using:

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "background.png")!)

But the problem is that it repeats both vertically and horizontally. I'm trying to keep it repeating horizontally while stretching vertically to fit the screen.

Can you attach the screen? It's not really clear what's the problem you are facing. — Lucas Huang, Dec 19 '15 at 19:55
@LucasHuang Let's say you're viewing the app on an iPad; the view is a lot higher than an iPhone. The image isn't big enough to reach the bottom of the view so it repeats vertically. I only want to stretch vertically because it still needs to repeat horizontally. — eskimo, Dec 19 '15 at 20:01
You are going to have to adjust the image you are using for the pattern to achieve what you want, but it is a hack. — Peter Hornsby, Dec 19 '15 at 20:05
@fragilecat yeah, that's why I figured I'd see if there is a way to basically aspect fit and then repeat horizontally. — eskimo, Dec 19 '15 at 20:06

score 1 · Accepted Answer · answered Dec 19 '15 at 21:01

Subclass UIView call it something like BackgroundImageView or something it override drawInRect thusly:

import UIKit
@IBDesignable
class BackgroundImageView: UIView {
    @IBInspectable var backgroundImage:UIImage?{
        didSet{
            self.setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {
        var i:CGFloat = 0.0
        if backgroundImage != nil
        {
            while (i*backgroundImage!.size.width)<self.bounds.size.width
            {
                backgroundImage!.drawInRect(CGRect(x: i*backgroundImage!.size.width, y: 0.0, width: backgroundImage!.size.width, height: self.bounds.size.height))
                i+=1.0
            }
        }
    }


}

Drag out a UIView in IB change its class to BackgroundImageView and set the backgroundImage to background.png.

score 0 · Answer 2 · edited May 23 '17 at 10:31

You could try re sizing your image to the frame, stretching it vertically but leaving it the same size horizontally then set it to repeat like you currently do.

As far as I'm aware there isn't a built in setting to stretch on one axis and repeat on another.

The code might look something like this:

CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenHeight = screenRect.size.height;

UIImage * targetImage = [UIImage imageNamed:@"background.png"];
UIView * yourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, targetImage.size.width, screenHeight)];

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

[self.view setBackgroundColor:[UIColor colorWithPatternImage:resultImage]];

Re-sizing the image

Getting screen size

Background image stretch vertically, but repeating horizontally

2 Answers2