CODEWITHSUNDEEP
iphoneiosbackgroundtextures
Paulius Dragunas
Paulius Dragunas

Reputation: 1712

iOS background and images seem to not scale properly for retina display

When using the following code: 

self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"texture1.png"]];

The texture background of my view gets set just fine. But I can see that the images are not scaled properly for a retina display, they seem more pixelated, rather than rich in texture and color as they should be. I have had this issue with other images too, when trying to make an image the size of the iphone 5 screen fade away, only a part of it would be seen, and the rest would be cut off, even though the resolution is fine. Any idea what I am missing here?

EDIT: Does it have to do with the default dpi of the images that I am using?

EDIT #2: Here is a screenshot: enter image description here

On a side note, does anyone know if good background texture sources besides http://subtlepatterns.com/?

EDIT #3: Here is a good example of me attempting to use the ios-linen pattern enter image description here

Upvotes: 2

Views: 1333

Answers (2)

IronManGill
IronManGill

Reputation: 7226

Instead of using initWithPatternImage you should add a UIImageView to the UIView . This is better because :-

  1. The UIImageView will contain the image according to its specific width and height.

  2. Also, the initWithPatternImage method consumes MORE MEMORY than the UIImageView.

I would prefer to use a UIImageView rather than the 

initWithPatternImage:[UIImage imageNamed:@"texture1.png"]

If the image is still not clear you can add the @2x image to the UIImageView and you will see the clarity is more.

Upvotes: 0

Deepesh
Deepesh

Reputation: 8053

firstly remove .png from image name if you are use @2x image

self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"texture1"]];

Please check the image height and width for retain display ..

By Apple On devices with high-resolution screens, the imageNamed:, imageWithContentsOfFile:, and initWithContentsOfFile: methods automatically looks for a version of the requested image with the @2x modifier in its name. If it finds one, it loads that image instead. If you do not provide a high-resolution version of a given image, the image object still loads a standard-resolution image (if one exists) and scales it during drawing.

Upvotes: 3

Related Questions