1

I have the following components:

enter image description here

What I would like to do is have the same sizes for the leading and trailing constraints of my view on the right, whatever the size of the screen is.

I though about adding two views as placeholders. The first one starting on the left edge of the main view and finishing on the middle of the big orange square. And for the second one, starting on the middle of the big orange square and finishing on the right edge of the main view. Then both small orange squares would be centrally align inside.

But I was wondering if there was a better way whether it's by code or with the Interface Builder.

Nico
  • 6,269
  • 9
  • 45
  • 85
  • 1
    You could use a horizontal stackview, otherwise I would use two filler views with equal width constraints. – Paulw11 Mar 23 '17 at 21:05
  • A stackview in my case won't really fit as the big orange square is not clipped to bounds. So having the trailing and leading constraints equal is not possible then? – Nico Mar 23 '17 at 21:16
  • Big Orange is *not* clipped to bounds? But, if I understand what you're trying to do, you want to have the spacing take into account the overflow? So the center view might be 40x40, but the Big Orange square could be 100x100? And, do you want the spacing on both right and left, or just on the right? – DonMag Mar 23 '17 at 23:40
  • @Paulw11 - You can't really use stack view, because that only centers/spaces things within the arranged views, but not the edge of the stack view. (It's a real limitation of stack views, IMHO.) You technically can use stack view, but you have to add an additional zero-width view to the end (and presumably the start, if he wants that spaced nicely) of the stack view's arranged view. But it's rapidly approaching the ugliness of the hidden filler/spacer views we used before stack views were introduced. – Rob Mar 24 '17 at 00:06
  • @Rob, yes, that comment was before I full understood what they were asking. – Paulw11 Mar 24 '17 at 00:07
  • Nico, if laying this out programmatically, we could use `UILayoutGuide` (it's like a hidden view, but with even less overhead), but we can't do it in IB, infuriatingly enough. If doing this in IB, you need to use hidden spacer/filler views, or additional zero width views in stack view. See http://stackoverflow.com/a/19331378/1271826. – Rob Mar 24 '17 at 00:15
  • 1
    @Rob `constraints are defined using the attributes of views, but cannot not be defined in relation to other constraints` is actually what I needed to know. Thanks for the link. I solved my problem by adding the two views of same width at each side of the big rectangle and the placing the small ones respectively in the centre of each view. – Nico Mar 24 '17 at 00:45

2 Answers2

0

I think you can reach this by setting the priority to the constraint between the big orange and the view on left to Heigh or low

And required priority to leading and trading to the view on the right.

Ayman Karram
  • 116
  • 4
0

Maybe I'm missing something, but why not simply:

enter image description here

  • Pin Blue Leading to BigOrange Trailing
  • Pin Blue Trailing to SuperView
  • Center LittleOrange inside Blue...

And turn Blue transparent at runtime.

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • That's what I was talking about but was wondering if there was just a better way (cleaner) to do it :) – Nico Mar 24 '17 at 00:59