Framing images properly with new @3x frames

Question

So, I'm making an app that has a lot of images that I'm using for the UI, but I'm having trouble with the @1x, 2x, and 3x concept now that I'm trying to setup frames.

So first off, I wrote a global function library that contains a function called getDevice so I can determine what device the user is using to setup the proper frames for each element:

//Device
+ (int)getDevice
{
    CGSize bounds = [[UIScreen mainScreen] bounds].size;

    if((bounds.width == 320 && bounds.height == 480) || (bounds.width == 480 && bounds.height == 320))
        return gDevice_iPhone4S;
    else if((bounds.width == 320 && bounds.height == 568) || (bounds.width == 568 && bounds.height == 320))
        return gDevice_iPhone5;
    else if((bounds.width == 375 && bounds.height == 667) || (bounds.width == 667 && bounds.height == 375))
        return gDevice_iPhone6;
    else if((bounds.width == 414 && bounds.height == 736) || (bounds.width == 736 && bounds.height == 414))
        return gDevice_iPhone6Plus;
    else if((bounds.width == 768 && bounds.height == 1024) || (bounds.width == 1024 && bounds.height == 768))
        return gDevice_iPad;

    return gDevice_Unknown;
}

That's all functioning well, but my question surrounds frame sizing now that I can recognize the right device. So, for instance, let's say I have three buttons that I want to span the bottom of the screen. On the iPhone 4S, it would be like this:

Now this is using 3 images:

• image_1@2x.png (220x80)
• image_2@2x.png (200x80)
• image_3@2x.png (220x80)

But what happens when I want to use these images on the iPhone 6?

Now this should use the same images, right, since the iPhone 6 still uses @2x?

• image_1@2x.png (220x80) -> (258x94)

But then the (220x80) needs to become (258x94) which will stretch the image. So what's the point of having @1x, @2x, and @3x iPhone images when I'm going to need @1x, @2x, @iPhone62x, and @iPhone6Plus3x?

Answer 1

Yeah, that's a bit confusing at a first glance.

The point of having @2x both for iPhone 4/4s/5/5s and iPhone 6 is the equality of DPI of those screens (326 ppi).

On the other hand, your need of having different images for these iPhones is specific for your app design and you have the following solutions:

• Use stretchable image created with -resizableImageWithCapInsets: and make image looking good both for 110pt and 129pt
• Or if it's impossible use different images depending on the device app is running on. You can use your method +getDevice (or similar) to determine what image you should load ( -568h@2x or -667h@2x ).

For more info and handy UIImage category see this answer https://stackoverflow.com/a/26684508/753878