IBMistake: On pins and needles

Patrick Sanders Uncategorized

New iOS developers often don't understand the differences between the different types of auto layout constraints, and overuse Pining when they should be using Align.

The most common problem we see is using pinning in an attempt to center an object.

Symptoms:

  • Your object appears in the center in Interface Builder, but appears somewhere else in the simulator (or doesn't appear at all)
  • You get a seriously ugly warning in the console when you run your app that looks something like:


  • You see two pin constraints in your storyboard when you click an object that you want to be centered

Object mistakenly pinned in the center

How it happens:

This happens because of confusion about about different types of auto layout constraints.

To keep an object a specific distance from an object (or the edge of the screen) you should use pinning.

However, if you want an object to stay in the middle of the view (or between two objects) you should to use align.

If you try to pin something in the center, a conflict will occur because the simulator/your phone has a different screen size than the one in interface builder. This means those specific distances will be try to push the object in different directions (if the screen is smaller) or pull the object in different directions (if the screen is larger)

How to fix it:

This is fairly easy to fix. Click the pining constraints (usually blue lines) and hit the delete key.

Then click the Align button (bottom right corner of interface builder.)

Align menu

Then click either (or both) Horizontally in Container to align your object in the center horizontally or Vertically in Container to align your object in the center vertically.

Align menu