Xcode Animated Tab Bar Controller外观定制求助：调整间距与中间按钮样式

刚好我之前在Swift 4环境下用过Ramotion的这个Animated Tab Bar组件，也做过类似的外观定制，给你分步骤拆解这两个需求，包含代码实现和Storyboard可视化操作的方法：

这个需求可以通过自定义TabBarItem子类来修改内部布局，不管是代码还是Storyboard都能实现：

代码实现方案 #

Ramotion的AnimatedTabBarItem内部封装了imageView（图标）和titleLabel（文字），我们可以自定义子类重写布局逻辑：

class CustomTabBarItem: AnimatedTabBarItem {
    override func setupViews() {
        super.setupViews()
        // 找到图标和文字之间的垂直约束，修改间距值
        if let spacingConstraint = constraints.first(where: {
            $0.firstAttribute == .bottom && $0.secondItem == titleLabel && $0.secondAttribute == .top
        }) {
            spacingConstraint.constant = 8 // 这里改成你想要的间距，默认一般是4左右
        }
        // 或者直接给titleLabel加新的top约束（如果原约束不好找的话）
        titleLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 8).isActive = true
    }
}

之后要么在代码里初始化TabBar时用这个自定义类，要么在Storyboard里把对应的Tab Bar Item的Class改成CustomTabBarItem就行。

Storyboard可视化调整 #

如果你更习惯用Storyboard操作：

1. 打开Storyboard，选中Tab Bar里的任意一个Tab Bar Item，在右侧Identity Inspector面板把Class改成上面的CustomTabBarItem。
2. 右键点击这个Tab Bar Item，选择「Show Connections Inspector」，如果能直接关联到内部的imageView和titleLabel，就可以直接在Size Inspector里调整它们的垂直间距约束。
3. 要是没法直接关联，也可以在ViewController里给这个Tab Bar Item加IBOutlet引用，然后在viewDidLoad()里动态修改约束值。

这个需求要分两步：先做按钮的凸起圆圈外观，再调整TabBar的整体布局适配凸起的按钮。

步骤1：自定义中间按钮的凸起样式 #

创建一个专门的子类来实现中间按钮的外观：

class MiddleTabBarItem: AnimatedTabBarItem {
    override func setupViews() {
        super.setupViews()
        // 添加圆圈背景视图
        let circleBackground = UIView()
        circleBackground.backgroundColor = .white // 圆圈颜色可以根据你的主题改
        circleBackground.layer.cornerRadius = 28 // 圆圈半径，根据按钮大小调整
        circleBackground.layer.shadowColor = UIColor.black.cgColor
        circleBackground.layer.shadowOpacity = 0.2
        circleBackground.layer.shadowOffset = CGSize(width: 0, height: 2)
        circleBackground.layer.shadowRadius = 4
        // 把圆圈放在图标和文字的底层
        insertSubview(circleBackground, at: 0)
        
        // 设置圆圈的约束，让它向上凸起
        circleBackground.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            circleBackground.widthAnchor.constraint(equalToConstant: 56),
            circleBackground.heightAnchor.constraint(equalToConstant: 56),
            circleBackground.centerXAnchor.constraint(equalTo: imageView.centerXAnchor),
            circleBackground.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 16) // 这个值控制凸起高度，正数越大凸得越高
        ])
        
        // 让图标在圆圈里居中，不需要文字的话可以隐藏titleLabel
        imageView.centerXAnchor.constraint(equalTo: circleBackground.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: circleBackground.centerYAnchor).isActive = true
        titleLabel.isHidden = true
    }
    
    // 可选：给按钮添加选中/取消选中的动画
    override func selectAnimation(animated: Bool, completion: (() -> Void)?) {
        super.selectAnimation(animated: animated, completion: completion)
        if let circleView = subviews.first {
            UIView.animate(withDuration: 0.2) {
                circleView.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            } completion: { _ in
                UIView.animate(withDuration: 0.1) {
                    circleView.transform = .identity
                }
                completion?()
            }
        }
    }
}

步骤2：调整TabBar布局适配凸起按钮 #

默认TabBar会均匀分布所有item，我们需要调整布局给中间按钮留出空间：

代码方式

自定义TabBarController子类：

class CustomTabBarController: AnimatedTabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 给TabBar设置边距，让中间按钮有足够空间
        tabBar.insetLayoutMarginsFromSafeArea = false
        tabBar.layoutMargins = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
    }
    
    override func viewLayoutMarginsDidChange() {
        super.viewLayoutMarginsDidChange()
        // 确保中间按钮布局正确
        tabBar.items?.forEach { item in
            if item is MiddleTabBarItem {
                item.layoutIfNeeded()
            }
        }
    }
}

Storyboard方式

1. 把Storyboard里的Tab Bar Controller的Class改成CustomTabBarController。
2. 选中中间的Tab Bar Item，在Identity Inspector里把Class改成MiddleTabBarItem。
3. 可以在Size Inspector里调整中间item的宽度，让它比其他item宽一点，适配圆圈的大小。

内容的提问来源于stack exchange，提问作者Łukasz Betta