Grid Menu in SwiftUI as Swift Package

Besides wanting to learn SwiftUI and Swift Package manger I have always thought a grid style menu could be a great alternative to hamburgers or tab bars.

Image for post
Image for post

The source code for this project can be found at this git hub repo.

I also wanted to break away from the cocoapods mindset so I decided to ship this as a Swift Package.

You could argue that you should not ship SwiftUI code in a Swift Package as a Swift Package can be used by anyone with the Swift runtime and SwiftUI is an exclusive Apple Framework. Also, Xcode allows you to open a swift package and build (command + B) however you can’t run “Live Reload” (option + command + P) unless you add it to a real project. Finally, SwiftUI is so powerful and concise that you could easily code this up on your own. No need for my half baked dependency.

Regardless, here is the URL you need to add this Swift Package to your project. Or, to just clone the code.

Most software engineers have realized that it’s a good thing to break code apart into logical groups. It’s even better to ship them to yourself as a dependency and make them open source!

Here is a short list of considerations when making a dependency

  1. Don’t assume more then your dependency needs to function
  2. Provide the option for the consumer of your dependency to control details
  3. Object names are important
  4. Use your own goddamn product so you can see the pain points

SwiftUI is a declarative language meant to abstract away non-differentiating pieces of your app. This nature makes it very concise letting you fit a-lot into a single view. However, it is still code and best practice dictates that you want to break things out in to smaller chunks.

To illustrate the pieces of this library consider an example from a fresh xCode project using SwiftUI and consuming the GridMenu

Example Implementation
  1. I have a controller object that manages the list of GMItem in the menu, the selected GMItem and finally if the menu should be shown or hidden. The entire controller is a SwiftUI @ObservedObject on the views that require it as an initializer. The properties on the GMMenuController are @Published properties so other pieces of your code can manipulate and observe them using Combine if needed.
  2. I wanted the GMCollapsedMenu to be able to be positioned by the user of the library where ever they want. I chose the upper right on this demo and this is how I accomplish that positioning.
  3. The GMCollapsedMenu is meant to be positioned where ever the user of the library wants. It takes the GMMenuController as an initializer and binds to the collapsed property of the controller. It handles its own display state based on that property.
  4. I make no assumptions about when you actually want the menu presented. I just provide a variable that represents what the GMCollapsedMenu thinks should be happening. It’s up to you to display the actual menu. The GMMenu takes the GMMenuController and binds to the .menuItems and .currentItem to manage its self.

The GMMenuController has a default menu set but that can be manipulated directly as well as the currently selected item. The menu will update appropriately if your code changes the values. Such is the beauty of SwiftUI

Ultimately this library is a product of my attempt to learn both Swift Package manager and SwiftUI. I ran into another issue while developing that I documented on StackOverflow.

If you use this menu or simply steal its code I’m honored. Otherwise if you feel like trashing it or have suggestions I would love to participate in the discussion. 👍🏼 or 💬

Written by

I contribute to the start-up grind in Seattle as an iOS Engineer. I also used to fly airplanes.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store