2

I am having trouble getting constraints to work on my UITableViewCell. The cell currently has 2 text fields and a button with an image.

iPhone X Storyboard

iPhone X

Currently without constraints the cell content doesn't change position no matter which device I test it on. For instance on an iPad it looks like this

iPad storyboard

iPad

When I add constraints it looks like it is going to work, but then when I run the app the content is all screwed up.

Here are screenshots of what it looks like with constraints, and what constraints I am using.

iPhone X Simulator with constraints

iPhone X Simulator with constraints iPhone X Simulator with constraints

Can anyone tell me which specific constraints I need to make it look like this on all devices?

iPhone X Simulator without constraints

iPhone X Simulator without constraints

I haven't had issues with constraints with the rest of the app, but for some reason Autolayout constraints in cells are evading my understanding.

Thank you!

UPDATE

I was able to fix the issue with the answers from this question Autolayout is ignored in Custom UITableViewCell

After that the constraints @leedex suggested worked wonderfully.

bcupp
  • 61
  • 1
  • 10

2 Answers2

3

Your noteTextLabel has no leading or trailing constraints. The leading constraint should be to the superView and the trailing constraint should be to the left side of the button.

Your flagButton should have top and trailing constraints, where both are to the superView. Or the button could have a centerY constraint and a trailing constraint instead, where the centerY constraint is the same as the superView's and the trailing constraint is to the superView. The button should also have width and height constraints.

Your dateLabel should have leading, top, bottom and trailing constraints, where the leading is to the superView, top is to the noteTextLabel, the bottom is to the superView, and the trailing is to the flagButton.

Here is an example screenshot, notice how trailing, top, leading, and bottom constrains are visible:

enter image description here enter image description here

leedex
  • 963
  • 8
  • 19
  • Thank you for the detailed instructions! Unfortunately, any time I add constraints to the button it goes on top of the note/date text to the left. It looks fine in the storyboard, just not in the simulator. Do you have any idea why this would happen? I tried you constraints exactly and it still looks like my original image. – bcupp Mar 08 '18 at 00:44
  • Also, am I correct in saying that you mean the content view when you say super view? – bcupp Mar 08 '18 at 00:45
  • I would suggest making sure that the leading constraint of your button is to the right side of your noteText, and not the superView. If the button is overlapping the noteText and moving to the left, then it's likely that the button's leading constraint is to the superView or to something else on the left side. And yes, the content view is the super view. – leedex Mar 08 '18 at 01:23
  • Sorry for the delay in responding. I verified that the leading constraint of the button is indeed the noteText.trailing. Actually my constraints are identical to the ones in your screenshot. No matter what I do, the Botton still overlaps all the text and everything pushes to the left. I have no idea why this isn't working. Do you know if there could be some other Xcode setting I may have set on the Content View/Cell or any other elements that could be causing this? – bcupp Mar 09 '18 at 01:20
  • Could it have anything to do with the TableView constraints? – bcupp Mar 09 '18 at 01:32
  • I discovered my issue was due to having the cell class assigned to my content view along with my cell. Thanks to this stack overflow question for that! https://stackoverflow.com/questions/43319921/autolayout-is-ignored-in-custom-uitableviewcell. After I changed that, your constraints worked perfectly! Thank you for all your help! @leedex – bcupp Mar 09 '18 at 23:47
  • Im sorry I wasn't able to respond sooner. I'm glad to know you were able to fix the problem! – leedex Mar 09 '18 at 23:56
1
  • For Image : Keep Top,Bottom,Right constraints as it is and fix the width constraint to some value like 30.
  • For Text Field : Keep the left, top , bottom constraint as it is & make the right constraint 10 wrt image or 40 wrt superview.
Shivam Tripathi
  • 1,405
  • 3
  • 19
  • 37
  • Hi Shivam, thank you for your suggestion. Unfortunately I am having the same issue after implementing it. – bcupp Mar 09 '18 at 01:15