What is the difference between 1x vs r4 or 2x vs r4 or 3x vs r4

前端 未结 1 1258
无人及你
无人及你 2021-01-20 03:13

If 1x image is 100*100 then

2x image is 200 * 200

3x image is 300 * 300

what is r4 dimension should be xxx * xxx

There is no docume

相关标签:
1条回答
  • 2021-01-20 03:33

    The answer isn't that straight forward.
    The important thing to remember is that different iPhone models would automatically use different images from the imageset. The resolution of iPhone-A is not always a simple multiplication of iPhone-B, so the size of image-A can't always be a simple multiplication of image-B.

    Here is a table showing the image automatically selected from x.imageset for each iPhone:
             iPhone Model | ScreenSize | Ratio | x.ImageSet
             -------------|------------|-------|----------------
                XS Max    | 1242-2688  | 0.46  | 3x
                X,XS      | 1125-2436  | 0.46  | 3x
                XR        |  828-1792  | 0.46  | 2x
                6,6s,7,8+ | 1242-2208  | 0.56  | 3x
                6,6s,7,8  |  750-1334  | 0.66  | 2x 
                5,5s      |  640-1136  | 0.56  | R4
    

    As the table shows the same image is selected for multiple screen sizes and multiple aspect ratios, that can lead to a bit of a mess...
    Thats where the Content Mode property of the view showing the image comes in handy. It decides how the image will stretch inside its boundaries (LaunchScreen image boundaries are the screen size, Back button boundaries are the ImageView size).

    If the Content Mode = Aspect Fill
    Then the selected image from the imageset will resize its width to be exactly as the boundary width and the height will also change to maintain the original image aspect ratio - its top and bottom edges will be hidden because they exceeded the boundary or will not reach the boundary at all.

    Other Content Modes will have other effects on the image. Take a look: Understanding How Images Are Scaled

    0 讨论(0)
提交回复
热议问题