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

Question

In my iPhone app, I have a control that takes on quite different sizes on different screens. For example, (in the 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.

The problem

This control has an image as its background. That particular image is important for brand identity and the custom appearance that my company's designer wants to go with. The image gives the appearance of a material and has a texture. It also has shadows within itself. I would like to apply this image on to controls of different screen sizes (my control sizes are determined at runtime according to available space, as Apple may come up with new screen sizes anytime).

My current solution

The designer makes separate PNGs for me for each screen size and I hard code it with onto my control using an if-else for screen size (after determining the size mathematically before hand). As you can probably tell, this is a horrible approach for robustness. I'm also looking to expand to iPad and having a better scaling system will certainly help.

An idea I take an image that's the smallest unit of the repeating texture and apply it to my control with the scaling option that repeats it throughout to obtain a final image. HOWEVER, I lose my shadows and rounded edges this way. (I tried simply using the largest image as well and the disproportionate scaling makes the rounded edges horrible)

I tried looking for solutions and most resources do not deal with such images. I simply cannot lose any part of this image and it should be fully applied to the control, shadows and corners included.

I apologize if any or all of this is naive or if I didn't look for answers using the correct words. This is my first time posting here at Stack Overflow, and I'm looking forward to hearing from you guys.

Thanks!

p

Edit:

This is applied to a custom UIButton based control to give the appearance of a card.

Edit 2: Wain seems to have suggested a perfect answer. I will try it and let everyone know the results.

Answer 1

I'd use tiling as you describe, and I'd combine that with changing the view layer corner radius and applying a shadow offset. In this way you can separate the important part of the image and make it nicely reusable and you can leverage the capability of CALayer.

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