[iOS/Swift] Usage of ‘ImageView’ for various apple device

In this post, how to make the image, the developer wants to show trough ‘ImageView’, appear in the same ratio on various apple devices.

In the present time, the screen types of the apple device in XCode are shown in this figure.

How to?

The figure below shows the result that has already been processed. For detailed instructions, follow the steps below.

  1. Add the ‘ImageView’ object to your storyboard.

2. Add the constraints that you want. In this post, I added two constraints ‘Center Horizontally in Safe Area’ and ‘Center Vertically in Safe Area’ as follows.

3. Adjust the layout of the ‘ImageView’ object. In my case, I want to resize the ‘image’ automatically for each device. If you want to resize the margin automatically, you may activate the arrow of the margin where you want.

4. Finish! The final process is confirming it works as you intended via several physical or virtual devices.

The result is shown with the virtual ‘iPhone SE (2nd generation)’, ‘iPhone 11 Pro’, and ‘iPad Pro (11-inch)’.