iOS 10下TabBarItem图片拉伸、选中时尺寸异常问题求助

Hey there, let's work through this TabBarItem issue you're facing on iOS 10—it’s a pretty common discrepancy thanks to the styling changes Apple rolled out between iOS 10 and 11. Here’s how to fix both the image stretching and the weird size jump when selecting an item:

1. Use Standardized Image Sizes #

iOS 11+ automatically scales tab bar images to fit, but iOS 10 is far less forgiving with non-standard dimensions. Make sure your tab bar assets (both normal and selected states) follow Apple's recommended sizes:

• Non-retina: 25x25px
• @2x (Retina): 50x50px
• @3x (Retina HD): 75x75px
  If your images are larger than this, iOS 10 will force-stretch them to fit the tab bar bounds, which causes the distortion you're seeing.

2. Manually Set Image Insets & Rendering Mode #

iOS 10 doesn’t handle image padding automatically, so adding insets will prevent stretching and keep your images aligned. Plus, setting the correct rendering mode ensures your images display as intended (not tinted or altered).

First, add a simple extension to UIImage to handle insets:

extension UIImage {
    func withInsets(_ insets: UIEdgeInsets) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(
            CGSize(width: size.width + insets.left + insets.right,
                   height: size.height + insets.top + insets.bottom),
            false,
            scale
        )
        let origin = CGPoint(x: insets.left, y: insets.top)
        draw(at: origin)
        let insetImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return insetImage
    }
}

Then, apply this when setting your TabBarItem images:

// Replace with your actual image names
let normalImage = UIImage(named: "tab_normal")?.withRenderingMode(.alwaysOriginal)
let selectedImage = UIImage(named: "tab_selected")?.withRenderingMode(.alwaysOriginal)

// Adjust insets based on your image size and desired padding
let imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
tabBarItem.image = normalImage?.withInsets(imageInsets)
tabBarItem.selectedImage = selectedImage?.withInsets(imageInsets)

The insets here add vertical padding, keeping your image from being stretched to fill the entire tab bar height. Tweak the top/bottom values until the look matches what you see on iOS 11.

3. Standardize Tab Bar Appearance for iOS 10 #

Force consistent item sizing across your tab bar to eliminate the weird size jump when selecting items. Add this code where you configure your tab bar (e.g., in your TabBarViewController's viewDidLoad):

if #available(iOS 11.0, *) {
    // iOS 11+ handles this automatically, no extra setup needed
} else {
    UITabBar.appearance().itemPositioning = .centered
    UITabBar.appearance().itemWidth = 70 // Adjust to match your desired item width
    UITabBar.appearance().itemSpacing = 10 // Space between items
}

This ensures all tab bar items have the same fixed width, so images don't shift or resize when selected.

4. Check for Custom Tab Bar Conflicts #

If you’ve implemented a custom UITabBar or modified its layout constraints, double-check that your code doesn’t override iOS 10’s default sizing logic. For example, avoid manually setting the tab bar’s frame or item frames—use Auto Layout constraints instead, and add version-specific checks if needed.

内容的提问来源于stack exchange，提问作者Ali Omari