iOS UIKit自定义TabBar：设备旋转时滑块位置更新问题

问题所在 #

当前实现的核心问题是滑块偏移量依赖sliderView.bounds.width计算，且未监听视图尺寸变化：

• 设备旋转或视图resize后，每个Tab的宽度会改变，但之前设置的sliderLeftConstraint.constant是固定值，不会自动更新。
• sliderView.bounds.width在布局完成前可能不准确，导致偏移计算错误。

修复现有代码的方案 #

只需要添加选中索引记录，并重写layoutSubviews在尺寸变化时重新校准滑块位置：

1. 添加选中索引变量
   在SlidingTabBar类中添加：

private var selectedIndex: Int = 0

2. 修改点击事件的偏移计算
   把原来用sliderView.bounds.width的地方，换成基于horizontalStack的实时宽度计算：

@objc private func itemTapped(_ recognizer: UITapGestureRecognizer) {
    guard let itemView = recognizer.view,
          let indexItem = horizontalStack.arrangedSubviews.firstIndex(of: itemView) else { return }
    
    selectedIndex = indexItem
    tapCallback?(indexItem)
    
    UIView.animate(withDuration: 0.3) {
        self.sliderView.backgroundColor = self.items[indexItem].color.withAlphaComponent(0.2)
        // 用horizontalStack的实时宽度计算每个tab的宽度
        let tabWidth = self.horizontalStack.bounds.width / CGFloat(self.items.count)
        self.sliderLeftConstraint?.constant = CGFloat(indexItem) * tabWidth
        
        self.layoutIfNeeded()
        
        // 更新文字和图标颜色
        self.horizontalStack.arrangedSubviews.enumerated().forEach { (index, view) in
            if let imageView = (view.subviews.first as? UIStackView)?.arrangedSubviews.first as? UIImageView,
               let label = (view.subviews.first as? UIStackView)?.arrangedSubviews.last as? UILabel {
                imageView.tintColor = index == indexItem ? self.items[index].color : .gray
                label.textColor = index == indexItem ? self.items[index].color : .gray
            }
        }
    }
}

3. 重写layoutSubviews，在尺寸变化时校准滑块
   每次视图布局更新（比如旋转）时，重新计算滑块的正确位置：

override func layoutSubviews() {
    super.layoutSubviews()
    // 布局完成后重新计算滑块偏移
    let tabWidth = horizontalStack.bounds.width / CGFloat(items.count)
    sliderLeftConstraint?.constant = CGFloat(selectedIndex) * tabWidth
}

更优雅的实现方案（约束绑定） #

如果不想手动计算偏移量，可以直接把滑块的左约束绑定到对应Tab的左锚点，这样系统会自动处理尺寸变化：

1. 修改初始约束绑定
   在commonInit中替换滑块的左约束和宽度约束：

// 移除原来的sliderLeftConstraint和宽度约束初始化
// sliderLeftConstraint = sliderView.leftAnchor.constraint(equalTo: horizontalStack.leftAnchor)

NSLayoutConstraint.activate([
    // ... 其他horizontalStack的约束不变
    
    // 绑定到第一个tab的左锚点和宽度
    sliderView.leftAnchor.constraint(equalTo: horizontalStack.arrangedSubviews[0].leftAnchor),
    sliderView.widthAnchor.constraint(equalTo: horizontalStack.arrangedSubviews[0].widthAnchor),
    sliderView.heightAnchor.constraint(equalTo: horizontalStack.heightAnchor),
    sliderView.centerYAnchor.constraint(equalTo: horizontalStack.centerYAnchor)
])

2. 点击时切换约束绑定目标
   修改itemTapped方法：

@objc private func itemTapped(_ recognizer: UITapGestureRecognizer) {
    guard let itemView = recognizer.view,
          let indexItem = horizontalStack.arrangedSubviews.firstIndex(of: itemView) else { return }
    
    selectedIndex = indexItem
    tapCallback?(indexItem)
    
    UIView.animate(withDuration: 0.3) {
        self.sliderView.backgroundColor = self.items[indexItem].color.withAlphaComponent(0.2)
        
        // 移除旧的左约束，绑定到选中tab的左锚点
        NSLayoutConstraint.deactivate(self.sliderView.constraints.filter { $0.firstAttribute == .left })
        NSLayoutConstraint.activate([
            self.sliderView.leftAnchor.constraint(equalTo: itemView.leftAnchor)
        ])
        
        self.layoutIfNeeded()
        
        // 更新文字和图标颜色
        self.horizontalStack.arrangedSubviews.enumerated().forEach { (index, view) in
            if let imageView = (view.subviews.first as? UIStackView)?.arrangedSubviews.first as? UIImageView,
               let label = (view.subviews.first as? UIStackView)?.arrangedSubviews.last as? UILabel {
                imageView.tintColor = index == indexItem ? self.items[index].color : .gray
                label.textColor = index == indexItem ? self.items[index].color : .gray
            }
        }
    }
}

这种方式完全依赖AutoLayout自动处理尺寸变化，不需要手动计算偏移，更稳定。

额外优化点 #

把更新Tab文字和图标的逻辑抽成单独方法，避免代码重复：

private func updateTabAppearance(for selectedIndex: Int) {
    horizontalStack.arrangedSubviews.enumerated().forEach { (index, view) in
        if let imageView = (view.subviews.first as? UIStackView)?.arrangedSubviews.first as? UIImageView,
           let label = (view.subviews.first as? UIStackView)?.arrangedSubviews.last as? UILabel {
            let isSelected = index == selectedIndex
            imageView.tintColor = isSelected ? items[index].color : .gray
            label.textColor = isSelected ? items[index].color : .gray
        }
    }
}

之后在itemTapped和commonInit中调用这个方法即可。

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