title: Dynamically size Table View Cells using Auto Layout constraints
body: <h3>Update</h3>
  
  <p>I have revised the question completely after my latest findings.</p>
  
  <h3>Goal</h3>
  
  <p>My goal is to implement the following effect:</p>
  
  <ol>
  <li>There is a simple table view</li>
  <li>The user selects a row</li>
  <li>The selected row expands, revealing another label below the original one</li>
  </ol>
  
  <p>Please note that I am aware, that this can be achieved by inserting/deleting cells below the selected one, <a href="https://github.com/jozsef-vesza/TableViewExpansions.git" rel="noreferrer">I already have a successful implementation using that method</a>. </p>
  
  <p>This time, I want to try to achieve this using Auto Layout constraints.</p>
  
  <h3>Current status</h3>
  
  <p>I have a <a href="https://github.com/jozsef-vesza/ExpandableTableView.git" rel="noreferrer">sample project available for anyone to check</a>, and also <a href="https://github.com/jozsef-vesza/ExpandableTableView/issues/1" rel="noreferrer">opened an issue</a>. To summarize, here's what I've tried so far:</p>
  
  <p>I have the following views as actors here:</p>
  
  <ul>
  <li>The cell's content view</li>
  <li>A top view, containing the main label ("main view")</li>
  <li>A bottom view, below the main view, containing the initially hidden label ("detail view")</li>
  </ul>
  
  <p>I have set up Auto Layout constraints within my cell the following way (please note that this is strictly pseudo-language):</p>
  
  <ul>
  <li>mainView.top = contentView.top</li>
  <li>mainView.leading = contentView.leading</li>
  <li>mainView.trailing = contentView.trailing</li>
  <li>mainView.bottom = detailView.top</li>
  <li>detailView.leading = contentView.leading</li>
  <li>detailView.trailing = contentView.trailing</li>
  <li>detailView.bottom = contentView.bottom</li>
  <li>detailView.height = 0</li>
  </ul>
  
  <p>I have a custom <code>UITableViewCell</code> subclass, with multiple outlets, but the most important here is an outlet for the height constraint mentioned previously: the idea here is to set its <code>constant</code> to 0 by default, but when the cell is selected, set it to 44, so it becomes visible:</p>
  
  <pre><code>override func setSelected(selected: Bool, animated: Bool) {
      super.setSelected(selected, animated: animated)
      detailViewHeightConstraint.constant = selected ? detailViewDefaultHeight : 0
      UIView.animateWithDuration(0.3) {
          self.layoutIfNeeded()
      }
  }
  </code></pre>
  
  <p>I have the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/tJrhG.gif" alt="Current status"></p>
  
  <p>So the effect is working, but not exactly how I originally imagined. Instead of pushing the main view up, I want the cell's height to <strong>grow</strong> when the detail view is shown, and <strong>shrink back</strong> when it's hidden. </p>
  
  <p>I have examined my layout hierarchy during runtime:</p>
  
  <ul>
  <li>The initial state is OK. The height of the content view is equal to the height of my main view (in this case, it's 125 points).</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/SEToF.png" alt="Screenshot initial"></p>
  
  <ul>
  <li>When the cell is selected, the height constraint of the detail view is increased to 44 points and the two views are properly stacked vertically.But instead of the cell's content view extending, but instead, the main view shrinks.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/BXWCA.png" alt="Screenshot detailed"></p>
  
  <h3>Question</h3>
  
  <p>What I need is the following: the height of table view cell's content view should be equal to</p>
  
  <ul>
  <li>the height of the main view, when the detail view's height constraint is 0 (currently this works)</li>
  <li>main view height + detail view height when the detail view's height constraint is set properly (this does not work).</li>
  </ul>
  
  <p>How do I have to set my constraints to achieve that?</p>