SwiftUI: Animate Tab bar tab switch with a CrossDissolve slide?

XCode 12 — iOS 14

In this tutorial, We are going to implement CrossDissolve slide animation for Tab bar view.

We cannot achieve CrossDissolve animation in SwiftUI itself, unless we create custom tab bar. In this tutorial, We are going to implement crossDissolve for native Tab-bar.

As Tabbar does not give any API to add custom animation, We are going to inspect Tab-bar for UIKit’s UITabbar. After getting UITabbar, we implement the animation.

To get UITabbar using following library.

import SwiftUI
import Introspect //To Get UIView in view hierarchy
@main
struct
LoopingVideoApp: App {
var body: some Scene {
WindowGroup {
TabView {
NavigationView {
List {
Text("Menu list item 1")
}.navigationBarTitle("Menu")
}.tabItem {
Label("Menu", systemImage: "list.dash")
}
NavigationView {
List{
Text("Order list item 1")
}.navigationBarTitle("Order")
}.tabItem {
Label("Order", systemImage: "square.and.pencil")
}
}.introspectTabBarController { (tabBarController) in //Introspect library
tabBarController.delegate = tabBarControllerDelegate //update delegate

}
}
}
}
final class TabBarControllerDelegate: NSObject, UITabBarControllerDelegate {func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { //add transition logic here }
}

I borrowed transition logic from here:

Logic:

1. Get from and to view controller using UITransitionContextViewControllerKey2. Get frame fo fromVC or toVC3. Check if view is moving right or left based on its index4. Update the frame respectively 5. perform move operation

Final code:

iOS Developer | Swift | Flutter

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