How to ensure that xib file display correctly on all devices?

Question

I am using Xcode 7, for iOS 9. I would like to at least make sure that it displays correctly on iphones, as initially I am developing the app for iphone.

Currently it all looks fine for the iphone 6S, but for Iphone 5s it looks horrendously bad.

I have included image views for the respective phones (3x,2x and 1x)

below are some images of the problem: This is the Xib file, and how it 'should' look on all devices (lets just say Iphones)

This is how it ends up looking on an iphone 5s simulator:

This happens for quite a few of my views. Sorry - I know this is quite noobish, would appreciate the guidance though.

Answer 1

There is an Option for preview in Xcode. In which you can add different device and check out According to device.

Edit :- You can do it in .XIB as well as in Storyboard for selected viewcontroller.

In below image i done it in XIB. (UITableview Cell)

Below steps as per the Apple's Document.

PreviewingLayouts.

Step to Go:-

Open a storyboard or xib file in Interface Builder.

Choose View > Assistant Editor > Show Assistant Editor.

The implementation file that corresponds to the storyboard or xib file opens in the assistant editor.

Open the Assistant pop-up menu.

The Assistant pop-up menu is the first item to the right of the back and forward arrows in the assistant editor jump bar.

In the pop-up menu, scroll to the Preview item and choose the storyboard or xib file.

A preview of the layout appears in the assistant editor. (For Mac apps, if a preview doesn't appear, select a view in the icon or outline view.)

Choose preview options.

To preview your layout in a different localization, select a language from the pop-up menu in the lower-right corner of the preview.

Add device according to your required layout.

Note:- You can add multiple device in same window.

For more detail Check

Answer 2

Use Auto Layout

From Apple documentation :

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views ... This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.

Getting Started

You can start by quickly skimming through the documentation link. But something that helped me understand Auto Layout quickly is the excellent iOS Stanford Lecture on that. Watch as he goes through the example, and that will help you ramp up.