What is a good approach for zooming / drawing images for different screen sizes?

Question

In my iPhone app, I have a control that has different sizes on different screens. For example, (in iOS point coordinates)

• 3.5-inch devices (iPhone 4S): 242x295
• 4-inch devices (iPhone 5 Series, SE): 242x383
• 4.7-inch devices (iPhone 6 series): 297x482
• 5.5-inch devices (iPhone 6 Plus series): 336x551

As you can see, these control sizes are not proportional.

Problem

This control has an image as a background. This particular image is important for identifying the brand and the look that my designer wants to work with. The image gives the appearance of the material and has a texture. He also has shadows within himself. I would like to use this image to control various screen sizes (the sizes of my controls are determined at runtime according to the available space, since Apple can come up with new screen sizes at any time).

My current solution

The designer makes a separate PNG for me for each screen size, and I hardcode it using my control, using if-else for the screen size (after determining the size mathematically before hand). As you can probably tell, this is a terrible approach to reliability. I also want to expand access to the iPad and, of course, help to improve the zoom system.

Idea I take the image, which is the smallest unit of repeating texture, and apply it to my control using the zoom option, which repeats it everywhere to get the final image. HOWEVER, I lose my shadows and rounded edges this way. (I tried just using the largest image, and disproportionate scaling makes the rounded edges awful)

I tried to look for solutions, and most resources do not deal with such images. I simply cannot lose some of this image, and it must be fully applied to the controls, shadows and corners.

I apologize if all or all of this is naive or I did not look for answers using the right words. This is my first Stack Overflow post and I look forward to seeing you guys.

Thanks!

R

Edit:

This applies to a custom UIButton-based control to provide the appearance of a map.

Edit 2: Wayne seems to have suggested the perfect answer. I will try and let everyone understand the results.

Answer 1

I would use tiling, as you described, and I would combine this with changing the angular radius of the layer and applying shadow offset. This way you can separate the important part of the image and make it reusable, and you can use the capabilities of CALayer .

Note that when you set the shadowOffset layer, you should also look at shadowColor , shadowRadius and shadowOpacity .

Answer 2

You can use Assets.xcassets to manage images in ios. You can make an image in 1x, 2x and 3x scales.

For example, you want an icon 50x50 pixels in size, and then 1x should be 50x50, 2x should be 100x100 and 3x should be 150x150. then ios will automatically accept the corresponding image from this set.

Hope this helps :)

Answer 3

The aspect ration of the iPhone 5, iPhone 6 and iPhone 6P is almost the same. however, the aspect ratio of the iPhone 4 is different.

Here are the steps to help you.

• So, you need one image, the image of which is suitable for iPhone 5 and its @ 2x and @ 3x and iPhone 4 and its image @ 2x,

  If you have an image with 242x383 for iPhone 5, then you need images with its @ 2x and @ 3x images. and you need an image compatible with the size of the iPhone 4.

• You need to set UIImageView's contentMode as aspectFit .

So, the idea is to make the iPhone 5 image and its @ 2x, @ 3x and iPhone 4 images differently. or you can put all things in UIScrollView and set contentSize scrollView - 568 for iPhone 4. And make another image for iPad.