IOS中的Context Menu

通过长按组件或者3D touch方式，周边全部虚化，弹出一个可操作的菜单，并且菜单之间也可以嵌套

IOS13之后已经弃用UIViewControllerPreviewingDelegate等方法，与之代替的是UIContextMenuInteractionDelegate

遵循 UIContextMenuInteractionDelegate 并实现代理方法 configurationForMenuAtLocation

UIContextMenuConfiguration 是对应弹出菜单的配置项

    lazy var config: UIContextMenuConfiguration = {
    let tempV = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { (elements) -> UIMenu? in
        
        //二级菜单数组
        var ratingActions: Array<UIAction> = []
        for i in 0..<5 {
            let action = UIAction(title: "\(i+1) 分") { (action) in
            
            }
            ratingActions.append(action)
        }
        
        let ratingMenu = UIMenu(title: "打分", image: UIImage(systemName: "star.circle"), children: ratingActions)
        
        let favoriteAction = UIAction(title: "喜欢", image: UIImage(systemName: "heart.fill"), state: .off) { (action) in
            
        }
        let shareAction = UIAction(title: "分享", image: UIImage(systemName: "square.and.arrow.up.fill"), state: .off) { (action) in
            
        }
        let deleteAction = UIAction(title: "删除", image: UIImage(systemName: "trash.fill"),attributes: [.destructive], state: .off) { (action) in
            
        }
        
        //创建一个二级菜单，并且里面还可以嵌套三级菜单、四级菜单
        let deleteMenu = UIMenu(title: "删除菜单", options: .displayInline, children: [deleteAction])

        // 将几个Action和一个二级菜单放到一级菜单里面
        return UIMenu(title: "菜单", children: [ratingMenu, favoriteAction, shareAction, deleteMenu])
    }
    return tempV
}()

    func contextMenuInteraction(_ interaction: UIContextMenuInteraction, configurationForMenuAtLocation location: CGPoint) -> UIContextMenuConfiguration? {
    return config
}

然后给对应要预览的view添加interaction

    lazy var imageView: UIButton = {
    let tempV = UIButton()
    tempV.setImage(UIImage(named: "avatar"), for: .normal)
    tempV.frame = CGRectMake(100, 100, 200, 200)
    
    //关键代码
    ==========================================================
    let interaction = UIContextMenuInteraction(delegate: self)
    tempV.addInteraction(interaction)
    ==========================================================
            
    return tempV
}()

在UIAction的回调函数里面处理每一个item的点击事件

   let deleteAction = UIAction(title: "删除", image: UIImage(systemName: "trash.fill"),attributes: [.destructive], state: .off) { (action) in
        //处理点击
   }

如果想要处理点击预览视图也就是上面代码中的imageView的事件

需要在UIContextMenuInteractionDelegate的

    func contextMenuInteraction(_ interaction: UIContextMenuInteraction, willPerformPreviewActionForMenuWith configuration: UIContextMenuConfiguration, animator: UIContextMenuInteractionCommitAnimating) {
    //处理点击预览图的逻辑
    //这里写了一个详情页的View，点击之后就会跳到详情页
    let vc = DetailViewController()
    vc.view.alpha = 0
    self.view.addSubview(vc.view)
    animator.addAnimations {
        vc.view.alpha = 1
    }
}

方法中实现对应的逻辑
预览

UITableView&UICollectionView中的cell实现

在UITableView和UICollectionView中想要实现context menu已经有封装了直接用

以UITableView为例

    func tableView(_ tableView: UITableView, contextMenuConfigurationForRowAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {
      return config
  }

在上述代理方法中实现对每一个cell的Context Menu的配置

然后在willPerformPreviewActionForMenuWith方法中实现对应点击cell的逻辑

相同的，对应action的逻辑是直接写在UIContextMenuConfiguration中的

    func tableView(_ tableView: UITableView, willPerformPreviewActionForMenuWith configuration: UIContextMenuConfiguration, animator: UIContextMenuInteractionCommitAnimating) {
      //处理对应逻辑
      //这里写了一个详情页的View，点击之后就会跳到详情页
      let vc = DetailViewController()
      vc.view.alpha = 0
      self.view.addSubview(vc.view)
      animator.addAnimations {
          vc.view.alpha = 1
      }
  }

预览

__EOF__

本文作者：R1cardo
本文链接：https://www.cnblogs.com/r1cardo/p/17101155.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！