Swift中自定义UITabBar横竖屏模式下的对齐不一致问题咨询

我之前也碰到过一模一样的横屏布局偏移问题，大概率是横屏切换时自定义UITabBarItem的布局约束没适配到位，或是系统默认的布局逻辑在横屏状态下被打乱了。下面给你几个实测有效的解决思路：

1. 重写UITabBarItem的布局约束（最推荐） #

如果你的自定义UITabBar是通过自定义UITabBarItem的视图实现的，那一定要确保横竖屏切换时，图标和文字的约束始终以父视图为基准垂直居中：

class CustomTabBarItem: UITabBarItem {
    private var customContainer: UIView!
    private var iconView: UIImageView!
    private var titleLabel: UILabel!

    override init() {
        super.init()
        setupCustomView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupCustomView()
    }

    private func setupCustomView() {
        customContainer = UIView()
        iconView = UIImageView()
        titleLabel = UILabel()
        
        // 添加子视图并关闭自动布局转换
        customContainer.addSubview(iconView)
        customContainer.addSubview(titleLabel)
        iconView.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        
        // 设置垂直居中的约束：图标在上，文字在下，整体相对于容器居中
        NSLayoutConstraint.activate([
            iconView.topAnchor.constraint(equalTo: customContainer.topAnchor, constant: 4),
            iconView.centerXAnchor.constraint(equalTo: customContainer.centerXAnchor),
            
            titleLabel.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 2),
            titleLabel.centerXAnchor.constraint(equalTo: customContainer.centerXAnchor),
            titleLabel.bottomAnchor.constraint(equalTo: customContainer.bottomAnchor, constant: -4)
        ])
        
        // 替换系统默认的item视图
        self.setValue(customContainer, forKey: "view")
    }

    // 横竖屏切换时强制更新布局
    override func layoutSubviews() {
        super.layoutSubviews()
        customContainer.layoutIfNeeded()
    }
}

这种方式不管横竖屏，图标和文字都会跟着容器视图的中心对齐，不会出现偏移。

2. 调整UITabBar的系统布局属性 #

如果用的是原生UITabBarItem，你可以直接设置UITabBar的itemPositioning属性，让系统帮你处理居中逻辑：

class CustomTabBar: UITabBar {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 设置item居中排列
        self.itemPositioning = .centered
        // 根据屏幕宽度均分item宽度，确保横屏时也能均匀分布
        let itemWidth = self.bounds.width / CGFloat(self.items?.count ?? 1)
        self.itemWidth = itemWidth
        self.itemSpacing = 0
    }
}

这个方法适合样式简单的场景，不用自定义item视图，但如果有复杂的自定义样式，还是第一种方法更可控。

3. 监听屏幕旋转，手动刷新布局 #

如果上面两种方法都没生效，可以直接监听屏幕旋转通知，在旋转完成后强制刷新UITabBar的布局：

class CustomTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 监听横竖屏切换通知
        NotificationCenter.default.addObserver(self, selector: #selector(refreshTabBarLayout), name: UIDevice.orientationDidChangeNotification, object: nil)
    }

    @objc private func refreshTabBarLayout() {
        // 强制刷新tabbar布局
        tabBar.setNeedsLayout()
        tabBar.layoutIfNeeded()
        
        // 针对自定义item，重新计算frame确保居中
        guard let items = tabBar.items else { return }
        let itemWidth = tabBar.bounds.width / CGFloat(items.count)
        for (index, item) in items.enumerated() {
            if let customView = item.value(forKey: "view") as? UIView {
                customView.frame = CGRect(x: CGFloat(index)*itemWidth, y: 0, width: itemWidth, height: tabBar.bounds.height)
            }
        }
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

这个方法比较直接，能确保每次屏幕旋转后，所有item都重新计算位置，避免布局错乱。

另外要提醒一句：如果用了Auto Layout，一定要避免用固定的frame值，所有约束都要相对父视图设置，不然横屏时很容易出现偏移。

内容的提问来源于stack exchange，提问作者Shrestha Goyal