Swift Libraries to Elevate your UI

I recently started work on fuzZzy 2.0, a modest redesign to my first iOS app with Base11 Studios.

My primary goal for version 2.0 is to update the UI to make the app feel more fleshed out and to make it more clear to new users what features are available in the free version versus what the upgrade features are. To do that, I needed to go beyond the stock iOS controls and UI elements I had chosen in the first version to more closely aligned to the app’s capabilities.

To accomplish this goal, I am employing a handful of different open source Swift libraries that let me quickly implement the newest UI patterns at a relatively small cost to programming time. This is a quick list of the libraries I am using or testing out during the development of fuzZzy 2.0 and any gotcha’s I encountered so far during development.

swift logo

Fluid Motion Slider

The first library I attempted to import (and one of the reasons I decided to search the internet for applicable CocoaPods) was the Ramotion Fluid slider to replace the Vertical Slider that I used in version 1.0 (which deserves an honerable mention in this post).

ramotion fluid motion slider

The fluid slider is really cool. It features a slick animation, a modern design with radius and shadow that I really love, and a great API for managing slider values.

However, in my project where I am dealing with a set of pre-recorded sounds with a set number of combinations it was making it hard to justify the slider as an input method at all. After implementing the slider and attempting an incremental filter on the recorded sounds which mapped back to the small incremental slider changes, I determined that it wasn’t the UI control I was really looking for. I need distinct sections (or segments) within the range the user is exploring. Which led me to a segmented control over a slider.

So the Fluid Slider is not in fuzZzy 2.0, but it is a great library worth mentioning. You should check out this library for iOS and Android as well as the other Ramotion controls on GitHub.

Twicket Segmented Control

The replacement for the Fluid slider was a Segmented Control - which is an existing iOS pattern that I had already employed in version 1.0 of fuzZzy. But I was never in love with the design of the iOS default segmented control, so instead I decided to replace both the stock Segmented Control and the vertical sliders with the Twicket Segmented Control.

segmented control teaser image

The Twicket Segmented Control is a UI control used to replace the UISegmentedControl that features an updated design with radius and shadow as well as dragging and inertia so you can ‘throw’ the selection to either side of the list. The API for this control is fine, but it is much improved compared to the iOS standard UISegmentedControl in my opinion.

twicket segmented control animation

Really, what this change is enabling me to do is to specify what features were available to free app users versus what features required a premium upgrade because I can specify segments of the control to be ‘locked’ versus the vertical slider which only lets the user know of the premium restriction after using.

I did have to make some Swift updates to the source when I imported this project, but not much.

Deck Transition

Deck Transition is a cool library that enables you to mimic the modal behavior of the newest Apple apps like Music and Podcasts. It is basically a transition between View Controllers that enables the border radius and black status bar during the modal transition while displaying a ‘snapshot’ of the previous View Controller as it fades into the background so it appears as a card shuffling under the presenting modal. The end result is pretty cool and almost exactly the same as the Apple developed apps.

deck transition image

One of the things I ended up changing in my implementation was the constant for the cornerRadius of the presented/presenting views - mostly so it looked right on the iPhone X. There’s definitely a better way to implement this (like overriding this value for iPhone X or more curved devices instead of changing a random constant), but I went with this approach because I like the bigger corner radius even on the square devices so I thought it was acceptable.

Here’s the file where I updated the constant value.

//
//  Constants.swift
//  DeckTransition
//
//  Created by Harshil Shah on 04/08/17.
//  Copyright © 2017 Harshil Shah. All rights reserved.
//

struct Constants {

    /// Default duration for present and dismiss animations when the user hasn't
    /// specified one
    static let defaultAnimationDuration: TimeInterval = 0.3

    /// The corner radius applied to the presenting and presented view
    /// controllers's views
    static let cornerRadius: CGFloat = 24

    /// The alpha value of the presented view controller's view
    static let alphaForPresentingView: CGFloat = 0.8

    /// As best as I can tell using my iPhone and a bunch of iOS UI templates I
    /// came across online, 8 points is the distance between the top edges of
    /// the presented and the presenting views
    static let insetForPresentedView: CGFloat = 8

}

The Deck Transition mostly just serves an aesthetic purpose in my app. It’s pretty, and it helps to contextualize a modal so that it feels less separated from the presenting view controller.

Easy Tip View

With the UI updated to follow iOS standards and updated styling of controls I still needed to tackle the case of a new non-premium user who had never used the app. Because the app’s design is essentially the same for free and premium users, it means I needed to be clearer to new users which features are included for free and which features are available with premium. I do this primarily with icons on the slider view, but I still wanted to guide the first tap of a new user towards the core functionality of the app - starting the sound machine.

Enter the tip view…

tooltip in fuzzzy

The EasyTipView enables you to easily toss a tooltip on any given UIView in your view hierarchy. For fuzZzy 2.0 I decided to toss a first-time-use tooltip on the volume slider, indicating you can use the non-premium version by starting the app’s sound machine noise on Low volume. The goal: less downloads that remove the app after seeing a premium upgrade prompt.

The Easy Tip View also needed a few Swift changes to get it up to date in the latest version of Xcode (9.2).

Next?

I’m still working on bringing new features to fuzZzy, including tracking sleep trends and quality with Charts.

If you have any suggestions for great Swift libraries I could check out, let me know @ajkueterman.