iosxcodeinterface-builderxcasset

Same image slicing displays very different on 8 and 8 PLUS

Here's the Sample Project

Problem

I want to make an image to have a fixed top half part and a stretched bottom half part which to make it properly resized in any height.

And I use image slicing in Assets.xcassets to achieve that. The image can be resized properly, however, it displays slightly different in different sizes.

The Original Image

Screenshot 1

Image Slicing

Just simply slice the image from the vertical center.

Screenshot 2 Screenshot 3

Storyboard

Content Mode is set to Scale to Fill

Height constraint is equal to its width constraint multiplied by 0.8

Screenshot 4 Screenshot 5

Result

I think it should display nearly the same images in different devices. Because everything is the same except for the image assets(2x, 3x).

However, the result is not what I expect. The image seems a bit squashed on iPhone 8 PLUS.

Screenshot 6

At Last

I'm using Mojave with Xcode 10.1 (10B61).

Anyone knows what is the cause. And how to make the image vertically stretched properly?

Solution

  • The reason it looks "squashed" is because the image is being stretched horizontally.

    Your slicing allows the top portion to remain a constant height, but not a constant (or proportional) width.

    Here, I use your original image without any slicing... each image view is the same height (201-pts), so you know it's not scaling vertically, but different widths so you can see the result of horizontal stretching:

    enter image description here

    What you may want to try is clipping your original image to only the top portion. Setup the constraints on that image view to stay proportional, and then use a solid color image view (or just a UIView with matching background color), as the lower "vertical stretch" section.