Animate a UIBarButtonItem using Swift

Make it look good!

Photo by Onur Binay on Unsplash

Before we start

Difficulty: Beginner | Easy | Normal | Challenging

This article has been developed using Xcode 12.2, and Swift 5.3

Keywords and Terminology

UINavigationBar: A bar containing buttons for navigating within the hierarchy of screens

This article

Background

I’ve always wanted to create great user experiences. One way of doing this is to put lovely animations onto your UI. The UINavigationBar is a great opportunity for that.

The Repo

I’ve prepared a Repo

The Project

I started off the project and in the storyboard embedded the UIViewController instance in a UINavigationController, and then a UIBarButtonItem is added using the storyboard.

The image can then be chosen using the storyboard. Select the storyboard, and then find bar button item in the components by choosing with + and selecting the bar button item

this can then be dragged into the UINavigationBar.

Set images to be rendered as original image in the asset catalogue to stop them being blue. This can be done by selecting the asset catalog, then the asset and Image Set has the option on the right-hand side of Render As> Original Image.

Size of the images

For the bar button items the best sizes are 22–44–66 for items @1x, 2x and 3x

The Solution: Explanation

It is possible to place any sort of UIView subclass inside a bar button item as a custom view. It is therefore possible to place a UIButton into the custom view property, and then perform any animations as required.