Create stretch header using autolayout via storyboard

Question

Problem

Hi, I've faced with the following problem. I am creating header consists from three block via storyboard. I am trying to make it stretch to fit all devices using autolayout. I have three images:

Left corner image (has round left border)
Centre image (is just a line)
Right corner image (has round right border)

Example of right image corner:

I want these three images to be one line in a centre. The result should looks like this:

First solution

I've created following constraints: for the left block:

Width = 152
Height = 50
Leading to superview
Top to superview

Left image constraints:

for the middle block:

Height = 50
Trailing to left image = 0
Leading to right image = 0
Top to superview

Middle image constraints:

for the right image:

Width = 152
Height = 50
Trailing to superview
Top to superview

Right image constraints:

When I run my app on a simulator everything works properly and I see good result on all devices but I if I use this constraints I got a lot of warnings in the storyboard and also in console: Unable to simultaneously satisfy constraints.

Actually warning in console appears because of this

Trailing to left image equal to 0

Leading to right image equal to 0

Second solution

I've also tried to make following constraints for the middle image:

delete trailing constraint to left image
add leading constraint to the superview equal to width of right image

But this solution creates even more warnings

Question

Is there a solution how to create such header through the storyboard and not to make width as a constant and update it for every screen width?

Did you mix up the trailing and leading constraints for the middle image? — Code
@Code no, if leading will be to the left then the middle image will start from the same place as left and the end of the middle image will be at the same place with the right image — Danny
I mean leading of middle = trailing of left, etc. Can you post an image of your constraints? — Code

Volodymyr Volodymyr · Accepted Answer · 2016-06-23T18:00:51

So what you need all constraints that you wrote, but as well you need to add constraints that says that all this three images has the same width. For example tell that first has same as second and second has same as third. And as well you need to remove width constraints.

Reason of such errors is that you setting two items width = 152*2 = 304. If this value is grater than screen width than you will have warnings.