Extend image repeating horizontal line and repeating vertical line on iOS

Question

I have image and in that image i want to repeat horizontal and vertical line, so i extend my image.

For example i have image 50X50, and i want it to be 50x70, by repeating line x = 15. Is this even possible on iOS?

EDIT:

Ok i'll try to be more clear. I have image 60x60, which is rectangle basically, with width 60 and height 60. Now i want to streach that image to be 80x60, by repeating pixles with x = 40. Or to draw it simply, i have:

  123456
1 XXXAXX
2 XXXAXX
3 XXXAXX
4 XXXAXX
5 XXXAXX
6 XXXAXX

and i want it to be:

  12345678
1 XXXAAAXX
2 XXXAAAXX
3 XXXAAAXX
4 XXXAAAXX
5 XXXAAAXX
6 XXXAAAXX

I repeat all pixels on image that are on the line 40. And i want to do it on any number of images.

Answer 1

If i understand the question correctly, you should use:

(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

UIEdgeInsets is structure that specifies float values for each cap inset: top, left, bottom and right areas of an image. To apply this to the image for the button, here is all we need to do:

UIImage *buttonImage = [[UIImage imageNamed:@"blueButton"]  
   resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];

This requests that the left and right 16 pixels of the original image are not scaled or resized when stretching the image to accomodate the button size frame defined above. The end

OBS: This only work well for plain images, for example images with gradient will not work well.

Take a look here for more detail.

Answer 2

The key to achieving your desired result is resizableImageWithCapInsets: on UIImage. For example, take the following 50px by 50px image (Note: this is the @2x version):

If you want to stretch the red line horizontal, you first define a UIEdgeInset that describes the position of the red line:

UIEdgeInsets redLine = UIEdgeInsetsMake(0, 15, 0, 34);

This defines a one-pixel wide slice of the image offset by 15px from the left. The right offset is 34 because the right edge of the stretchable slice is at 16px and 50 (image width) minus 16 is 34.

Now that we have the UIEdgeInset, we can load the image and create a stretchable version of it:

UIImage *stretchableImage = [[UIImage imageNamed:@"my_image"] resizableImageWithCapInsets:redLine];

We can assign this stretchableImage to a UIImageView with the frame that we need:

UIImageView *stretchedImageView = [[UIImageView alloc] initWithImage:stretchableImage];
stretchedImageView.frame = CGRectMake(100,100,70,50); // The image view is 70px wide

In the app, stretchedImageView will look like this:

There's another method called resizableImageWithCapInsets:resizingMode: that allows you to tile the image slice rather than stretch it, so you can do crazy things like take this image:

And tile it horizontally like this:

Answer 3

Just repeat an image in UIImageView like this:

var dottedLineView : UIImageView = {
    let view = UIImageView()
    view.contentMode = .scaleAspectFill
    view.clipsToBounds = true
    view.backgroundColor = UIColor(patternImage: #imageLiteral(resourceName: "dashedLine"))

    return view
}()