Skip to content

Apps Dissected Posts

Frustrated by missing features in SwiftUI? Using UIViewRepresentable to wrap UIKit controls

When the SwiftUI announcement came out at WWDC 2019, you were buzzing about the new framework. Finally, a new way to build our interfaces. Out with ViewControllers, out with storyboards, in with declarative, programmatic UIs!

Now that we’ve all had some time to play with the framework, we’ve found out what we’re really trading away when we use SwiftUI, at least for now. One of the major things? The vast array of components and configurability available through UIKit.

You’ve probably found through experimenting with the new framework that there are things missing. Entire UIKit components are missing, and things like the broad number of properties you could set on TextFields, and the common pull-to-refresh control are missing.

You really don’t want to continue down the UIKit road. You want to go all in on SwiftUI now; it’s the future of development for all Apple platforms. “But how am I going to get back these features?”

This is where UIViewRepresentable comes in. Apple knew that SwiftUI was not going to be a complete port of UIKit for its first version, and so they provided this protocol which you can implement on a View struct to wrap a UIKit control, making it usable in SwiftUI. Let’s see an example how to use this: getting the pull-to-refresh functionality on a scroll view.

Got an app idea, but stuck on where to start? Here’s a framework to get started and keep going

Once you’ve built your iOS skills up to a certain point, your mind probably starts going crazy coming up with ideas for apps to build. App ideas that will grow your knowledge (like maybe cloning an existing app?), or maybe apps you want to release to the App Store to make some money. Finally, you pick one that you are ready to build. And then you freeze.

You’re thinking: ”I’ve got my great idea. Now how the @*%$( am I going to build it?” Because it looks overwhelming. So many screens to design and code, an app workflow to develop, backend services to connect up, new iOS concepts to learn. But you open Xcode, select New Project, and you don’t even know which new app template to pick.

The blank page problem. This happens when we’re starting an app, adding features, anytime we’re building something new. It’s something big and unclear. There are so many parts, and you have no clue how they fit together. Or worse, you don’t even know all the moving parts in the first place.

Every creative discipline knows this problem well, and all of them have developed various techniques to combat it. Here is a useful framework I use as I’m building a new app or new features for an app to begin and keep filling in that blank page.

Adding manual app badges to your app: step by step

It’s really common for apps that support notifications to use them to update the application badge to display numbers of unread messages, undone tasks, etc. But what if you don’t need or want the added complexity of supporting push notifications, or even local notifications, but want to alert the user via an app badge?

Apple’s documentation on this particular way of using app badges is not the best. Badges are combined with the UserNotifications framework, but if you want to set the badge yourself outside of a notification, that is part of UIKit. And the documentation are missing important points like: do you need to check that you’re authorized to show badges to set the badge manually? Will it error out? Crash? Result in strange app behavior?

Manual app badges turn out to be really easy, but the docs don’t make it seem that way. Let’s demystify them right now.

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.