Testing iOS9 layouts with XCode playgrounds

Alberto Gimeno
2 min readAug 23, 2016

--

I prefer writing my interfaces with code. I’ve never specially liked XIBs or Storyboards. So I was really happy when AutoLayout appeared, but once you work with it… it can be a little big nightmare. When it works it’s fantastic, but when it breaks it’s horrible. In the end I end up many times writing custom layoutSubviews() methods and do some math to layout the subviews in them. It’s far from ideal but it’s easier to debug and change.

Another thing that I’ve always wanted is to be able to modify the interfaces on the fly. So even though I’m a “native” iOS developer sometimes I’ve been tempted to migrate to React Native to have hot reloading.

Time ago a saw this great presentation about iOS9 layouts. But I really didn’t have time to test these new APIs, until last week. While I was testing them I was thinking one more time… what if I could change this constraint and see the changes in real time? Hmm what if I could test UIs in a playground? Well, it required some searching and trial and error… but finally I got it working:

Testing UIStackView in a playground

I’m still learning the new layout guides and such, but this allows me test in real time layout changes which means saving a lot of time.

Things to have in mind and things I’ve learned:

  • A playground allows you to have source files and resources, so you can use images and extensions as you can see in the screenshot. But probably you cannot use custom fonts.
  • I had to made public the extensions and their methods to be able to use them in the main playground source code.
  • I don’t think there’s a way to be able to resize the liveview easily, so you have to test with different sizes changing the code.
  • This works a lot better with XCode8. With XCode7 is almost unusable because many times your changes in the code are not applied to the live preview.

--

--