Search code examples
iosiphoneswiftxcode7xcasset

Set images for different iphones and debug

I am currently developing an ios app and the scope is limited to iPhones only and portrait mode only.

In each screen there are images, buttons, labels and textFields. The question here is, how do I render appropriate image for device from the Images.xcassets?

What I am doing now, written below -

  1. From Sketch design application, exporting my images for 1x, 2x and 3x (Screens designed by a UI designer)

  2. Adding them to Xcode project (drag and drop from finder to xcode)

  3. Add new image set in Images.xcassets (naming it as "MyImages") and drag drop my images for 1x, 2x, 3x.

  4. In the storyboard, on a viewcontroller, adding an ImageView

  5. For the image view, selecting Image as "MyImages" from Attribute Inspector.

Once the above steps are complete, when I test the app on simulators starting from iphone4s, iphone5, iphone5s, iphone6 and so on.. (all the simulators available on Xcode 7.3), I don't see the appropriate image is being rendered.

Is my approach correct?

Also, how do I debug a UI element on the screens? Like, how/where do I check for what image is rendered? Its size (W X H)?

Added Screenshot

enter image description here

Solution

  • @Lohith Korupolu:

    The screen shot you provided is for universal size (iPhone/iPad). From the additional information provided in comments, this would lead to issues with AutoLayout constraints that would stop the image showing on screens of a smaller size than that shown in your StoryBoard.

    E.g. I have replicated your issue on storyboard...

    enter image description here

    This results in the following in Simulator for iPhone 4s....

    enter image description here

    i.e. Text is there but NO IMAGE.

    REASON: The autoLayout Constraints set for the larger "Universal" Screen on any of two opposite sides would make the image invisible/ disappear when viewed on a smaller screen.

    SOLUTION:

    1. Clear the Autolayout constraints for this selected Image in Storyboard. See next picture... enter image description here

    2. Add AutoLayout constraints as below x2 pictures. (Top constraint, Height + Width) (horizontally in container). Remembering to tick "Items of new constraints" for both.

    enter image description here enter image description here

    3. Run Simulator for iPhone 4s... E.g.

    enter image description here

    ** The same situation is occuring with the other iPhone size simulator Runs. **

    ****** All Working ******