Screen size issue on iPhone 6 plus

Question

I have the following implementation for a custom header view in a table view :

// Create Label
let label = UILabel(frame:CGRectMake(32,8,100,36))
label.text = title

// Create top dark grey rectangle
let headerImageView = UIImageView(frame: CGRectMake(17, 8, 130, 36))
headerImageView.image = UIImage(named: "Section Header")

// Create top rounded corner view with 16px margins
let width = UIScreen.mainScreen().bounds.size.width
let sectionTopImageView = UIImageView(frame: CGRectMake(16, 44, width-32, 4))
sectionTopImageView.image = UIImage(named: "Header Rounded Corners")

// Wrap it up
let headerView = UIView(frame:CGRectMake(0,0, width, 48))
headerView.backgroundColor = UIColor.clearColor()
headerView.addSubview(headerImageView)
headerView.addSubview(sectionTopImageView)
headerView.addSubview(label)

return headerView

So basically I want to have a header that has 16px margin on both sides. In Storyboard I have a cell with a background UIImageView . This image view has auto layout constraints so that I get my 16 margins px there too.

Everything should be aligned but when I run simulator or real iPhone, I get this for iPhone 6 and smaller screen size :

But for iPhone 6 Plus, everything is perfectly aligned :

Any idea why ?

EDIT

I add here the code for the background image of the cell. For subclassing reason I removed the create of this background from storyboard to code. Here is what I came up with :

override func awakeFromNib() {
    super.awakeFromNib()
    selectionStyle = .None
    let width = UIScreen.mainScreen().bounds.width
    let height = self.contentView.bounds.size.height

    backgroundImageView = UIImageView(frame: CGRectMake(16, 0, width - 32, height+1))
    backgroundImageView.image = UIImage(named: "Cell Background")

    self.insertSubview(backgroundImageView, atIndex: 0)
}

I have the same issue with this code as previously. But whereas this line from @robmayoff solved it :

sectionTopImageView.autoresizingMask = [.FlexibleWidth]

The same line here :

backgroundImageView.autoresizingMask = [.FlexibleWidth]

Causes this weird behavior :

Answer 1

I can't accurately measure the sizes of things in your screen shots because they appear to have been resized. That makes it harder to help you.

Nevertheless, I think you may have better results if you set the autoresizing mask on your subview before adding it to the header view:

sectionTopImageView.autoresizingMask = [ .FlexibleWidth, .FlexibleTopMargin ]

UPDATE

In awakeFromNib , self has whatever size it had in the storyboard or xib. It hasn't yet been resized for the device screen or the table view or whatever.

You're sizing backgroundImageView based on the device screen size, which (at that point) has nothing to do with self.bounds.size .

If you think backgroundImageView.bounds.size.width should be 32 points less than self.bounds.size.width , then set it that way:

backgroundImageView = UIImageView(frame: CGRectMake(16, 0, bounds.size.width - 32, height+1))
backgroundImageView.autoresizingMask = [.FlexibleWidth]