IOS UITableViewCell horizontally scrolls auto-layout subtitles

Question

I am trying to create a tabular view that contains maps that scroll horizontally. I created a simple demo application and was successful in implementing a version that uses Auto Layout ... to a certain extent. There remains one (I think, final) question. Vertical card calibration is audible.

TableView:

class MultiCardTableViewController: UITableViewController { override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 12 } override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier("CardCell", forIndexPath: indexPath) as CardCell //since these cells are re-used, we have to clear out the previous dynamic subviews for subView in cell.scrollContentView.subviews { subView.removeFromSuperview() } var card = NSBundle.mainBundle().loadNibNamed("CardView", owner: self, options: nil)[0] as CardView //Turn this off because subviews of UIScrollView use autoresizing mask by default, which conflict with Auto-Layout constraints card.setTranslatesAutoresizingMaskIntoConstraints(false) cell.scrollContentView.addSubview(card) var card2 = NSBundle.mainBundle().loadNibNamed("CardView", owner: self, options: nil)[0] as CardView //Turn this off because subviews of UIScrollView use autoresizing mask by default, which conflict with Auto-Layout constraints card2.setTranslatesAutoresizingMaskIntoConstraints(false) cell.scrollContentView.addSubview(card2) //Add bottom margin to the last cell (for consistency) //Add vertical constraints (standard margins) for each card var constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card]|", options: nil, metrics: nil, views: ["card": card]) constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2]) //Add horizontal constraints that tie the cards together, and to the super view constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:|-[card]-(16)-[card2]-|", options: nil, metrics: nil, views: ["card": card, "card2": card2]) //Add horizontal constraint that disambiguates individual card width constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:[card(==card2)]", options: nil, metrics: nil, views: ["card": card, "card2": card2]) cell.scrollContentView.addConstraints(constraints) //Set the scrollview content horizontal size constraint to double the window width (1 window width for each card cell.contentWidthConstraint.constant = self.tableView.frame.width * 2 return cell } } 

Cell:

 class CardCell: UITableViewCell { @IBOutlet weak var scrollView: UIScrollView! //A content view directly inside of the scroll view, constrained to super view on all sides, as well as height & width @IBOutlet weak var scrollContentView: UIView! //A reference to the width constraint for the scrollContentView @IBOutlet weak var contentWidthConstraint: NSLayoutConstraint! } 

CardView.xib:

Result:

The horizontal spacing and size are correct, but it seems that the vertical limits are insufficient or incorrect. It’s hard for me to believe, because they are so simple. Each card has a vertical limit: V:|-[card]|

I tried to add an explicit height limit on the cards, similar to the width, but this also does not give the correct results: V:[card(==card2)]

Result of explicit vertical height restriction:

All day I waved my brain ... What am I missing?

Edit: Added github source link for sample project

Answer 1

Fortunately, the problem was a small typo in my code example above:

 constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2]) 

Overwrites the previous array of constraints and should instead be added to it:

 constraints += NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2]) 

Answer 2

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

 var tableviwe:UITableView? override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. self.tableviwe = UITableView(frame: self.view!.bounds) self.tableviwe!.delegate = self self.tableviwe!.dataSource = self; self.tableviwe?.backgroundColor = UIColor.redColor() let angle:CGFloat = CGFloat(M_PI_2);//double angle; self.tableviwe?.transform = CGAffineTransformMakeRotation(angle) self.view?.addSubview(self.tableviwe!) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } //UITableViewDelegate func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { let alert = UIAlertView() alert.title = "Alert" alert.message = NSString(format: "%@ %d", "My hit ", indexPath.row) alert.addButtonWithTitle("Ok") alert.show() } //UITableViewDataSource func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 1000 } func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat{ return 200.0 } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "channel") cell.textLabel?.text = NSString(format: "%@ %d", "hello my friend", indexPath.row) let angle:CGFloat = CGFloat(M_PI_2);// double angle; cell.contentView.transform = CGAffineTransformMakeRotation(-angle) return cell }