Strange behaviour in Storyboard (Missing view when running app)

Question

For the last few months I have been doing all of my layouts in code to practice with autolayout.

I have decided to go back to Storyboards and am regretting it already :-). I have been trying to do a layout with multiple views including a UIStackView and was getting many errors. I thought maybe I was doing something wrong with the StackView so I decided to delete everything apart from a button and label.

The simple view with a label and button can be seen below:

As you can see, the constraints on the label are very simple. The button in the top right (where the blue is) just has top space and trailing space. However when I run the app the label is not seen:

I am also constantly getting: An internal error occurred. Editing functionality may be limited.

Has anyone else experienced this odd behaviour?

Answer 1

You have hard coded leading and trailing constraint constants. They add up to 518. That probably makes your label width negative. You don't see it in Storyboard because you're using the inferred simulated metrics. You'll see it right away if you change to an 3.5 inch iPhone.

I think a better approach would be to remove the leading and trailing constraints and center the label horizontally in the superview. You can set a fixed width on your label if you want.

Answer 2

You have set the leading and trailing of the label . This will definitely happen because you have set the wrong constraints. Check the size of your view Controller where you have set the constraints, its (Any width , Any height).

Now, check in which size you are running, its (Compact width, Regular height). If you run it in a iPad you will find your label. Since, you have not fixed the width of your label, the label gets compressed when it is run. Try setting the width of your label and remove either the leading or the trailing constraint.

Else instead you can fix your width and select either the leading and trailing and set it to "less than equal to " rather than "equals to".

While designing imagine yourself holding the object keeping in mind about all possibilities that can occur and then set the constraints accordingly. A user can run your application in any size iPhone and iPad. So, the design should be such that it doesn't affect your objects in it.

If any problem occurs try view debugging then you can definitely find out where you have done wrong.

Answer 3

You may need to remove label's leading & trailing space, and add add constraint call "Center Horizontally in Container" if you want to center the label.

You can learn more about autolayout in here if you do not know it well.