March 17, 2015

Facebook Tweaks

Developers add many animations into their apps to make UI more intuitive and fun. Modern iOS has really nice API for view controller transitions and effects, Core Animation was there since the very beginning. More and more tools enable us to design and polish animation curves and fine-tune duration times or damping values.

From the earliest builds of Saver we started using the Tweaks library made by Facebook. Everything from custom view controller presentations to animation springs was wrapped into tweaks and then polished to death.

Despite its weird user interface, the Tweaks component does amazing job and we highly recommend it for iOS development. Below are minor improvements which may be useful for your project.

Replace the Shake gesture

By default, you open the Tweaks window using a Shake gesture. From our experience, this method is terrible. After 10-20 adjustments you will hate your iPhone and any animation parameters. So I replaced the FBTweakShakeWindow by custom implementation, to react on the quite fast re-activation.

So, instead of shaking the damn device, you press the Home button three times in a row. This works like a charm and you will never do this coincidentally.

Please find the full solution in the Gist. The methods applicationWillResignActive: and applicationDidBecomeActive: are essential.

Disable Tweaks in production

Development builds are different from the final product in the App Store. You do not want to provide macros with Release configuration, but there is one gotcha. Your teammate may be a designer or a product manager without Xcode. For example, we use Apple TestFlight for public Beta testing, but Hockey for internal builds.

Facebook library defines the symbol FB_TWEAK_ENABLED only when the symbol DEBUG is available. However, we need Tweaks in the Release build. So we duplicate the Hockey configuration from Release and add the following lines into the workspace Podfile.

post_install do |installer_representation|
    installer_representation.project.targets.each do |target|
        if target.name == "Pods-Tweaks"
            target.build_configurations.each do |config|
                if config.name == 'Hockey'
                    config.build_settings['GCC_PREPROCESSOR_DEFINITIONS']
                    ||= ['$(inherited)', 'FB_TWEAK_ENABLED=1']
                end
            end
        end
    end
end

Execute pod install in the command-line to update Xcode project settings. Now Build Properties for the Hockey configuration will include the symbol FB_TWEAK_ENABLED and Tweaks panel will be available as result.

One hint to save your time

There is a small note I did not found in the official documentation for the component. Never try something like this:

#define MODAL_SCREEN_COLLECTION @"Modal Screen"
#define FADE_IN_GROUP @"Fade In"

First, these symbols pretty fast become unmanageable. Second, AppCode may not highlight things properly because you implicitly wrap one macro into another.

Instead, insert pure strings even if they are duplicates. The most likely, you will remove them in the end of the day, when animations are polished and just occupy too many rows in the Tweaks panel.

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)ctx
{
    return (self.movingBehind
            ? FBTweakValue(@"Modal Screen", @"Move Behind", @"Duration", 0.5)
            : FBTweakValue(@"Modal Screen", @"Restore", @"Duration", 0.4));
}

Happy tweaking!

No comments:

Post a Comment