如何在Tab Bar中添加按钮，唤起带模糊背景的小Table View弹窗

嘿，我来帮你搞定这个需求！要在Tab Bar Controller里加个按钮，点击唤起带模糊背景的小尺寸Table View弹窗，咱们一步步来实现：

1. 给Tab Bar添加自定义按钮 #

首先咱们得在TabBarController里创建一个自定义按钮，放在合适的位置（比如TabBar中间），并绑定点击事件。这里用Swift代码示例：

import UIKit

class CustomTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCustomTabBarButton()
    }
    
    private func setupCustomTabBarButton() {
        // 创建按钮，你可以自定义图标、颜色
        let popupButton = UIButton(type: .system)
        popupButton.setImage(UIImage(systemName: "list.bullet.rectangle.fill"), for: .normal)
        popupButton.tintColor = .systemOrange
        popupButton.addTarget(self, action: #selector(triggerTablePopup), for: .touchUpInside)
        
        // 设置按钮位置，放在TabBar中间，稍微往上突出一点
        let buttonSize: CGFloat = 50
        popupButton.frame = CGRect(
            x: tabBar.center.x - buttonSize/2,
            y: tabBar.bounds.minY - 20,
            width: buttonSize,
            height: buttonSize
        )
        tabBar.addSubview(popupButton)
        
        // 可选：调整TabBar原有item的位置，避免被自定义按钮挡住
        if let tabItems = tabBar.items {
            let itemSpacing = tabBar.bounds.width / CGFloat(tabItems.count + 1)
            for (index, item) in tabItems.enumerated() {
                item.imageInsets = UIEdgeInsets(top: 0, left: itemSpacing * CGFloat(index+1) - buttonSize/2, bottom: 0, right: 0)
            }
        }
    }
    
    @objc private func triggerTablePopup() {
        // 点击按钮时唤起弹窗，后面会实现这个TablePopupViewController
        let popupVC = TablePopupViewController()
        // 设置弹窗样式，让原页面背景可见
        popupVC.modalPresentationStyle = .overCurrentContext
        // 自定义弹窗尺寸，小于全屏
        popupVC.preferredContentSize = CGSize(width: 340, height: 420)
        present(popupVC, animated: true)
    }
}

2. 创建带模糊背景的Table弹窗ViewController #

接下来咱们实现弹窗的核心逻辑：添加模糊背景层，嵌入TableView，并设置样式。

import UIKit

class TablePopupViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    private let tableView = UITableView()
    // 示例数据，你可以替换成自己的数据源
    private let popupData = ["功能A", "功能B", "功能C", "功能D", "功能E", "功能F"]

    override func viewDidLoad() {
        super.viewDidLoad()
        setupBlurBackground()
        setupTableViewLayout()
        // 给弹窗加圆角，提升视觉效果
        view.layer.cornerRadius = 16
        view.clipsToBounds = true
    }
    
    private func setupBlurBackground() {
        // 创建系统模糊效果，你可以切换不同样式：.systemMaterial/.systemMaterialDark/.extraLight等
        let blurEffect = UIBlurEffect(style: .systemMaterial)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.frame = view.bounds
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(blurView)
        
        // 可选：给模糊层加一层半透明遮罩，增强内容可读性
        let dimMask = UIView(frame: blurView.bounds)
        dimMask.backgroundColor = UIColor.black.withAlphaComponent(0.15)
        blurView.contentView.addSubview(dimMask)
    }
    
    private func setupTableViewLayout() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        // 给TableView添加约束，铺满弹窗
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "PopupCell")
        // 让TableView背景透明，透出模糊效果
        tableView.backgroundColor = .clear
        tableView.separatorColor = UIColor.white.withAlphaComponent(0.2)
    }
    
    // MARK: - UITableView 数据源方法
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return popupData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "PopupCell", for: indexPath)
        cell.textLabel?.text = popupData[indexPath.row]
        cell.textLabel?.textColor = .white
        cell.backgroundColor = .clear
        return cell
    }
    
    // MARK: - UITableView 代理方法
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        // 处理单元格点击事件，比如执行对应功能后关闭弹窗
        print("选中了：\(popupData[indexPath.row])")
        dismiss(animated: true)
    }
}

3. 配置AppDelegate（可选，如果你用的是传统AppDelegate配置） #

如果你的项目是用AppDelegate来设置根控制器，记得把TabBarController设为根控制器：

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        let tabBarVC = CustomTabBarController()
        // 添加你的子VC到TabBar
        let vc1 = UIViewController()
        vc1.tabBarItem = UITabBarItem(title: "首页", image: UIImage(systemName: "house"), tag: 0)
        let vc2 = UIViewController()
        vc2.tabBarItem = UITabBarItem(title: "我的", image: UIImage(systemName: "person"), tag: 1)
        tabBarVC.viewControllers = [vc1, vc2]
        
        window?.rootViewController = tabBarVC
        window?.makeKeyAndVisible()
        return true
    }
}

• 模糊效果样式：可以根据你的App风格切换UIBlurEffect.Style的不同枚举值，比如深色模式下用.systemMaterialDark更协调。
• 弹窗尺寸：通过preferredContentSize自定义宽高，完全可以按需调整。
• 弹窗动画：默认的present动画已经够用，如果需要更自定义的动画，可以实现UIViewControllerTransitioningDelegate来做转场动画。

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