如何在UITabBarController中实现带凸起效果的自定义UITabBar？

我来给你梳理一套可行的实现方案，让你的UITabBar（包括那个Planner凸起按钮）稳稳悬浮在绿色内容区域上方：

1. 调整RootTabBarController的视图层级与布局 #

首先要修改TabBarController的默认布局逻辑，让内容视图充满整个屏幕，同时把TabBar提到内容视图的上层。在你的RootTabBarController里重写viewDidLayoutSubviews方法：

import UIKit

class RootTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // 这里添加你的子视图控制器初始化代码，比如：
        let agendaVC = AgendaViewController()
        let plannerVC = PlannerViewController()
        let settingsVC = SettingsViewController()
        
        setViewControllers([agendaVC, plannerVC, settingsVC], animated: false)
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // 找到内容视图（排除TabBar的那个子视图）
        guard let contentView = view.subviews.first(where: { !$0.isKind(of: UITabBar.self) }) else { return }
        
        // 把内容视图放到最底层
        view.sendSubviewToBack(contentView)
        // 让内容视图充满整个屏幕，不再给TabBar预留底部空间
        contentView.frame = view.bounds
        
        // 把TabBar提到最上层
        tabBar.bringSubviewToFront(tabBar)
        
        // 如果你的Planner按钮是TabBar的子视图，确保它也在最上层
        if let plannerButton = tabBar.subviews.first(where: { $0.tag == 100 }) { // 假设按钮tag设为100，你可以根据实际情况调整识别条件
            tabBar.bringSubviewToFront(plannerButton)
        }
    }
}

2. 处理自定义Planner凸起按钮的层级 #

如果你的Planner凸起按钮是自定义添加到TabBar的，一定要确保它始终在TabBar的最上层。可以创建一个自定义TabBar类来管理这个按钮：

class CustomTabBar: UITabBar {
    // 定义凸起按钮
    private let plannerButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setImage(UIImage(named: "planner-icon"), for: .normal)
        button.tag = 100 // 给按钮加个tag方便识别
        button.layer.cornerRadius = 30
        button.backgroundColor = .white
        button.layer.shadowColor = UIColor.black.cgColor
        button.layer.shadowOffset = CGSize(width: 0, height: 2)
        button.layer.shadowOpacity = 0.15
        button.layer.shadowRadius = 4
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupPlannerButton()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupPlannerButton()
    }
    
    private func setupPlannerButton() {
        addSubview(plannerButton)
        // 确保按钮在TabBar最上层
        bringSubviewToFront(plannerButton)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局都重新调整按钮位置，防止屏幕旋转或布局变化时错位
        let buttonSize: CGFloat = 60
        plannerButton.frame = CGRect(
            x: (bounds.width - buttonSize) / 2,
            y: -20, // 让按钮向上凸起20pt
            width: buttonSize,
            height: buttonSize
        )
        // 再次确保按钮在最上层
        bringSubviewToFront(plannerButton)
    }
}

然后在RootTabBarController的viewDidLoad里替换默认TabBar为自定义的：

override func viewDidLoad() {
    super.viewDidLoad()
    // 替换自定义TabBar
    let customTabBar = CustomTabBar()
    setValue(customTabBar, forKey: "tabBar")
    
    // 这里添加你的子视图控制器初始化代码...
}

3. 避免子视图控制器内容被TabBar遮挡 #

因为内容视图现在充满了整个屏幕，子VC的内容会延伸到TabBar下方，所以需要给每个子VC设置底部安全区域偏移：

class AgendaViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .green // 你的绿色区域
        
        // 根据TabBar高度设置底部安全区域，确保内容不被遮挡
        let tabBarHeight = tabBarController?.tabBar.bounds.height ?? 0
        additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: tabBarHeight, right: 0)
    }
}

这样一套操作下来，你的TabBar（包括Planner凸起按钮）就会完美悬浮在绿色内容区域的上方啦～

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