Search code examples
iosuitableviewautolayoutxcode-storyboard

Auto Layout: Displaying content relative to container


I'm having some issues developing an iPhone application. I have a UITableView on a screen and have made a template for how I want to lay things out. I made sure that the constraints are satisfied and when my program compiles, I get no auto layout issues. However, when I run my program on the simulator, some of the text is not shown but I know it should be there. Here is how things look on the Storyboard:

How things are laid out on my screen

However, this is how things look when I run the program on the iPhone simulator, it appears as so:How it appears on simulator

I am only worried about the From Date and To Date fields not being displayed because if I move them more to the left, I can eventually see them. Moreover, I made sure to make the To Date field's Trailing Space to Container Marginby 8 px so I don't really understand why these two fields aren't showing. Any help would be appreciated. Thanks!

Edit: Image of To Date constraints: Image of To Date Constraints

Edit 2: Image of how table view cell looks like now:enter image description here


Solution

  • Most likely the labels are not showing because of size classes and the difference between the different screen sizes. In your story board the original view controller is a square shape. Make sure to pin the labels to the side of the cell that you want them to attach to. This will make sure they stay where you want them to. Also make sure that you pin the actual table view to the superview so you can see the labels. I have always pinned to the top, bottom, and both sides, to accommodate different screen sizes and rotation. You may need to change the constraints for the other size classes. This may make some things look they are bunched up a bit with the smaller screen size, but you can always change the font or the format of the cell to fit everything in.

    If you want to change a constraint for another size class, just select that size class at the bottom of the story board. Select the label, and then in the size inspector you can make the constraints you don't want to be unable, and hook up some other constraints to make it work. Ray Wenderlich's web site has a great tutorial on size classes and adaptive layout. You can find it here.

    Happy coding!!