如何在iOS 16中通过单击Table View行实现类似日历APP的菜单展示？

这个效果核心是利用iOS 16+的UIButton菜单配置，搭配自定义UITableViewCell实现单击触发下拉菜单，同时显示右侧上下箭头图标，具体实现步骤如下：

1. 核心原理 #

通过UIButton的showsMenuAsPrimaryAction属性将菜单触发方式改为单击（默认是长按），再将按钮铺满整个单元格，实现点击单元格任意位置弹出菜单的效果，同时配置按钮显示右侧下拉箭头。

2. 自定义下拉菜单单元格 #

创建自定义UITableViewCell，内部包含一个铺满整个内容视图的按钮，用于承载菜单和显示箭头：

class DropdownMenuCell: UITableViewCell {
    private let dropdownBtn = UIButton(type: .system)
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupButtonLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupButtonLayout()
    }
    
    private func setupButtonLayout() {
        contentView.addSubview(dropdownBtn)
        dropdownBtn.translatesAutoresizingMaskIntoConstraints = false
        
        // 约束按钮铺满整个单元格内容视图
        NSLayoutConstraint.activate([
            dropdownBtn.topAnchor.constraint(equalTo: contentView.topAnchor),
            dropdownBtn.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            dropdownBtn.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            dropdownBtn.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
        
        // 配置按钮样式：文字+右侧上下箭头
        var btnConfig = UIButton.Configuration.plain()
        btnConfig.image = UIImage(systemName: "chevron.up.chevron.down")
        btnConfig.imagePlacement = .trailing
        btnConfig.imagePadding = 8
        dropdownBtn.configuration = btnConfig
        
        // 设置单击触发菜单，替代默认长按
        dropdownBtn.showsMenuAsPrimaryAction = true
    }
    
    // 对外暴露配置方法，设置标题和菜单
    func setup(title: String, menu: UIMenu) {
        dropdownBtn.configuration?.title = title
        dropdownBtn.menu = menu
    }
}

3. 在TableView中配置菜单与单元格 #

在UITableView的数据源方法中，创建菜单项并绑定到自定义单元格：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "DropdownMenuCell", for: indexPath) as! DropdownMenuCell
    
    // 创建菜单项
    let repeatAction = UIAction(title: "重复") { _ in
        // 处理重复选项逻辑
        print("触发重复设置")
    }
    
    let alertAction = UIAction(title: "添加提醒") { _ in
        print("触发添加提醒")
    }
    
    // 组装菜单
    let menu = UIMenu(title: "", children: [repeatAction, alertAction])
    
    // 配置单元格
    cell.setup(title: "日程重复", menu: menu)
    return cell
}

4. 补充说明 #

• 箭头图标使用苹果SF Symbols的chevron.up.chevron.down，可根据需求替换为自定义图标；
• 如果不需要完全自定义单元格，也可以在系统单元格的contentView上添加按钮，或者给单元格添加点击事件，手动调用dropdownBtn.showMenu(from: contentView, rect: contentView.bounds, in: view)触发菜单；
• 菜单支持嵌套子菜单、禁用状态、图标等自定义配置，可根据业务需求扩展。

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