Sunday, July 22, 2018

Setting Icons for your iOS app in Xcode

You have to specify different image sizes for different device models (iPhone 6, iPad mini, etc) that your app will run on. You even have to specify different image sizes for different areas such as Spotlight and Push Notification. Below is an example of how I configured the app icons in Xcode 9.2.


Steps


1). Click on Assets.xcassets file (which is created by default when you create a new Xcode project) and the Appicon section will show up. Before you set the icons, it would look something like this:

2). Drag the icon images from Finder and drop them on the dotted squares. The icon image for 2x should be 40x40 pixels (40 pixels in width and 40 pixels in height). You calculate it by multiplying 20 by 2. Then, the icon image for 3x should be 60x60 pixels. Note that the icon image should be in PNG format.

Anyway, you can create an icon image with specific size by resizing the original one in Photoshop. You open the image in Photoshop then select Image menu and Image Size... A dialog will pup up and you set the width and height to the desired ones. At last, save it as a new file.

Explanation 


The coordinate system iOS uses to place content on screen based on measurements in points, which map to pixels on display. On the standard-resolution screen, one point is equal to one pixel. The high-resolution screen has higher pixel density because one point is equal to more pixels on the same amount of physical space. For example on iPhone 3's screen, one point (occupied one inch on screen) is equal to 1 pixel. But on iPhone 6's screen, one point (also occupied one inch on screen) is equal to 2 pixels.


With pixel-to-pixel mapping, the old apps made for the older device with lower resolution display would not function correctly on the new device with higher resolution display. The images might look tiny, text might overlap each other, and scrollbar might be thin, for example. Apple came up with the point-to-pixel mapping to solve the problem by scaling up the images and everything. There are a bunch of algorithms for scaling images smoothly. The image below gives you a clue of how an image is scaled.
You create (icon) images based on the device's screens. To accomplish this, you multiply the number of pixels of each image by a specific scale factor. The standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 and 3.0 are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that is 100px x 100px for example. The @2x version of this image would be 200px x 200px. The @3x version of this image would be 300px x 300px.


The 20pt shown in the image in Step1 above means that the size of standard resolution icon image is 20px x 20px.



References
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

No comments:

Post a Comment