Repeat image horizontally and vertically

Question

I want to repeat the following image:

enter image description here

to achieve the following background:

enter image description here

I tried a few codes as follow:

bluePatternView.backgroundColor = [UIColor colorWithPatternImage:
    [[UIImage imageNamed:@"blue_pattern.png"] stretchableImageWithLeftCapWidth:0 topCapHeight:0]];

and:

bluePatternView.backgroundColor = 
    [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

I also tried to draw image with CGContextDrawTiledImage with no success.

How that can be done?!

EDIT: result of implementing luk2302. please give him recognition by upvoting

bluePatternView.backgroundColor = 
  [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

result:

enter image description here

the first line did not work!? have you tried just using `bluePatternView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];` — luk2302, May 02 '15 at 11:13
`stretchableImageWithLeftCapWidth` is deprecated btw - if you want to use its functionality, use `resizableImageWithCapInsets` instead. — luk2302, May 02 '15 at 11:15
it was the caching with the simulator and xcode. I had to delete the derived data from /Users/Apple/Library/Developer/Xcode/DerivedData — hasan, May 02 '15 at 11:44
oh no :( but yes, uninstalling and reinstalling an app should always be one of the first step if some very strange behaviour occurs... — luk2302, May 02 '15 at 11:46

Mohammad Zaid Pathan · Answer 1 · 2017-01-04T05:17:18.450

31

I found solution in images.xcassets,

Step 1:- Put your image to images.xcassets

Step 2:- Click on image, then click on bottom right corner written “Show Slicing” Put image

Step 3:- Click on Start Slicing

Step 4:- Click on "Slice Horizontally and Vertically" button

Step 5:- Here you will see 3-Horizontal and 3-Vertical slice lines.
enter image description here

Put the most left vertical line to left side of image and both right most lines to right side of image.
Put the most top line to top of image and both bottom most lines to bottom of image.
So the final result will be looking like this.

enter image description here

Step 6:- Use this image.

And now image will be repeated.

enter image description here

Note:- If you give slicing to 2x image it will repeat just 2x image, for 3x images you need to do the same slicing.

Example by Apple

edited Jan 04 '17 at 05:17

answered May 04 '15 at 05:32

Mohammad Zaid Pathan

16,304
7
99
130

1

This works for me very well, even though my pattern image has very small design. Thanks. – Bharat Modi May 06 '16 at 07:46
what exactly does *slicing* mean in this context? or is it same as *repeating* something? – mfaani Jan 03 '17 at 15:24
@Honey `Use the Xcode Slicing feature to specify the dimensions of a resizable center area of an image and to optionally specify end caps, which are areas of the image that should not be filled by the resizable area` [See this.](http://help.apple.com/xcode/mac/8.0/#/deve65bd8d0d) – Mohammad Zaid Pathan Jan 04 '17 at 05:16
Any ideas why these images don't always work in launchscreen.storyboards but do always work in normal storyboards? – Jules Jul 11 '17 at 19:03
1

@ZaidPathan thank you so much for the amazing solution! I've been working on Xcode for about 3 years and never known about this! – Maryoomi1 Jan 13 '19 at 08:38
4

Don't forgot that set image content mode to (Scale To Fill) in your imageView – Hamid Reza Ansari Mar 28 '20 at 12:12

score 26 · Accepted Answer · edited May 02 '15 at 12:16

26

As my comment already said: use

bluePatternView.backgroundColor = 
  [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

You dont want to stretch your image. Let UIKit take care of the repetition.

Assuming that your bluePatternView is the actual large view for which you want to set a pattern as background. Maybe you are setting the background property of the wrong view if that code is still not working.

Note: duplicating the SAME image with @2x and @3x extension will lead to behaive properly for better resolution devices.

enter image description here

edited May 02 '15 at 12:16

hasan

23,815
10
63
101

answered May 02 '15 at 11:19

luk2302

55,258
23
97
137

I tried this it repeats it horizontally and stretch it vertically – hasan May 02 '15 at 11:22
shall wee modify the view mode. Scale to fill or Aspect Fit. exists in interface builder – hasan May 02 '15 at 11:23
Now, they regard the content, not the background. Am i correct in assuming that you have a large view set up in IB and set the background via above code!? – luk2302 May 02 '15 at 11:25
yes, you are right. I updated the question with your code and result – hasan May 02 '15 at 11:26
Ok I wll check again! – hasan May 02 '15 at 11:27
Okay, that looks right. Maybe your background image has a too high resolution to be repeated more often. Or try to make your view bigger, especially taller – luk2302 May 02 '15 at 11:27
you have the images in the question. can you confirm that? it not a high resolution image I thought that in the beginning – hasan May 02 '15 at 11:28
you are right that code worked for other images! I will try to figure out what is the problem here! – hasan May 02 '15 at 11:31
Ok, I was expecting that it will take care of the screen size. 2x and 3x for iphone 6 plus. any idea how to do this? – hasan May 02 '15 at 11:33
Do that. The code is 100% correct - if it does not work, then something is wrong with your image or the actual view. – luk2302 May 02 '15 at 11:33
It does. If you provide `blue_pattern.png` and the appropriately named other images like `blue_pattern@2x.png` Xcode will choose the correct one! – luk2302 May 02 '15 at 11:34

score 5 · Answer 3 · answered Mar 22 '17 at 12:15

5

bluePatternView.backgroundColor = UIColor(patternImage: UIImage(named: "blue_pattern")!)

answered Mar 22 '17 at 12:15

Rizwan Mumtaz

3,875
2
30
31

2

Whilst this code snippet is welcome, and may provide some help, it would be [greatly improved if it included an explanation](//meta.stackexchange.com/q/114762) of *how* and *why* this solves the problem. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Mar 22 '17 at 16:52

score 0 · Answer 4 · edited Apr 07 '18 at 10:57

0

You need to save image in Assets then put those lines in viewdidload

bluePatternView.backgroundColor = UIColor.init(patternImage: #imageLiteral(resourceName: "f8"))

This is for Swift 4.1.

edited Apr 07 '18 at 10:57

Stephen Kennedy

20,585
22
95
108

answered Apr 07 '18 at 10:38

Bala Murugan

47
6

score -1 · Answer 5 · answered May 02 '15 at 11:13

-1

this with Bellow Method using stretchableImageWithLeftCapWidth like this way:-

UIImage *backgroundImage = [[UIImage imageNamed:@"SheetBackground.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];

as par your need example:-

UIImage *backgroundImage = [[UIImage imageNamed:@"q4Ses.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];

  [_scro setBackgroundColor:[UIColor colorWithPatternImage:backgroundImage]];

answered May 02 '15 at 11:13

Vijay yadav

1,220
8
17

I trired that. you copy it from another answer as it is?! I will try again! – hasan May 02 '15 at 11:14
i am also try this code its work for me thats why i give answer – Vijay yadav May 02 '15 at 11:16
this code stretches the image dont repeat it. stretch it vetically – hasan May 02 '15 at 11:16
I want a vertical and horizontal repeatition – hasan May 02 '15 at 11:18

Repeat image horizontally and vertically

5 Answers5

Linked