Databases
StackOverflow2013
Postsdbo
POCenter two views vertically using NSLayoutConstraint
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter two views vertically using NSLayoutConstraint
    text
    copied!<p>Imagine this following scenario. You have a UIImageView and a UIButton. The first is 300x360, the second is 210x70. The <code>imageview</code> contains a catalog image, the <code>button</code> says "open catalog".</p> <p>I would like to position elements in the main view according to these requirements:</p> <ul> <li><p>the two elements should be centered horizontally, namely the center.x coordinates should be all equal (view, image and button);</p></li> <li><p>the two elements should be centered vertically in the following way: separator (flexible) - imageview - separator (fixed, let's say 30 pts) - button - separator (flexible). The topmost and bottommost separator should have the same size (this is the meaning of centered).</p></li> </ul> <p>I cannot make this to work using NSLayoutConstraint.</p> <p>So far, what I did, has been centering the X coordinate of the two elements using <code>NSLayoutAttributeCenterX</code> and <code>NSLayoutRelationEqual</code> to the same <code>view</code> attribute.</p> <p>The last part, according to my idea, is to fix their vertical alignment. I tried using <code>@"V:|-[imageview(360)]-[button(70)]-|"</code> but it won't work (<code>Unable to simultaneously satisfy constraints.</code>).</p> <p>If I use <code>@"V:|-[imageview(360)]-[button]-|"</code> I get everything partially ok. Namely, the top part is perfect but the button is stretched so to fill the gap between the internal separator and the bottom of the view.</p> <p>How can I make those elements to be fixed-sized and to let Auto-layout to just figure out how to place them in the view?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload