IOS中的Context Menu

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
        }
    }
  

  预览