Skip to content

Category: Interface Builder

Making your circular views circular in Interface Builder

A really common thing to do in iOS interfaces is make interface elements either circular or into a squircle (squircular?). This is a common thing to do when displaying user avatars, for example.

If you’re building your interface in a storyboard, though, you’ll find one big problem when you add the code to make your view circular: Your storyboard doesn’t look like your app.

Ugly. This just won’t do.

Luckily, there is a really simple way to make your storyboard controls match your app controls.

You can go home again — Using unwind segues to navigate back to previous screens

If you are doing all of your app navigation in storyboards, one of the advantages you have surely discovered is that it’s a great way to specify all of the navigation for your app with minimal code. You may run into this catch, though: specifying a segue for forward navigation is straightforward, but what if you want to specify a segue to dismiss a screen, such as the simple case of tapping a Done button to dismiss a modal screen? Suddenly the answer isn’t quite so obvious.

If you search for this on the web, you get all sorts of proposals, from pretty close to just plain wrong:

  • Make a regular segue
    • This solution is clearly wrong, because you want to remove view controllers from the stack when you dismiss, not add to them
  • Dismiss the controller yourself in code
    • We’re using storyboards to get our navigation out of code, this defeats our purpose
  • Write a custom segue to dismiss your view controller
    • This is closer, but is inflexible and makes reuse of your view controllers more difficult as we’ll touch on later

The correct solution for flexible navigation backwards in your storyboards is what is called an unwind segue. The functionality is a little more hidden in Interface Builder than the regular segue — let’s talk about how they work, and how to find and use them in Interface Builder.