UIButton images for iPad

Question

I need bigger button & image sizes for iPad devices compared to iPhone. Before Size classes, I used to have images ending as @2x~ipad to have different version for iPad. However, it is not clear if the same approach is applicable when using Size classes and Trait collections, or there is a better approach? Also, is iPad Pro 12.9 inch @3x or @2x? I see conflicting responses, but if it is @2x, how do we have bigger image size for iPad Pro?

Answer 1

You are confusing Size with Resolution.

If you have a UIImageView at 150 x 150 points, and you have MyPic.png + MyPic@2x.png + MyPic@3x.png, the image view's frame will always be 150 x 150 points, but UIKit will automatically select the proper resolution image for the device. See https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

If you want different size frames for your buttons and images, based on device / view size, use Trait Variations, or code, or percentage-based constraints.

Again, if you have MyPic.png + MyPic@2x.png + MyPic@3x.png files of the same image, the appropriate resolution image will be used, regardless of frame size.

There is a lot of flexibility when working with images by using Asset Catalogs. For example:

You can add different resolution images for 1x 2x and 3x... you can add image sets specific to iPhone / iPad / etc.

---

EDIT

Additional example. Asset is named "RoundSwift256x256". I have 3 resolutions for iPhone, 2 resolutions for iPad (no iPads use @3x) - using different colors to make it very obvious.

In Storyboard, I added an imageView, set its image to RoundSwift256x256. then set the Assistant Editor to Preview and selected iPhone 8 and iPad Pro 9.7". As you see, it uses my iPhone image for iPhone, and my iPad image for iPad.