Skip to content

Instantly share code, notes, and snippets.

@calt
Last active October 10, 2024 07:06
Show Gist options
  • Save calt/7ea29a65b440c2aa8a1a to your computer and use it in GitHub Desktop.
Save calt/7ea29a65b440c2aa8a1a to your computer and use it in GitHub Desktop.
UITabBar with custom height in Swift, does not work for iOS 14 or later.
// Does not work on iOS 14.0 or later, keeping the gist just for reference.
extension UITabBar {
override open func sizeThatFits(size: CGSize) -> CGSize {
super.sizeThatFits(size)
var sizeThatFits = super.sizeThatFits(size)
sizeThatFits.height = 71
return sizeThatFits
}
}
@homerblr
Copy link

homerblr commented Sep 7, 2021

@Wei18 you are a champ

@kepe94
Copy link

kepe94 commented Sep 7, 2021

Hi, This method works but how can I center the tab bar image to the updated height?
410AE454-7D74-42A2-A769-6F96B2B80607

@MoSaber-hub
Copy link

@Wei18 Thank you that's work for me too on iOS 14+

@ardacmen
Copy link

ardacmen commented Apr 12, 2023

@Wei18 thank you! still working for swift 5+

@Reginmaru
Copy link

New to Swift over here! - Trying to understand how I would use this in Views. Here is my Tabs View `struct Tabs: View {
@EnvironmentObject private var themeManager: ThemeManager
@Environment(.colorScheme) var mode: ColorScheme
@State private var selectedTab = 0

var body: some View {
        TabView(selection: $selectedTab) {
            DetailsView()
                .tabItem {
                    Text("Home")
                    TabImage(name: "misty", size: CGSize(width: 42, height: 42))
                    
                }
                .tag(0)
            
            SettingsView()
                .tabItem {
                    Text("Socials")
                    TabImage(name: "laptop", size: CGSize(width: 42, height: 42))
                    
                }
                .tag(1)
            
        }
        .onAppear(perform: {
            CustomTabBar().sizeThatFits(CGSize(width: 300, height: 400))
        })
        .accentColor(AppColors(mode: mode).jnjBorder)
}

}`

With the extension class CustomTabBar : UITabBar { override open func sizeThatFits(_ size: CGSize) -> CGSize { super.sizeThatFits(size) var sizeThatFits = super.sizeThatFits(size) sizeThatFits.height = 71 return sizeThatFits } }

However my emulator is still showing all clumped up. I've tried a few other ways to try and increase the height but nothing seems to work!

Here is the resulting emulator screenshot:
Screenshot 2024-06-24 at 23 15 58

@jaroshevskii
Copy link

After testing many ways, this one works best for me:

final class CustomTabBar: UITabBar {
    private let topLineLayer: CALayer = {
        let obj = CALayer()
        obj.backgroundColor = UIColor.appBorder.cgColor
        return obj
    }()
    
    private let tabBarAppearance: UITabBarAppearance = {
        let obj = UITabBarAppearance()
        obj.stackedLayoutAppearance.normal.titleTextAttributes = [
            .font: UIFont.interFont(ofSize: 12.sizeW, weight: .medium),
        ]
        return obj
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setup()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        topLineLayer.frame.size = CGSize(width: bounds.width, height: 1)
    }
    
    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var sizeThatFits = super.sizeThatFits(size)
        sizeThatFits.height = 64 + safeAreaInsets.bottom // 64 is custom height
        return sizeThatFits
    }
}

// MARK: - Setup
extension CustomTabBar {
    private func setup() {
        standardAppearance = tabBarAppearance
        tintColor = .appLabel
        unselectedItemTintColor = .appStroke
        layer.addSublayer(topLineLayer)
    }
}
final class CustomTabBarController: UITabBarController {
    private let customTabBar = CustomTabBar()
    
    override func loadView() {
        super.loadView()
        
        setValue(customTabBar, forKey: "tabBar")
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment