Custom Tabbar in SwiftUI(iOS 15+)

Custom Tabbar in SwiftUI(iOS 15+)

Today we will build custom Tabbar control in SwiftUI. Our custom Tabbar will support both portrait and landscape modes.

By the end of this article, we will have:

Let’s get started

We will start with an enum to represent tab items. This enum will also return String representation of the item along with SF Symbol icon for the tab.

enum TabItem: String, CaseIterable {
    case home
    case search
    case bookmarks
    case profile
    
    var description: String {
        switch self {
        case .home:
            return "Home"
        case .search:
            return "Search"
        case .bookmarks:
            return "Bookmarks"
        case .profile:
            return "Profile"
        }
    }
    
    var icon: String {
        switch self {
        case .home:
            return "house.circle.fill"
            
        case .search:
            return "magnifyingglass.circle.fill"
            
        case .bookmarks:
            return "bookmark.circle.fill"
            
        case .profile:
            return "person.circle.fill"
        }
    }
}