如何将自定义视图添加到 iOS 上下文菜单

Question

我想在文本上方添加类似 iMessage 的反应，如下所示：

目前，我只能显示菜单，并且不确定如何在上面添加自定义视图。这就是我的样子：

如何添加类似于 iMessage 反应视图的视图？

这就是我在集合视图中创建上下文菜单的方法：

override func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {
        let post = isFiltering ? filteredPosts[indexPath.section] : posts[indexPath.section]
        let identifier = NSString(string: "\(post.createdAt)")
        if post.username == "" {return nil}
        return UIContextMenuConfiguration(identifier: identifier, previewProvider: nil) { _ -> UIMenu? in
            let deleteAction = UIAction(title: "Delete", image: UIImage(systemName: "trash")) { _ in
                Service.deletePost(post: post)
            }
            let replyAction = UIAction(title: "Reply", image: UIImage(systemName: "arrowshape.turn.up.left")) { _ in
                self.setReplyingView(post: post)
            }
            
            let noteTagAction = UIAction(title: "Add Note Tag", image: UIImage(named: "noteFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "note", toPostWithId: post.id)
                }
            }
            
            let examTagAction = UIAction(title: "Add Exam Tag", image: UIImage(named: "examFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "exam", toPostWithId: post.id)
                }
            }
            
            let assignmentTagAction = UIAction(title: "Add Assignment Tag", image: UIImage(named: "assignmentFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "assignment", toPostWithId: post.id)
                }
            }
            
            let questionTagAction = UIAction(title: "Add Question Tag", image: UIImage(named: "questionFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "question", toPostWithId: post.id)
                }
            }
            guard let user = Service.shared.getUser() else { return UIMenu(title: "", children: [replyAction, deleteAction])}
            if user.uid == post.userId {
                return UIMenu(title: "", children: [replyAction, noteTagAction, examTagAction, assignmentTagAction, questionTagAction ,deleteAction])
            } else {
                return UIMenu(title: "", children: [replyAction, noteTagAction, examTagAction, assignmentTagAction, questionTagAction])
            }
        }
    }

但是，当返回 UIContextMenuConfiguration 时，我看不到添加自定义视图的选项。

Answer 1

当您创建 UIContextMenuConfiguration 时，这里有一个参数，该参数在此处采用闭包作为“previewProvider”，您可以返回自定义视图。 下面是一个例子..

UIContextMenuConfiguration(identifier: "unique-id", previewProvider: {
        let customView = CustomViewController()
        return customView
    }, actionProvider: {
        
    })

Answer 2

https://github.com/Hungs20/Reaction-message-ContextMenu。这是我的解决方案，使用 UITargetedPreview 显示自定义视图

@available(iOS 13.0, *)
func tableView(_ tableView: UITableView, previewForHighlightingContextMenuWithConfiguration configuration: UIContextMenuConfiguration) -> UITargetedPreview? {
    // makeTargetedPreview
}

@available(iOS 13.0, *)
func tableView(_ tableView: UITableView, previewForDismissingContextMenuWithConfiguration configuration: UIContextMenuConfiguration) -> UITargetedPreview? {
    // makeTargetedDismissPreview
}

Answer 3

我刚刚公开发布了我们在 Roze Messenger 中使用的实现：https://github.com/Roze-im/ContextualMenu