An Auto Layout Experiment

I've only used Auto Layout very briefly in the past and not used it to do anything more than layout a static view (which seems kind of pointless) so I decided to get my hands dirty and do something with Auto Layout that I haven't seen done before.

After a couple of hours I had a brief sample of a Bejewelled style game together all using Auto Layout!

Here's a quick screencast of me playing the game...

It was improved slightly after recording this.

All of the animation was done using auto layout constants. It was hard work getting my head around deleting and adding constants and I think it would be fairly simple to improve the animation for instance when a column of three blocks is deleted or when a brick falls into a row/column that then gets removed as a result of it landing.

Anyway, you can see the code on Github. It isn't documented, it isn't tidy and it wasn't meant for production, I just made it as a learning exercise. But if you can learn anything from the code then all the better for it.

If you have any questions about the code then let me know in the comments and I'll respond ASAP.

Update

I've now pushed the latest changes of the code on to Github so you can get a more complete version of the game.

4 Comments

  1. This is a very good example app that should be a great help for anyone to learn auto layout via code (essential since Interface Builder makes it rather difficult for all but very simple layouts, sadly).

    You say it isn't tidy code though? It is extremely tidy and easy to follow. Great work.

    Thanks for sharing.

  2. oliverfoggin

    Thanks for the comment! I actually forgot to push the latest changes on to Github. I've pushed them now so you'll be able to see a more complete version of the game.

  3. Ryan

    This is extremely helpful to me, so thank you! I know it wasn't meant to be a lesson, but it easily could be a fantastic resource for the community if you found a couple minutes sometime to document some of the NSLayoutConstraints! They're a super confusing concept and a quick sentence would be a huge boon 🙂
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *