9

From what I understand as explained in the answer to this question you can resize which ever component on the storyboard for any device that you want, well that right there is the where the problem occurs.. I have an image which the regular resolution of it is : 353x229 and this image looks huge on the iPhone 4s screen so I want to resize it to 300x194 only on the 4s screen and this is how I do it :

First I click on the Vary for Traits button, then I click on the image and then click on the "Show the Size inspector" on the right side and from there I change the "Width Equals" to 300 and "Height Equals" to 194 and then I click on "Done Varying".

But the problem is the image is resized for every single device ! Even the iPad ! I don't understand why this is happening and how am I supposed to stop this from happening?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Lawa Fazil
  • 161
  • 1
  • 14
  • Traits apply to size classes, not specific devices. In Xcode you can ask the system to show what your scene will look like on a specific device to see how your constraints are working. For something like an image you would normally constrain the imageview to the edges and then set the content mode according to whether avoiding cropping or maintaining aspect ratio is the important thing – Paulw11 Oct 18 '16 at 21:35
  • So how would I make an image appear smaller on smaller devices such as iPhone 4? – Lawa Fazil Oct 18 '16 at 23:32
  • 1
    Set constraints on the image view to limit its size and set the content mode of the image view to something like "scale to fit" or "scale to fill". Also make sure you set `clipsToBounds` to true – Paulw11 Oct 18 '16 at 23:50
  • The above comment might be a good advice, but it doesn't explain the problem with the variation in traits. I have a similar problem that the change done while varying the traits, is applied to all size classes and not only to the expected trait. – Leontien Nov 04 '16 at 16:51
  • Yes, exactly the comment only helps if you want the same picture to be the same size for all devices (which does not really help that much since screen sizes are really different) and I still have not found the solution for it, so I decided to leave the smaller devices behind .. – Lawa Fazil Nov 08 '16 at 13:32

2 Answers2

15

Perhaps by now you have figured it out. But in case others have a similar problem, here's my 2 cents:

I was facing a like problem: a label needed to have a different height for iPhones and iPads. But every time I changed the height of the label on the iPad using vary for traits, it also changed the height on the iPhone.

Here's what I did to fix it:

  1. Select the object (in my case, a label)
  2. In the Size Inspector, double click the constraint you want to change for a different device
  3. Click on the + sign next to Constant.
  4. Select the appropriate traits (in my case, regular height+width for iPad) and add the variation.
  5. Now, underneath the Constant dropdown menu, you will now see your different layout for the corresponding device.
  6. You can now change the size of the respective constraint.

Please note that you have to do this for each constraint you need to change. I realise that it should also work by selecting the desired device and click Vary for Traits. But I think it's buggy and so this is an alternative way of accomplishing the same thing.

  • Can't find the plus sign. Was it removed from newer XCode versions? – Apollo Jun 25 '19 at 20:16
  • Ditto to @Apollo, has this been removed in later versions? – tim.baker Apr 16 '20 at 17:51
  • The plus sign is still there: you have to 1) double click the constraint of an object, e.g. a label, and 2) click on the plus sign just next to the property 'Constant'. I'm using Xcode 11.4.1 (11E503a). –  Apr 17 '20 at 04:55
0

When you select vary for traits check the box for width while iphone4 selected. All devices in blue box will be effected if any constraint is inserted then. iphone4s screen width is compact in portrait mode and ipad's is regular. While changing the size dont do it by size inspector rather add constraint of position, height and width. So after this you need to go back in ipad's mode and select vary for traits and width checkbox, then click somewhere else. Here you will modify the position, height and width in constraints that can be found in size inspector by clicking edit.

papaCook
  • 56
  • 7