iOS, layout position depending on screen size issue

Question

I am trying to optimize how the app looks for different screen sizes and whatever I do, somehow, in the .xib I am not able to prevent some layout misplacements from happening when I switch from 6splus->6s->5 iPhone simulators. I am trying to fix the space from my labels to image view (which serves as a background) and then scale the fonts depending on the device. Although I set up constraints, they are somehow messed up and not enforced from one screen size to another.

6splus looks like this:

Here you can see that the positioning is completely wrong from the right side even though right spacing is set up in the .xib

Then, going to 6s:

Looks relatively fine (since I optimized it for 6s initially)

Notice how it shifted from right to left. I definitely want to prevent it from happening.

Then, iPhone 5:

Completely shifted to left. Also somehow spacing between the red color day of the week and day number increased. This is the second thing I really-really want to avoid from happening. Third thing is the label on the left bottom: it is shifting a bit, and I will need to place two more labels there, so it is very crucial to avoid it shifting too.

Here is the screenshot of my .xib with constraints:

The .xib is the customizable UITableViewCell that I am using in UITableView .

The following images show the constraints by label:

UIImageView (Background) constraints:

Any suggestions would be greatly appreciated.

Answer 1

So, what I end up doing is creating 4 outlets for 4 different constraints:

1. @property (weak, nonatomic) IBOutlet NSLayoutConstraint *eventNameBottomMargin;
2. @property (weak, nonatomic) IBOutlet NSLayoutConstraint *eventNameLeftMargin;
3. @property (weak, nonatomic) IBOutlet NSLayoutConstraint *bottomMarginConstraint;
4. @property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightMarginConstraint;

Constraints 1,2 are for the UILabel at the bottom left; constraints 3,4 are for the UILabels at the right: using Tj3n 's advice I put them in a UIView , so then 3,4 are constraints of the UIView in relation to the background UIImageView .

Then I changed the values of the constraints in the code depending on the device width:

- (void)awakeFromNib
{
[super awakeFromNib];
CGRect screenRect = [[UIScreen mainScreen] bounds];
NSNumber *screenWidth = @(screenRect.size.width);
[self setFontsOnDeviceWithScreenWidth:screenWidth];

int rightMargin = 15;
int bottomMargin = -105;
int nameLeftMargin = 55;
int nameBottomMargin = -33;

if (screenWidth.intValue == 320) {
    // iPhone 5 screenWidth = "320"
    rightMargin = 5;
    bottomMargin = -105;
    nameLeftMargin = 50;
    nameBottomMargin = -36;
} else if(screenWidth.intValue == 375) {
    // iPhone 6s
    rightMargin = 15;
    bottomMargin = -105;
    nameLeftMargin = 80;
    nameBottomMargin = -30;
} else if(screenWidth.intValue == 414) {
    // iPhone 6s Plus
    rightMargin = 35;
    bottomMargin = -108;
    nameLeftMargin = 100;
    nameBottomMargin = -30;
}
self.rightMarginConstraint.constant = rightMargin;
self.bottomMarginConstraint.constant = bottomMargin;
self.eventNameLeftMargin.constant = nameLeftMargin;
self.eventNameBottomMargin.constant = nameBottomMargin;
}

I do not think it is the best solution for the problem, but it is working perfectly. There should be a way to just specify constraints and then resizing would go automatically, so if someone knows, please, share further thoughts.