title: UITableViewCell with complex layout, variable row height and autolayout
body: <p>I'm working on an iPad app which is handling portrait and landscape orientations.
  I've a tableview displaying cells with a complex (?) layout and which can have differents height.</p>
  
  <p>Here's a screenshot of what it should look like in portrait (= 768 pts witdh, which should result in a 435 pts height)
  <img src="https://i.imgur.com/5Ekj1kL.png" alt="Portrait simulation"></p>
  
  <p>Here's a screenshot of what it should look like in landscape (= 1024 pts width, which should result in a 526 pts height)
  <img src="https://i.imgur.com/cI9rK75.png" alt="Landscape simulation"></p>
  
  <p>To simplify a little bit the layout we'll keep only the first image.</p>
  
  <h2>Layout</h2>
  
  <p>I've 1 image which should keep its ratio while growing/decreasing on device rotation:
       in portrait = 256 width * 342 height
       in landscape = 341,333 width * 456 height
  And I've the yellow view (which should has a margin of 8 pts and a padding of 16 pts in each directions) containing a title (in blue) and a potential multiline text content (in pink).
  Notes:
       - the pink label could be totally empty.
       - the yellow view will be textured that's why it's needed, it's not just an extra view to workaround something.</p>
  
  <h2>Content View (child of UITableViewCell) Constraints</h2>
  
  <pre><code>V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)&gt;",   // Top margin (0 pts) of the image
  H:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)&gt;",   // Left margin (0 pts) of the image
  V:[UIImageView]-(8)-[UIView]&gt;",     // Vertical space (8 pts) between the image and the yellow view (i.e. top margin of the yellow view)
  H:|-(8)-[UIView]   (Names: '|':UITableViewCellContentView)&gt;",   // Left margin (8 pts) of the yellow view
  H:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)&gt;",   // Right margin (8 pts) of the yellow view
  V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)&gt;",   // Bottom margin (8 pts) of the yellow view
  </code></pre>
  
  <h2>Yellow View Constraints</h2>
  
  <pre><code>V:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )&gt;",   // Top margin (16 pts) of the blue label (i.e. top padding of the yellow view)
  H:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )&gt;",   // Left margin (16 pts) of the blue label
  V:[UILabel:Blue]-(&gt;=16)-|   (Names: '|':Yellow View )&gt;",   // Bottom margin (&gt;= 16 pts) of the blue label
  H:[UILabel:Blue]-(NSSpace(8))-[UILabel:Pink]&gt;",   // Horizontal space between blue and pink labels
  V:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )&gt;",   // Top margin (16 pts) of the pink label
  H:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )&gt;",   // Right margin (16 pts) of the pink label
  V:|-(16)-[UILabel:Pink]   (Names: '|':Yellow View )&gt;",   // Bottom margin (16 pts) of the pink label
  </code></pre>
  
  <h2>Constraints notes</h2>
  
  <ul>
  <li>In Interface Builder I've setup a place holder intrinsic size of 256 width * 342 height for the image (We'll see later that I set real size constraints in code dynamically depending on device orientation)</li>
  <li>The blue label has an horizontal content compression priorrity of 751</li>
  <li>The image has a vertical hugging priority of 1</li>
  <li>The yellow view and the pink label a vertical hugging priority of 1000</li>
  </ul>
  
  <h2>Interface Builder Tests</h2>
  
  <p>If I increase the cell height, the image is deformed and it's height increase while the yellow view stick on the bottom whitout being deformed. So everything is ok (since we can't setup proportional constraints in IB to mimic the keeping ratio growing of the image).</p>
  
  <h2>Code</h2>
  
  <p><a href="https://github.com/jfradj/AutoLayoutIssue" rel="nofollow noreferrer">available on GitHub</a></p>
  
  <h2>Results</h2>
  
  <p>If I launch the app in portrait, the cells are perfect. The pink label is displayed on 2 lines, each sizes and spacing are fully respected/calculated!
  If then I rotate to landscape, the image doesn't grow and instead it's the yellow view and the pink label which are growing... Here's a screenshot:
  <img src="https://i.stack.imgur.com/7bsl3.png" alt="Landscape version when rotating from portrait"></p>
  
  <p>Now If I launch the app in landscape, the cells are perfect too. The image is well sized (351 pts width (rounded value) * 456 pts heigth), etc...
  If then I rotate to portrait it makes the app to crash... With the following output:</p>
  
  <pre><code>Unable to simultaneously satisfy constraints.
       Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
  (
      "&lt;NSLayoutConstraint:0xa3d9dd0 V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView )&gt;",
      "&lt;NSLayoutConstraint:0xa3d9e00 V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView )&gt;",
      "&lt;NSLayoutConstraint:0xa3d9e60 V:[UIImageView]-(8)-[UIView]&gt;",
      "&lt;NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]&gt;",
      "&lt;NSAutoresizingMaskLayoutConstraint:0xa3de670 h=--&amp; v=--&amp; V:[UITableViewCellContentView(431)]&gt;"
  )
  
  Will attempt to recover by breaking constraint 
  &lt;NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]&gt;
  </code></pre>
  
  <p>Note: UIView is the yellow view</p>
  
  <p>Thanks a lot for your help (or a least reading ;-)</p>
  
  <p><em>PS: I've post the same question on dev forums yesterday and will post any progress here.</em>
  <a href="https://devforums.apple.com/message/911019" rel="nofollow noreferrer">DevForum discussion link</a></p>