Xamarin.iOS – Interface Builder and Auto Layout

In this lesson

  • Use Interface Builder to specify layout constraints


Tap on time to skip ahead


When we run the application, the stuff that is in our nib in Interface Builder is showing up in our application. You might notice here that everything looks a little off center, even though we had centered it in Interface Builder. That’s because I’m using the iPhone 6 simulator, which is a bit bigger than the iPhone 5. If I actually switch to iPhone 5 simulator, you can see that things look much better centered. This again, is why layout and Auto Layout are very important. I’m going to go back to our 6. How do we fix that? I’m going to open up Interface Builder again. We’re going to use Auto Layout in Interface Builder versus writing all the Auto Layout code, just to clarify a bit more. What I’m going to do, I’m going to click on this guy, then I’m going to hold down the control key, then I’m going to drag up to the parent.


Something that might help us understand what’s going on a bit better is if we take a look at our view hierarchy here on the left. Here’s our label, and here’s our button. This is the view that holds all of them.


What I’m going to do, is I’m going to select our label over here and I’m going to control drag up into the view, to where the view is selected. Then, we’re going to get this pop up and it is going to give us some options that we can do in terms of Auto Layout. I’m going to say, Center Horizontally in Container. Then, I’m going to select our start timer button. Again, I’m going to control drag up to the view and say the same thing, center horizontally. If you look here, you’ll see the properties of those constraints. If I hit Save, then I close out of XCode, come back to Xamarin Studio, let it sync for a second, now when I run this it should look better. Now we can see that it is nicely centered. Even if I switch from portrait to landscape.