CODEWITHSUNDEEP
uitabbaruitabbaritemiphone-xr
Jin
Jin

Reputation: 695

iPhone XR iOS 12 UITabBarItem title overlap on top of the picture

As you can see from the picture, the title overlap on top of the picture

The issue only happens on the iPhone XR, it works well on all other iPhone devices.

enter image description here

And I used the original UITabBar component, not the customized one

tabBarItem.titlePositionAdjustment.vertical = -10.0
tabBarItem.selectedImage = UIImage(named: imageName)
tabBarItem.title = barTitle
tabBarItem.image = UIImage(named: unSelectedImage)

Upate:

  1. The issue can't be reproduced on the simulator, only on the physical device

  2. The interesting things is, it works well on the one iPhone XR, has the issue on another iPhone XR

Update:

  1. The user who has the issue open the Display Zoom feature

  2. It works well when the use choose the Standard display

Upvotes: 0

Views: 63

Answers (1)

Jin
Jin

Reputation: 695

The solution is;

extension UIDevice {
var modelName: String {
    var modelID = ""
    #if targetEnvironment(simulator)
    modelID = ProcessInfo.processInfo.environment["SIMULATOR_MODEL_IDENTIFIER"] ?? ""
    #else
        var systemInfo = utsname()
        uname(&systemInfo)
        let machineMirror = Mirror(reflecting: systemInfo.machine)
        modelID = machineMirror.children.reduce("") { identifier, element in
            guard let value = element.value as? Int8, value != 0 else { return identifier }
            return identifier + String(UnicodeScalar(UInt8(value)))
        }
    #endif

    return modelID
    }
}

I use the nativeScale and scale parameter to detect if the user open the Display zoom feature.

 if UIScreen.main.nativeScale > UIScreen.main.scale, UIDevice.current.modelName == "iPhone11,8" {
   // "iPhone11,8" for iPhone XR
  // do nothing here

} else {
   // for other devices
    tabBarItem.titlePositionAdjustment.vertical = -10.0
}

Upvotes: 0

Related Questions