CODEWITHSUNDEEP
iosobjective-cswiftautolayoutuistoryboard
Danny
Danny

Reputation: 4099

Create stretch header using autolayout via storyboard

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:

Example of right image corner: right corner image

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

First solution

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

Left image constraints: Left Image

for the middle block:

Middle image constraints: Middle image

for the right image:

Right image constraints: enter image description here

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:

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?

Upvotes: 0

Views: 316

Answers (2)

Code
Code

Reputation: 6251

The middle constraints are wrong. They should be:

  • middle.leading = left.trailing
  • middle.trailing = right.leading

Upvotes: 0

Volodymyr
Volodymyr

Reputation: 1205

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.

Upvotes: 1

Related Questions