UIEdgeInsets not working on System Images in TabBar

Question

I am using XCode System Images (SF Symbols) for UITabBarItem Images. I'd like to remove the UITabBarItem Title which I have done. But also move the UITabBarItem Image down slightly.

In the past when I wasn't using System Images this would work fine using UIEdgeInsets. However, this appears to have no effect on System Images.

Code:

let imageConfiguration = UIImage.SymbolConfiguration(weight: .regular)
    let imageInsets = UIEdgeInsets(top: 8, left: 0, bottom: -8, right: 0)

lazy var activityTabBarItem: UITabBarItem = {
        let image = UIImage(systemName: "stopwatch")?.applyingSymbolConfiguration(imageConfiguration)
        let tabBarItem = UITabBarItem(title: nil,
                                      image: image,
                                      selectedImage: image)
        tabBarItem.imageInsets = imageInsets
        return tabBarItem
    }()

Is there a workaround for this?

Bronny

Use withAlignmentRectInsets(_ alignmentInsets: UIEdgeInsets) on image – Bryophyte

Answer 1

Took me a while, but you can use the UIImage property withBaselineOffset(fromBottom: CGFloat)

example:

UIImage(systemName: "someName")?.withBaselineOffset(fromBottom: 6.0)

Took me a few hours, but I ran into this on my custom tabBarController in SwiftUI. Sorry for the late reply.

Frigidaire

Answer 2

You need to use - withAlignmentRectInsets(_ alignmentInsets: UIEdgeInsets) property of UIImage, to successfully set insets for SFSymbols. Following code in your cases:

image.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: -6, right: 0)

Apple doc for withAlignmentRectInsets

Bryophyte