How to add constraints to a Custom UITableViewCell

Question

I have created a custom cell for my table view and it works fine except that my Image View will not align correctly.

Is there a way to add constraints to a custom cell view? Programmatically or otherwise?

This is what my cell looks like in the storyboard - which is what I was hoping to achieve at run time:

But when I demo the app this is what happens:

Here is another image from the storyboard:

View Controller /w TableView

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()


    println(questions)
    println(finalResults)

    let theWidth = view.frame.size.width
    let theHeight = view.frame.size.height

    tableView.frame = CGRectMake(0,0, theHeight, theWidth)
}

Cell View Controller

override func awakeFromNib() {

    let theWidth = UIScreen.mainScreen().bounds.width
    contentView.frame = CGRectMake(0,0, theWidth, 64)

    answerImage.center = CGPointMake(115, 15)
}

Did you tried to put some constraints within the storyboard (trailingSpace, height/width/ratio, ...) ? *By the way, if you just need to add a "✔︎" you might want to give a look at `UITableViewCellAccessoryCheckMark` which will probably look better.* — lchamp, Jun 10 '15 at 19:40
Hey, I did try to add constraints in the storyboard but that didn`t work. I havn`t looked at the UITableViewCellAccessoryCheckMark but I am creating a quiz app and the tick will signify the correct or incorrect answer so I thought making it bright would be better. — simlimsd3, Jun 10 '15 at 19:42
No problem for you own image. Can you show us : the current UI *tree* for you tableView and customCell (i.e. : tableview > contentview > ...) and the constraint you tried to use ? — lchamp, Jun 10 '15 at 19:45
The constraints I tried were - Add Missing Constraints and also manually under Pin > Add New Constraints. For the UI tree, I am not 100% sure I understand what you would like to see, sorry. — simlimsd3, Jun 10 '15 at 19:54
The *tree* I was talking about : http://i.stack.imgur.com/VPNYD.png . Anyway, posting an answer in few minutes. — lchamp, Jun 10 '15 at 20:16
Please, check my answer. *You don't need to use `awakeFromNib()` if you work directly in the prototype cell within the tableView.* Constraints will easily do the trick. — lchamp, Jun 10 '15 at 20:30

score 6 · Accepted Answer · answered Jun 10 '15 at 20:26

You only have to set up your constraints correctly. Indeed, even if Add Missing Constraints and Reset to Suggested Constraints are handy sometimes they don't know what you want, thus the result cannot always be what you expect.

What you might want to do here is the following.

For you question label set it in center Y of it's container and set it's leading space to the superview. Like so :

Center Y Leading Space

Then for you image, you want to set it in center Y of it's container too and set a ratio 1:1 on it. Like so :

Center Y Aspect Ratio

Note that you might also want to check the width and height if you don't want your image to upscale (if you set a bigger cell on some device).

You should now have something like that :

Storyboard

And the result :

Screen

Let me know if it helped.

PS : I don't have your image so I've just set a background color on the uiimageview

Thanks a lot for your help. I have managed to get it working but now I have another issue. The lines that seperate the cells don't go all the way to the side of the view. http://i.imgur.com/5jNpFBZ.png — simlimsd3, Jun 10 '15 at 22:53
This is the default behavior since iOS 7. It should be customizable from the storyboard directly like you can see here : http://stackoverflow.com/questions/18773239/how-to-fix-uitableview-separator-on-ios-7 . But ! There is a *glitch* with iOS 8. So you actually need to do it programmatically (check the answers on the link and other similar questions if needed). — lchamp, Jun 11 '15 at 06:00

whereisleo · Answer 2 · 2015-06-10T20:10:41.630

0

Assuming that you started with a View Controller, Dragged a table and a Cell into the table...

in ViewController: UIViewController...{

@IBOutlet weak var resultsTable: UITableView! // connect to tableView

override func viewDidLoad() {
  super.viewDidLoad()

  let theWidth = view.frame.size.width
  let theHeight = view.frame.size.height

  resultsTable.frame = CGRectMake(0,0, theWidth, theHeight)
}
}

in UITableViewCell file:

@IBOutlet weak var imageView: UIImageView!

override func awakeFromNib() {

  let theWidth = UIScreen.mainScreen().bounds.width
  contentView.frame = CGRectMake(0,0 theWidth, 64)

  imageView.center = CGPointMake(115, 15) //mess around with these #
}

edited Jun 10 '15 at 20:10

answered Jun 10 '15 at 19:54

whereisleo

818
5
12

Thanks, I have a controller for the TableViewCell and my TableView is in a ViewController not a UITableViewController. – simlimsd3 Jun 10 '15 at 19:57
did you drag a table to your ViewController? if so, did you connect it to your ViewController? In the example, I started with a VC added a table and cell. – whereisleo Jun 10 '15 at 20:06
Yeah I dragged a table into my ViewController. It is connected becuase it all works just not aligned. I will test the example in a bit! Thanks a lot. – simlimsd3 Jun 10 '15 at 20:08
Hi there, I have updated my question to include my project code. I wasn`t able to get it to work. I recieve fatal error: unexpectedly found nil while unwrapping an Optional value with a Bad Request. – simlimsd3 Jun 10 '15 at 20:19
that is nothing to do with the cell or image placement. You are unwrapping (!) (saying that something is there) when you don't have any information passing through your code. You have to look somewhere else within your code for that issue. – whereisleo Jun 10 '15 at 20:28

How to add constraints to a Custom UITableViewCell

View Controller /w TableView

Cell View Controller

2 Answers2